Fix mun selection on map

stadt-land-energie-projekt · Sep 24, 2024 · 5c2cafb · 5c2cafb
1 parent a44d99f
commit 5c2cafb
Showing 1 changed file with 15 additions and 48 deletions.
diff --git a/slapp/static/js/municipality.js b/slapp/static/js/municipality.js
@@ -5,51 +5,6 @@ function getSelectedMunicipalities() {
     return Array.from(document.getElementById("selected_municipalities").querySelectorAll("input[name='selected_mun']")).map(municipality => parseInt(municipality.value));
 }
 
-function toggleMunicipality(municipality_id, municipality_name) {
-    if (getSelectedMunicipalities().includes(municipality_id)) {
-        deselectMunicipality(municipality_id);
-    } else {
-        selectMunicipality(municipality_id, municipality_name);
-    }
-}
-
-function selectMunicipality(municipality_id, municipality_name) {
-    // Remove "No municipality selected" info if first municipality gets selected
-    if (getSelectedMunicipalities().length === 0) {
-        document.getElementById("selected_municipalities").getElementsByTagName("p")[1].remove();
-    }
-    // Add municipality to banner
-    const col = document.createElement("div");
-    col.className = "col";
-    const span = document.createElement("span");
-    span.className = "badge badge-secondary";
-    span.innerHTML = municipality_name;
-    const input = document.createElement("input");
-    input.hidden = true;
-    input.name = "selected_mun";
-    input.value = municipality_id;
-    col.appendChild(span);
-    col.appendChild(input);
-    document.getElementById("selected_municipalities").getElementsByClassName("row")[0].appendChild(col);
-    selectMunicipalityInMap(municipality_id, true);
-}
-
-function deselectMunicipality(municipality_id) {
-    // Remove municipality from banner
-    const municipalityNodes = document.getElementById("selected_municipalities").querySelectorAll(`input[name='selected_mun']`);
-    const matchingMunicipalityNodes = Array.from(municipalityNodes).filter(municipalityNode => parseInt(municipalityNode.value) === municipality_id);
-    if (matchingMunicipalityNodes.length > 0) {
-        matchingMunicipalityNodes[0].parentNode.remove();
-        selectMunicipalityInMap(municipality_id, false);
-    }
-    // Add "No municipality selected" info if last municipality gets deselected
-    if (getSelectedMunicipalities().length === 0) {
-        const paragraph = document.createElement("p");
-        paragraph.innerHTML = "Keine Region ausgewählt.";
-        document.getElementById("selected_municipalities").getElementsByClassName("row")[0].appendChild(paragraph);
-    }
-}
-
 function selectMunicipalityInMap(municipality_id, selected) {
     map.setFeatureState(
         {
@@ -63,7 +18,19 @@ function selectMunicipalityInMap(municipality_id, selected) {
     );
 }
 
+function toggleMunicipalities() {
+    /**
+     * Removes selection for all municipalities and re-selects municipalities from selection
+     */
+    map.removeFeatureState({source: "municipality", sourceLayer: "municipality"});
+    const munsInSelection = Array.from(document.getElementById('municipality_select').selectedOptions).map(item => parseInt(item.value));
+    for (const munId of munsInSelection) {
+        selectMunicipalityInMap(munId, true);
+    }
+}
+
 document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('municipality_select').addEventListener('change', toggleMunicipalities);
     const regionSelect = document.getElementById('region_select');
 
     if (regionSelect) {
@@ -89,10 +56,10 @@ document.addEventListener('DOMContentLoaded', function () {
             }
         }).then(function () {
             $('#region_change_confirmation').modal('hide');
-            deselectMunicipality(regionSelect);
         });
-            this.setAttribute('data-previous-region-id', regionID);
-            htmx.trigger("#municipality_select", "resetRegion");
+        this.setAttribute('data-previous-region-id', regionID);
+        htmx.trigger("#region_select", "resetRegion");
+        htmx.trigger("#municipality_select", "resetRegion");
     });
 
     document.getElementById('abort_region_change_btn').addEventListener('click', function () {