feat: clean the demo and the code

Woosmap · Sep 20, 2024 · a1506d0 · a1506d0
1 parent 61e3079
commit a1506d0
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 70 deletions.
diff --git a/samples/demo-airport/index.njk b/samples/demo-airport/index.njk
@@ -1,8 +1,8 @@
 ---json
 {
 "parkings": [
-    { "ref": "p1", "name": "Parking 1 (Via Taxi/Voiture)", "shortname": "Parking"},
-    { "ref": "dm", "name": "Dépose Minute (Via Taxi/Voiture)", "shortname": "Dépose Minute"},
+    { "ref": "p1", "name": "Parking 1 (Via Voiture)", "shortname": "Parking"},
+    { "ref": "dm", "name": "Dépose Minute (Via Taxi)", "shortname": "Dépose Minute"},
     { "ref": "nv", "name": "Navette (Via Transport public)", "shortname": "Navette"}
 ],
 "gates": [
@@ -39,7 +39,71 @@
             </button>
             <ul id="suggestions-list"></ul>
         </div>
-        {% include '../../src/_includes/indoor-poi-selector.njk' %}
+<div id="poiSelector" class="dropdown">
+    <button id="parkingDropdownButton" class="dropdown-button"><span>
+            {% set selectedPOIs = parkings | selectattr("selected") | list %}
+            {% if selectedPOIs.length > 0 %}
+                Parking:
+                {% for poi in selectedPOIs %}
+                    <strong>{{ poi.shortname }}</strong>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+            {% else %}
+                Choisissez un parking
+            {% endif %}
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4 4 3.4 3.4c.3.4.9.4 1.2 0L11.9 4 14 6.2l-5.4 5.6c-.3.3-.9.3-1.2 0L2 6.2z"></path>
+        </svg>
+    </button>
+    <div id="parkingDropdown" class="dropdown-content dropdown-menu">
+        <div>
+            <ul role="listbox">
+                {% for poi in parkings %}
+                    <li class="parking {{ 'active' if poi.selected }}" data-parkingref="{{ poi.ref }}"
+                        data-parkingname="{{ poi.name }}">
+                        <div class="dropdown-menuitem">
+                            <div class="parking-name">{{ poi.name }}</div>
+                            <div class="active-icon-wrapper"></div>
+                        </div>
+                    </li>
+                {% endfor %} 
+            </ul>
+        </div>
+    </div>
+</div>
+<div id="poiSelector2" class="dropdown">
+    <button id="gateDropdownButton" class="dropdown-button"><span>
+            {% set selectedPOIs = gates | selectattr("selected") | list %}
+            {% if selectedPOIs.length > 0 %}
+                Porte:
+                {% for poi in selectedPOIs %}
+                    <strong>{{ poi.shortname }}</strong>{% if not loop.last %}, {% endif %}
+                {% endfor %}
+            {% else %}
+                Choisissez une porte
+            {% endif %}
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4 4 3.4 3.4c.3.4.9.4 1.2 0L11.9 4 14 6.2l-5.4 5.6c-.3.3-.9.3-1.2 0L2 6.2z"></path>
+        </svg>
+    </button>
+    <div id="gateDropdown" class="dropdown-content dropdown-menu">
+        <div>
+            <ul role="listbox">
+                {% for poi in gates %}
+                    <li class="gate {{ 'active' if poi.selected }}" data-gateref="{{ poi.ref }}"
+                        data-gatename="{{ poi.name }}">
+                        <div class="dropdown-menuitem">
+                            <div class="gate-name">{{ poi.name }}</div>
+                            <div class="active-icon-wrapper"></div>
+                        </div>
+                    </li>
+                {% endfor %} 
+            </ul>
+        </div>
+    </div>
+</div>
+
     </div>
     <!-- [END woosmap_{{ tag }}_div] -->
 {% endblock %}
diff --git a/samples/demo-airport/index.ts b/samples/demo-airport/index.ts
@@ -351,6 +351,7 @@ function toggleDropdown(event: Event) {
       hideDropdown(dropdown);
     } else {
       showDropdown(dropdown);
+      hideUnselectDropdowns(dropdown);
     }
   }
 }
@@ -367,13 +368,20 @@ function hideDropdowns() {
   const dropdowns = document.querySelectorAll(".dropdown");
   document.addEventListener("click", (event: Event) => {
     dropdowns.forEach((dropdown: Element) => {
-      if (!dropdown.contains(event.target as Node)) {
         hideDropdown(dropdown);
-      }
     });
   });
 }
 
+function hideUnselectDropdowns(selectedDropdown) {
+  const dropdowns = document.querySelectorAll(".dropdown");
+  dropdowns.forEach((dropdown: Element) => {
+      if (dropdown != selectedDropdown) {
+        hideDropdown(dropdown);
+      }    
+    });
+}
+
 function showDropdown(dropdown: Element) {
   const dropdownContent = dropdown.querySelector(
     ".dropdown-content"

diff --git a/samples/demo-airport/style.scss b/samples/demo-airport/style.scss
@@ -28,13 +28,23 @@ body {
   width: 200px;
 }
 
+#parkingDropdownButton {
+  width: 200px;
+}
+
+#gateDropdownButton {
+  width: 200px;
+}
+
 #poiSelector2 {
   position: absolute;
   top: 10px;
   left: 540px;
   width: 200px;
 }
 
+
+
 .parking {
   .parking-name {
     display: flex;

diff --git a/src/_includes/indoor-poi-selector.njk b/src/_includes/indoor-poi-selector.njk