The Cruise
dashboard
Dashboard
explore
Itineraries
pin_drop
Destinations
directions_boat
Ships
account_circle
arrow_drop_down
Profile
Logout
Zuiderdam
{#
#} <p><strong>Ship Name:</strong> ms Zuiderdam</p> <p><strong>Ship Line:</strong> Holland America</p> <p><strong>Destination:</strong> Halifax</p> <p><strong>ETA:</strong> June 4, 10:00</p> <p><strong>Length:</strong> 285 m / 935 ft</p> <p><strong>Passenger Capacity:</strong> 2364</p> <p><strong>Flag:</strong> Netherlands</p> <p><strong>Current Itinerary:</strong> Round-trip Canada New England Unesco Sites Collector</p> <h2>Itineraries</h2> <ul> <li> <a href="/itineraries/225/"> 15-Day Panama Canal (Transit) </a> </li> <li> <a href="/itineraries/223/"> 15-Day Panama Canal (Transit) </a> </li> <li> <a href="/itineraries/222/"> 15-Day Panama Canal with History Channel (Transit) </a> </li> <li> <a href="/itineraries/224/"> 14-Day Panama Canal (Transit) </a> </li> <li> <a href="/itineraries/226/"> 17-Day Panama Canal (Transit) </a> </li> <li> <a href="/itineraries/393/"> 10-Day Southern Caribbean: Cabo Rojo & Abc Islands (1:2026) </a> </li> <li> <a href="/itineraries/390/"> 10-Day Southern Caribbean: Cabo Rojo & Abc Islands (1:2025) </a> </li> <li> <a href="/itineraries/391/"> 11-Day Eastern Caribbean: Windward & Leeward Islands Holiday </a> </li> <li> <a href="/itineraries/392/"> 11-Day Eastern Caribbean: Windward & Leeward Islands (1:2026) </a> </li> <li> <a href="/itineraries/394/"> 11-Day Eastern Caribbean: Windward & Leeward Islands (1:2026) </a> </li> <li> <a href="/itineraries/395/"> 11-Day Southern Caribbean: Amber Cove & Abc Islands (1:2027) </a> </li> <li> <a href="/itineraries/396/"> 10-Day Eastern Caribbean: Windward & Leeward Islands (1:2027) </a> </li> </ul> <div id="map" style="height: 500px;"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script> // Wait for the DOM to fully load $(document).ready(function () { try { const temp = JSON.stringify({"id": "647", "name": "ms Zuiderdam", "url": "https://www.cruisemapper.com/ships/ms-Zuiderdam-647", "url_deckplans": "https://www.cruisemapper.com/deckplans/ms-Zuiderdam-647", "url_staterooms": "https://www.cruisemapper.com/cabins/ms-Zuiderdam-647", "line": {"id": "11", "title": "Holland America", "url": "https://www.cruisemapper.com/cruise-lines/Holland-America-11"}, "image": "/images/ships/647-large-303ed4c69846ab36c2904d3ba8573050.jpg", "lastReport": "", "destination": "Halifax", "eta": "June 4, 10:00", "spec_length": "285 m / 935 ft", "spec_passengers": 2364, "flag": {"code": "nl", "name": "Netherlands"}, "year_of_built": 2002, "weather": {"temperature": "<img class=\"icon\" src=\"/images/graphics/weather/d00.svg\" width=\"36px\" height=\"36px\" alt=\"min: 42 \u00b0F (5 \u00b0C) / max: 60 \u00b0F (16 \u00b0C)\" title=\"min: 42 \u00b0F (5 \u00b0C) / max: 60 \u00b0F (16 \u00b0C)\"> 56\u00b0F <br>13.5\u00b0C", "wind": "<img class=\"icon\" src=\"/images/graphics/weather/compass.svg\" width=\"29px\" height=\"29px\" alt=\"Wind: 52\u00b0/ 2.6 m/s Gust: 3.7 m/s\" title=\"Wind: 52\u00b0/ 2.6 m/s Gust: 3.7 m/s\"><img class=\"compassArrow\" src=\"/images/graphics/weather/compass_arrow.svg\" width=\"10px\" alt=\"Wind: 52\u00b0/ 2.6 m/s Gust: 3.7 m/s\" title=\"Wind: 52\u00b0/ 2.6 m/s Gust: 3.7 m/s\" style=\"transform:rotate(-128deg);\">Light breeze<br>2.6 m/s ", "wave": "<img class=\"icon\" src=\"/images/graphics/weather/minmax.svg\" width=\"20px\" height=\"20px\" alt=\"Min / Max Temperature\" title=\"Min / Max Temperature\"> <span class=\"maxtmp\">60 \u00b0F / 16 \u00b0C </span><br><span class=\"mintmp\">42 \u00b0F / 6 \u00b0C</span>", "localtime": "2026-06-03 15:35"}, "track": [], "cruise": {"name": "Round-trip Canada New England Unesco Sites Collector", "url": "https://www.cruisemapper.com/ships/ms-Zuiderdam-647#ship-itinerary-4838755-2026", "start_date": "23 May, 2026", "end_date": "06 Jun, 2026", "days": "14 days", "itinerary": {"1": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"USA\" class=\"flag-icon flag-icon-us\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/boston-port-101\">Boston</a>", "date": "<div class=\"date\"><i class=\"fa fa-flag\" aria-hidden=\"true\"></i> 23 May 16:00</div>"}, "2": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"USA\" class=\"flag-icon flag-icon-us\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/portland-me-port-674\">Portland ME</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 24 May 07:00 - 13:00</div>"}, "3": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/halifax-port-97\">Halifax</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 25 May 10:00 - 18:00</div>"}, "4": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/sydney-ns-port-3667\">Sydney NS</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 26 May 10:00 - 20:00</div>"}, "5": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/prince-edward-island-port-704\">Prince Edward Island</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 27 May 10:00 - 23:00</div>"}, "6": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/quebec-city-port-662\">Quebec City</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 30 May 07:00 - 23:00</div>"}, "7": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/prince-edward-island-port-704\">Prince Edward Island</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 02 Jun 07:00 - 17:00</div>"}, "8": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/sydney-ns-port-3667\">Sydney NS</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 03 Jun 07:00 - 16:00</div>"}, "9": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"Canada\" class=\"flag-icon flag-icon-ca\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/halifax-port-97\">Halifax</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 04 Jun 08:00 - 16:00</div>"}, "10": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"USA\" class=\"flag-icon flag-icon-us\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/portland-me-port-674\">Portland ME</a>", "date": "<div class=\"date\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> 05 Jun 12:30 - 22:00</div>"}, "11": {"port": "<span data-toggle=\"tooltip\" data-placement=\"left\" title=\"USA\" class=\"flag-icon flag-icon-us\"></span> <a class=\"cs-port strong\" href=\"https://www.cruisemapper.com/ports/boston-port-101\">Boston</a>", "date": "<div class=\"date\"><i class=\"fa fa-flag-checkered\" aria-hidden=\"true\"></i> 06 Jun 07:00</div>"}}, "path": {"distance": 2918, "extent": [42.323786, -71.20071, 49.422852, -59.532681], "points": [[-71.04403, 42.36054], [-70.962781, 42.323786], [-70.413482, 42.699536], [-70.171385, 43.552015], [-70.186184, 43.622676], [-70.24792, 43.65575], [-70.24792, 43.65575], [-70.186184, 43.622676], [-66.005602, 43.26776], [-65.532719, 43.238295], [-64.960945, 43.528396], [-63.461384, 44.355663], [-63.5206, 44.5851], [-63.57004, 44.65103], [-63.57004, 44.65103], [-63.5206, 44.5851], [-63.116162, 44.495628], [-60.701403, 45.249951], [-59.969603, 45.677451], [-59.68911, 45.891863], [-59.532681, 46.064295], [-59.647755, 46.282188], [-60.012756, 46.345526], [-60.193306, 46.264211], [-60.19319, 46.14202], [-60.19319, 46.14202], [-60.193306, 46.264211], [-60.176377, 46.38647], [-60.212616, 46.857897], [-60.309431, 47.123113], [-60.419553, 47.107734], [-60.791304, 47.055782], [-62.507805, 45.95726], [-62.814014, 45.940956], [-63.056775, 46.034876], [-63.110568, 46.184052], [-63.11948, 46.23104], [-63.11948, 46.23104], [-63.110568, 46.184052], [-63.179534, 46.098038], [-63.714711, 46.227009], [-64.156093, 46.388035], [-64.404371, 46.603579], [-64.458164, 46.683123], [-64.022299, 48.787147], [-64.358853, 49.167383], [-65.622311, 49.422852], [-67.716119, 48.910589], [-69.375307, 48.252871], [-69.823944, 47.811127], [-70.238541, 47.470331], [-70.422235, 47.420812], [-70.550692, 47.262389], [-70.705484, 47.118789], [-70.865413, 46.928326], [-70.921935, 46.890152], [-71.048465, 46.84624], [-71.173069, 46.833499], [-71.19587, 46.816799], [-71.20071, 46.81547], [-71.20071, 46.81547], [-71.19587, 46.816799], [-71.173069, 46.833499], [-71.048465, 46.84624], [-70.921935, 46.890152], [-70.865413, 46.928326], [-70.705484, 47.118789], [-70.550692, 47.262389], [-70.422235, 47.420812], [-70.238541, 47.470331], [-69.823944, 47.811127], [-69.375307, 48.252871], [-67.716119, 48.910589], [-65.622311, 49.422852], [-64.358853, 49.167383], [-64.022299, 48.787147], [-64.458164, 46.683123], [-64.404371, 46.603579], [-64.156093, 46.388035], [-63.714711, 46.227009], [-63.179534, 46.098038], [-63.110568, 46.184052], [-63.11948, 46.23104], [-63.11948, 46.23104], [-63.110568, 46.184052], [-63.056775, 46.034876], [-62.814014, 45.940956], [-62.507805, 45.95726], [-60.791304, 47.055782], [-60.419553, 47.107734], [-60.309431, 47.123113], [-60.212616, 46.857897], [-60.176377, 46.38647], [-60.193306, 46.264211], [-60.19319, 46.14202], [-60.19319, 46.14202], [-60.193306, 46.264211], [-60.012756, 46.345526], [-59.647755, 46.282188], [-59.532681, 46.064295], [-59.68911, 45.891863], [-59.969603, 45.677451], [-60.701403, 45.249951], [-63.116162, 44.495628], [-63.5206, 44.5851], [-63.57004, 44.65103], [-63.57004, 44.65103], [-63.5206, 44.5851], [-63.461384, 44.355663], [-64.960945, 43.528396], [-65.532719, 43.238295], [-66.005602, 43.26776], [-70.186184, 43.622676], [-70.24792, 43.65575], [-70.24792, 43.65575], [-70.186184, 43.622676], [-70.171385, 43.552015], [-70.413482, 42.699536], [-70.962781, 42.323786], [-71.04403, 42.36054]], "ports": [{"dep_datetime": "null", "poi": "101", "lat": "42.36054", "lon": "-71.04403", "day": "15", "icon": "round"}, {"dep_datetime": "2026-05-24 13:00:00", "poi": "674", "lat": "43.65575", "lon": "-70.24792", "day": "2/14", "icon": ""}, {"dep_datetime": "2026-05-25 18:00:00", "poi": "97", "lat": "44.65103", "lon": "-63.57004", "day": "3/13", "icon": ""}, {"dep_datetime": "2026-05-26 20:00:00", "poi": "3667", "lat": "46.14202", "lon": "-60.19319", "day": "4/12", "icon": ""}, {"dep_datetime": "2026-05-27 23:00:00", "poi": "704", "lat": "46.23104", "lon": "-63.11948", "day": "5/11", "icon": ""}, {"dep_datetime": "2026-05-30 23:00:00", "poi": "662", "lat": "46.81547", "lon": "-71.20071", "day": "8", "icon": ""}]}}}) const cruiseData = JSON.parse(temp); console.log(cruiseData) // Extract track data or initialize as an empty array const track = cruiseData.track || []; // Check if there are any track points to display if (track.length === 0) { console.error("No track data available"); return; } // Initialize the map var map = L.map('map'); // Add OpenStreetMap tiles to the map L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var trackCoordinates = cruiseData.track.map(function (point) { return [point.lat, point.lon]; // [latitude, longitude] }); var polyline = L.polyline(trackCoordinates, { color: 'red' }).addTo(map); map.fitBounds(polyline.getBounds()); var lastPoint = cruiseData.track[cruiseData.track.length - 1]; var lastMarker = L.marker([lastPoint.lat, lastPoint.lon]).addTo(map).bindPopup(cruiseData.name); console.log("Map loaded successfully with track data:", track); } catch (error) { console.error("Error loading map:", error); } }); </script> </div> </main> </div> </div> <script src="/static/itineraryViewer/js/master.js"></script> <script> const djangoURLs = { }; const csrfToken = "CLyuGut4Y06L5fN5cPAbKBFLePv57I9efJO6fa39SkiePupaflahvWiiFneFBgnn"; // Page-specific filter controller const activeFiltersList = []; document.addEventListener("DOMContentLoaded", function() { // Selectively enable/disable sidebar filters based on page definition const filterGroups = document.querySelectorAll(".sidebar-filters .filter-group"); filterGroups.forEach(group => { const filterName = group.getAttribute("data-filter"); if (activeFiltersList.includes(filterName)) { group.classList.remove("disabled-group"); const controls = group.querySelectorAll("select, input, .m3-select-trigger"); controls.forEach(c => { c.removeAttribute("disabled"); c.classList.remove("disabled-trigger"); if (c.tagName === 'SELECT') { $(c).prop('disabled', false).trigger('change.select2'); } }); } else { group.classList.add("disabled-group"); const controls = group.querySelectorAll("select, input, .m3-select-trigger"); controls.forEach(c => { c.setAttribute("disabled", "disabled"); c.classList.add("disabled-trigger"); if (c.tagName === 'SELECT') { $(c).prop('disabled', true).trigger('change.select2'); } }); } }); // Mapping of Material Design 3 Components to native select filters const m3Mappings = { 'line': { selectId: 'filter-cruise-line', triggerId: 'trigger-cruise-line', menuId: 'menu-cruise-line', searchId: 'search-cruise-line', listId: 'options-cruise-line', label: 'Cruise Line' }, 'ship': { selectId: 'filter-ship', triggerId: 'trigger-ship', menuId: 'menu-ship', searchId: 'search-ship', listId: 'options-ship', label: 'Ship' }, 'region': { selectId: 'filter-region', triggerId: 'trigger-region', menuId: 'menu-region', searchId: 'search-region', listId: 'options-region', label: 'Region' }, 'country': { selectId: 'filter-country', triggerId: 'trigger-country', menuId: 'menu-country', searchId: 'search-country', listId: 'options-country', label: 'Country' }, 'ports': { selectId: 'filter-destination-ports', triggerId: 'trigger-ports', menuId: 'menu-ports', searchId: 'search-ports', listId: 'options-ports', label: 'Ports' }, 'embark': { selectId: 'filter-embark-port', triggerId: 'trigger-embark', menuId: 'menu-embark', searchId: 'search-embark', listId: 'options-embark', label: 'Embark' }, 'length': { selectId: 'filter-duration', triggerId: 'trigger-length', menuId: 'menu-length', searchId: 'search-length', listId: 'options-length', label: 'Length' }, 'youtube': { selectId: 'filter-linked-video', triggerId: 'trigger-youtube', menuId: 'menu-youtube', searchId: 'search-youtube', listId: 'options-youtube', label: 'Youtube Review' } }; // Setup synchronization for each mapping Object.keys(m3Mappings).forEach(key => { const config = m3Mappings[key]; const selectEl = document.getElementById(config.selectId); const triggerEl = document.getElementById(config.triggerId); const menuEl = document.getElementById(config.menuId); const searchEl = document.getElementById(config.searchId); const listContainer = document.getElementById(config.listId); if (!selectEl || !triggerEl || !menuEl || !listContainer) return; // Function to update the trigger input label and chips function updateLabel(selectedValues) { const chipsContainer = triggerEl.querySelector('.m3-select-chips'); if (!chipsContainer) return; chipsContainer.innerHTML = ''; if (selectedValues.length === 0) { chipsContainer.innerHTML = `<span class="placeholder">Select ${config.label}</span>`; } else { selectedValues.forEach(val => { const opt = Array.from(selectEl.options).find(o => o.value === val); const text = opt ? opt.text : val; const chip = document.createElement('div'); chip.className = 'm3-chip'; chip.setAttribute('data-value', val); chip.innerHTML = ` <span>${text}</span> <span class="material-symbols-outlined chip-remove">close</span> `; // Clicking close on the chip removes it from selection chip.querySelector('.chip-remove').addEventListener('click', function(e) { e.stopPropagation(); const currentChecked = $(selectEl).val() || []; const newChecked = currentChecked.filter(v => v !== val); $(selectEl).val(newChecked).trigger('change'); }); chipsContainer.appendChild(chip); }); } } // Function to rebuild options list function rebuildOptions() { listContainer.innerHTML = ''; const selectedValues = $(selectEl).val() || []; Array.from(selectEl.options).forEach(opt => { const val = opt.value; if (!val) return; // Skip empty value options const text = opt.text || val; const row = document.createElement('div'); row.className = 'menu-option-row'; row.setAttribute('data-value', val); const isChecked = selectedValues.includes(val); row.innerHTML = ` <md-checkbox ${isChecked ? 'checked' : ''}></md-checkbox> <span>${text}</span> `; // Row click triggers checkbox and select value sync row.addEventListener('click', function(e) { e.stopPropagation(); const checkbox = row.querySelector('md-checkbox'); checkbox.checked = !checkbox.checked; // Gather all checked values from the DOM const currentChecked = []; listContainer.querySelectorAll('.menu-option-row').forEach(r => { const cb = r.querySelector('md-checkbox'); if (cb && cb.checked) { currentChecked.push(r.getAttribute('data-value')); } }); // Update native hidden selector and fire standard jQuery change $(selectEl).val(currentChecked).trigger('change'); updateLabel(currentChecked); }); listContainer.appendChild(row); }); updateLabel(selectedValues); } // Initial build rebuildOptions(); // 1. MutationObserver to handle dynamic additions/removals of options inside select elements const observer = new MutationObserver(function() { rebuildOptions(); }); observer.observe(selectEl, { childList: true, subtree: true }); // 2. Change event listener to keep checkboxes in sync when the select changes programmatically selectEl.addEventListener('change', function() { const currentSelected = $(selectEl).val() || []; const rowsCount = listContainer.querySelectorAll('.menu-option-row').length; const optionsCount = Array.from(selectEl.options).filter(o => o.value).length; if (rowsCount !== optionsCount) { rebuildOptions(); } else { listContainer.querySelectorAll('.menu-option-row').forEach(r => { const val = r.getAttribute('data-value'); const cb = r.querySelector('md-checkbox'); if (cb) { cb.checked = currentSelected.includes(val); } }); updateLabel(currentSelected); } }); // 3. Click handler on the select trigger to toggle menu open/close state robustly triggerEl.addEventListener('click', function(e) { e.stopPropagation(); const isOpen = menuEl.classList.contains('open'); // Close all other menus first Object.values(m3Mappings).forEach(other => { const otherMenu = document.getElementById(other.menuId); const otherTrigger = document.getElementById(other.triggerId); if (otherMenu) { otherMenu.classList.remove('open'); } if (otherTrigger) { otherTrigger.classList.remove('open-trigger'); } }); if (!isOpen) { menuEl.classList.add('open'); triggerEl.classList.add('open-trigger'); } else { menuEl.classList.remove('open'); triggerEl.classList.remove('open-trigger'); } }); // 4. Search box filtering logic if (searchEl) { searchEl.addEventListener('click', function(e) { e.stopPropagation(); }); searchEl.addEventListener('keydown', function(e) { e.stopPropagation(); }); searchEl.addEventListener('keyup', function(e) { e.stopPropagation(); const query = searchEl.value.toLowerCase().trim(); listContainer.querySelectorAll('.menu-option-row').forEach(r => { const text = r.textContent.toLowerCase(); if (text.includes(query)) { r.style.display = 'flex'; } else { r.style.display = 'none'; } }); }); } }); // Global click outside listener to auto-close dropdown menus document.addEventListener('click', function(e) { const activeDropdowns = document.querySelectorAll('.m3-dropdown-menu.open'); activeDropdowns.forEach(menu => { const selectWrapper = menu.closest('.m3-multi-select'); if (selectWrapper && !selectWrapper.contains(e.target)) { menu.classList.remove('open'); const triggerId = menu.id.replace('menu-', 'trigger-'); const trigger = document.getElementById(triggerId); if (trigger) { trigger.classList.remove('open-trigger'); } } }); }); // "Clear Filters" Button functionality const clearFiltersBtn = document.getElementById('clear-filters-btn'); if (clearFiltersBtn) { clearFiltersBtn.addEventListener('click', function() { // Clear all select elements const selects = document.querySelectorAll('.select-multiple'); selects.forEach(select => { $(select).val([]).trigger('change'); }); // Clear date range pickers const dateRangeEl = document.getElementById('date-range'); if (dateRangeEl) { dateRangeEl.value = ''; if (dateRangeEl._flatpickr) { dateRangeEl._flatpickr.clear(); } } // Reset M3 trigger labels and checkboxes Object.values(m3Mappings).forEach(config => { const triggerEl = document.getElementById(config.triggerId); if (triggerEl) { triggerEl.classList.remove('open-trigger'); const chipsContainer = triggerEl.querySelector('.m3-select-chips'); if (chipsContainer) { chipsContainer.innerHTML = `<span class="placeholder">Select ${config.label}</span>`; } } const menuEl = document.getElementById(config.menuId); if (menuEl) { menuEl.classList.remove('open'); } const listContainer = document.getElementById(config.listId); if (listContainer) { listContainer.querySelectorAll('md-checkbox').forEach(cb => { cb.checked = false; }); } }); }); } // Simple User Dropdown Toggle via Material Web Components const userDropdown = document.getElementById('userDropdown'); const userMenu = document.getElementById('userMenu'); const logoutItem = document.getElementById('logout-menu-item'); const logoutForm = document.getElementById('logout-form'); if (userDropdown && userMenu) { userMenu.anchorElement = userDropdown; userDropdown.addEventListener('click', function(e) { e.stopPropagation(); userMenu.open = !userMenu.open; }); } if (logoutItem && logoutForm) { logoutItem.addEventListener('click', function() { logoutForm.submit(); }); } }); </script> </body> </html>
