From 64af485a54394a2db299ffabd5d82d56c5fa4edb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Mon, 10 Feb 2025 15:07:13 +0100
Subject: [PATCH] No point layers in control; add visibility toggle in menu

---
 webgis/index.html                          | 65 ++++++++++++++--------
 webgis/js/controllers/layer_controller.js  | 44 +++++++++++++++
 webgis/js/controllers/marker_controller.js |  4 +-
 webgis/js/gis.js                           | 10 ++--
 webgis/js/index.js                         |  2 +
 5 files changed, 97 insertions(+), 28 deletions(-)
 create mode 100644 webgis/js/controllers/layer_controller.js

diff --git a/webgis/index.html b/webgis/index.html
index e14d851..e77919c 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -70,19 +70,24 @@
             </div>
         </div>
         <div class="column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter" id="menu"
-            data-menu-target="menu">
+            data-menu-target="menu" data-controller="layer">
             <aside class="menu ml-4 mt-3">
                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
-                <p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
-                    <span class="icon pr-2">
+                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="siti">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="siti" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/siti_menu.png"/>
                     </span>
-                    Beni archeologici
-                    <span class="icon pl-2">
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
+                    <span data-action="click->menu#toggle" data-id="siti">
+                        Beni archeologici
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
+                        </span>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list"data-controller="marker">
+                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list" data-controller="marker">
                     <li>
                         <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub">
                             Anacapri
@@ -154,13 +159,19 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="non-conser">
-                    <span class="icon pr-2">
+                <p class="menu-label is-size-5 is-clickable" data-id="non-conser">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="non-conser"
+                        data-action="click->layer#toggle" style="max-height: 10px">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/non_cons_menu.png"/>
                     </span>
-                    Beni non conservati
-                    <span class="icon pl-2">
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
+                    <span data-action="click->menu#toggle" data-id="non-conser">
+                        Beni non conservati
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list" data-controller="marker">
@@ -270,13 +281,18 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="rinv">
-                    <span class="icon pr-2">
+                <p class="menu-label is-size-5 is-clickable" data-id="rinv">
+                     <span class="icon pl-1 mr-2 is-small" data-layer-target="rinv" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/rinv_menu.png"/>
                     </span>
-                    Rinvenimenti
-                    <span class="icon pl-2">
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
+                    <span data-action="click->menu#toggle" data-id="rinv">
+                        Rinvenimenti
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker">
@@ -345,13 +361,18 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="preist">
-                    <span class="icon pr-2">
+                <p class="menu-label is-size-5 is-clickable" data-id="preist">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="preist" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
                         <img class="image" src="img/icons/preistorici.png"/>
                     </span>
-                    Aree pre-protostoriche
-                    <span class="icon pl-2">
-                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
+                    <span data-action="click->menu#toggle" data-id="preist">
+                        Aree di affioramento
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
+                        </span>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="preist-list" data-menu-target="list" data-controller="marker">
diff --git a/webgis/js/controllers/layer_controller.js b/webgis/js/controllers/layer_controller.js
new file mode 100644
index 0000000..060bd83
--- /dev/null
+++ b/webgis/js/controllers/layer_controller.js
@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['sites', 'findings', 'notconserved', 'prehist',];
+
+    /**
+     * @param {Event} event 
+     */
+    toggle(event) {
+        let map = window.LMap;
+        let target = event.currentTarget;
+        const id = target.parentElement.getAttribute('data-id');
+        const layers = {
+            'siti': window.Sites,
+            'non-conser': window.NotConserved,
+            'rinv': window.Findings,
+            'preist': window.Prehistoric,
+        }
+
+        let group = layers[id];
+        this.toggleIcon(event.currentTarget);
+
+        if (map.hasLayer(group)) {
+            map.removeLayer(group);
+            target.title = "Mostra";
+        }
+        else {
+            map.addLayer(group);
+            target.title = "Nascondi";
+        }
+    }
+    /**
+     * Toggle visibility icon...
+     * @param {HTMLElement} target
+     */
+    toggleIcon(target) {
+        const icon = target.firstElementChild;
+        const className = icon.className;
+        icon.className = className.includes('slash') ?
+            className.replace('-slash', '') :
+            className.replace('eye', 'eye-slash');
+    }
+}
+
diff --git a/webgis/js/controllers/marker_controller.js b/webgis/js/controllers/marker_controller.js
index a5bca7d..eac46f7 100644
--- a/webgis/js/controllers/marker_controller.js
+++ b/webgis/js/controllers/marker_controller.js
@@ -9,6 +9,9 @@ export default class extends Controller {
         easeLinearity: 0.25
     };
 
+    /**
+     * @param {Event} event 
+     */
     go(event) {
         let map = window.LMap;
         const coords = event.currentTarget
@@ -44,4 +47,3 @@ export default class extends Controller {
         return marker;
     }
 }
-
diff --git a/webgis/js/gis.js b/webgis/js/gis.js
index b166a92..68136b0 100644
--- a/webgis/js/gis.js
+++ b/webgis/js/gis.js
@@ -138,11 +138,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let prehistoric = await this.prehistoric();
 
     const archeo = {
-        'Beni archeologici (punti)' : markersGroup,
-        'Beni archeologici (strutture)' : sitesGroup,
-        'Beni non conservati' : notConservedGroup,
-        'Rinvenimenti' : findingsGroup,
-        'Siti preistorici' : prehistoric,
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
     };
@@ -155,6 +150,11 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     findingsGroup.addTo(map);
     prehistoric.addTo(map);
 
+    window.Sites = markersGroup;
+    window.NotConserved = notConservedGroup;
+    window.Findings = findingsGroup;
+    window.Prehistoric = prehistoric;
+
     L.control.layers(baseMap, archeo).addTo(map);
 
     return map;
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 92504ca..1e81a81 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -6,6 +6,7 @@ import ModalController from './controllers/modal_controller.js';
 import MarkerController from './controllers/marker_controller.js';
 import BiblioController from './controllers/biblio_controller.js';
 import TabsController from './controllers/tabs_controller.js';
+import LayerController from './controllers/layer_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -32,4 +33,5 @@ function initStimulus() {
     Stimulus.register("marker", MarkerController);
     Stimulus.register("biblio", BiblioController);
     Stimulus.register("tabs", TabsController);
+    Stimulus.register("layer", LayerController);
 }
\ No newline at end of file