Refactor to generate menu dynamically

webgis/js/controllers/layer_controller.js

@@ -12,17 +12,10 @@ export default class extends Controller {
         let map = GisState.map;
         let target = event.currentTarget;
         const id = target.parentElement.getAttribute('data-id');
-        const layers = {
-            'siti': GisState.layers.sites,
-            'non-conser': GisState.layers.notConserved,
-            'rinv': GisState.layers.findings,
-            'preist': GisState.layers.prehistoric,
-            'subacquei': GisState.layers.underwater,
-        }
-
-        let group = layers[id];
         this.toggleIcon(event.currentTarget);
 
+        let group = GisState.layers[id];
+
         if (map.hasLayer(group)) {
             map.removeLayer(group);
             target.title = "Mostra";

webgis/js/controllers/menu_controller.js

@@ -5,30 +5,47 @@ export default class extends Controller {
     static targets = ['list', 'menu', 'icon'];
 
     buildMenu() {
-        let ulAnacapri = document.createElement('ul');
-        ulAnacapri.id = 'siti-anacapri-sub';
-        ulAnacapri.className = 'is-hidden';
+        const groups = Object.keys(GisState.markers);
+        const municipalities = ['Anacapri', 'Capri'];
 
-        console.log(GisState.markers.sites);
-
-        for (let key in GisState.markers.sites) {
-            if (GisState.markers.sites[key].options.municipality === 'Anacapri') {
-                const li = document.createElement('li');
-                li.innerHTML = `
-                    <a class="is-block button"
-                        data-action="marker#go"
-                        data-controller="marker"
-                        data-marker-coords-value="${key}"
-                        data-marker-group-value="sites">
-                        ${GisState.markers.sites[key].options.label}
-                    </a>
-                `;
-
-                ulAnacapri.appendChild(li);
+        // TODO refactor with Stimulus values?
+        for (let group of groups) {
+            for (let municipality of municipalities) {
+                let ul = this.renderMenuItems(group, municipality);
+                document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
+                    ?.appendChild(ul);
             }
         }
-     
-        console.log(ulAnacapri);
+    }
+
+    /**
+     * 
+     * @param {String} group 
+     * @param {String} municipality 
+     */
+    renderMenuItems(group, municipality) {
+        const ul = document.createElement('ul');
+        ul.className = 'is-hidden';
+        ul.id = `${group}-${municipality.toLowerCase()}-sub`;
+
+        const template = document.getElementById('menu-item-template');
+
+        for (let key in GisState.markers[group]) {
+            const marker = GisState.markers[group][key];
+            if (marker.options.municipality === municipality) {
+                const clone = template.content.cloneNode(true);
+                const link = clone.querySelector('a');
+                const labelSpan = clone.querySelector('.label');
+
+                link.dataset.markerCoordsValue = key;
+                link.dataset.markerGroupValue = group;
+                labelSpan.textContent = marker.options.label;
+
+                ul.appendChild(clone);
+            }
+        }
+
+        return ul;
     }
 
     toggleMenu() {