From 7f4bd571f06ec2c510430c8135fb4cd1eb7d3510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Wed, 27 Nov 2024 13:50:48 +0100
Subject: [PATCH] Update menu

TODO: coords for sites
---
 webgis/index.html                          | 144 ++++++++++++++++-----
 webgis/js/controllers/marker_controller.js |  42 ++++++
 webgis/js/controllers/menu_controller.js   |  12 +-
 webgis/js/controllers/modal_controller.js  |   1 -
 webgis/js/index.js                         |   2 +
 5 files changed, 165 insertions(+), 36 deletions(-)
 create mode 100644 webgis/js/controllers/marker_controller.js

diff --git a/webgis/index.html b/webgis/index.html
index 86dfe00..d46a5f1 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -46,27 +46,13 @@
                 <span class="icon mr-2">
                     <i class="fa fa-list"></i>
                 </span>
-                Apri menu
+                Elenco beni
             </button>
             <button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
                 <span class="icon is-large has-text-link">
                     <i class="fas fa-question fa-lg"></i>
                 </span>
             </button>
-            <!--
-            <button class="navbar-item button is-size-5 is-white" role="button"
-                data-action="click->menu#toggleMenu" data-id="siti">
-                Beni archeologici
-            </button>
-            <button class="navbar-item button is-size-5 is-white" role="button"
-                data-action="click->menu#toggleMenu" data-id="non-conser">
-                Beni non conservati
-            </button>
-            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
-                data-action="click->menu#toggleMenu" data-id="rinv">
-                Rinvenimenti
-            </button>
-            -->
         </div>
     </nav>
     <div class="wait-lg text-center is-hidden" style="clear: both;">
@@ -89,8 +75,13 @@
                 </p>
                 <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
                     <li>
-                        Anacapri
-                        <ul id="siti-anacapri-sub">
+                        <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                        <ul id="siti-anacapri-sub" class="is-hidden">
                             <li>
                                 <a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
                                     Grotta Azzurra
@@ -123,9 +114,14 @@
                             </li>
                         </ul>
                     </li>
-                    <li>
-                        Capri
-                        <ul id="siti-capri-sub">
+                    <li class="mt-3">
+                        <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-capri-sub">
+                            Capri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                        <ul id="siti-capri-sub" class="is-hidden">
                             <li>
                                 <a class="button" id="tiberio">
                                     Bagni di Tiberio
@@ -158,30 +154,105 @@
                         <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list">
-                    <li>
-                        Anacapri
-                        <ul id="noncons-anacapri-sub">
+                <ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="noncons-anacapri-sub">
+                        <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="noncons-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2 is-small" data-list-id="noncons-anacapri-sub">
+                                <i class="fa fa-chevron-right"></i>
+                            </span>
+                        </span>
+                        <ul id="noncons-anacapri-sub" class="is-hidden">
                             <li>
-                                <a class="button" id="cala">
+                                <a class="button" data-action="click->marker#go" data-coords="40.5595565 14.2003896">
                                     Cala a mare - resti di ambienti
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="campetiello">
+                                <a class="button" data-action="click->marker#go" data-coords="40.549026 14.196911">
                                     Punta Campetiello - scala
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="castagnaro">
+                                <a class="button" data-action="click->marker#go" data-coords="40.5501214 14.2198544">
                                     Castagnaro - area funeraria
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="ceselle">
+                                <a class="button" data-action="click->marker#go" data-coords="40.55129683 14.21261142">
                                     Ceselle - necropoli
                                 </a>
                             </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5533744 14.2178754">
+                                    Località Piscina - complesso idraulico
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5546467 14.2092143">
+                                    La Cera - ambienti voltati
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5495555 14.2108741">
+                                    Cesa - complesso idraulico
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5575337 14.2027513">
+                                    La Fabbrica - resti murari
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5530655 14.201767">
+                                    Lupinaro - resti murari
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5399801 14.2092552">
+                                    Migliara Belvedere - frammenti erratici
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5451791 14.2233019">
+                                    Monte Solaro - vaso corinzio
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5523988 14.2087281">
+                                    Monticello - “Vaso di Monticello”
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5521975 14.2107296">
+                                    Monticello - “Villa di Monticello”
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5559514 14.2197966">
+                                    Pastena - strutture murarie
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.546923 14.2173871">
+                                    Petracquale - ruderi indeterminati
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.55666444 14.21446043">
+                                    Timberino - impianto idraulico
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.5590486 14.1984242">
+                                    Vetereto - ambienti voltati
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" data-action="click->marker#go" data-coords="40.556597 14.214518">
+                                    Veterino - complesso residenziale
+                                </a>
+                            </li>
                         </ul>
                     </li>
                 </ul>
@@ -194,17 +265,24 @@
                         <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list">
+                <ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker">
                     <li>
-                        Anacapri
-                        <ul id="rinv-anacapri-sub">
+                        <span class="is-clickable" data-action="click->menu#openSubList" data-list-id="rinv-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                        <ul id="rinv-anacapri-sub" class="is-hidden">
                             <li>
-                                <a class="button" id="affresco_dame">
+                                <a class="button" id="affresco_dame" data-marker-target="coords"
+                                    data-coords="40.55939119 14.20064002" data-action="click->marker#go">
                                     Affresco Villa di Damecuta
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="candelabro">
+                                <a class="button" id="candelabro" data-marker-target="coords"
+                                    data-coords="40.5565536 14.2133073" data-action="click->marker#go">
                                     Base di candelabro
                                 </a>
                             </li>
diff --git a/webgis/js/controllers/marker_controller.js b/webgis/js/controllers/marker_controller.js
new file mode 100644
index 0000000..4510c93
--- /dev/null
+++ b/webgis/js/controllers/marker_controller.js
@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['coords'];
+    mapAnimate = {
+        animate: true,
+        duration: 1,
+        easeLinearity: 0.25
+    };
+
+    go(event) {
+        let map = window.LMap;
+        const coords = event.currentTarget.getAttribute('data-coords').split(' ');
+
+        map.setView(
+            coords,
+            19,
+            this.mapAnimate
+        );
+
+        let marker = this.getMarker(map, coords);
+        marker.openTooltip();
+    }
+
+    getMarker(map, coords) {
+        let marker;
+        map.eachLayer(l => {
+            if (l instanceof L.Marker) {
+                const latLng = l.getLatLng();
+                const lat = latLng['lat'];
+                const lng = latLng['lng'];
+                if (lat === Number(coords[0]) && lng === Number(coords[1])) {
+                    marker = l;
+                    return;
+                }
+            }
+        });
+
+        return marker;
+    }
+}
+
diff --git a/webgis/js/controllers/menu_controller.js b/webgis/js/controllers/menu_controller.js
index d65885a..183e79d 100644
--- a/webgis/js/controllers/menu_controller.js
+++ b/webgis/js/controllers/menu_controller.js
@@ -19,8 +19,16 @@ export default class extends Controller {
         this.menuTarget.classList.add('is-hidden');
     }
 
-    openList(id) {
-        document.querySelector(id).classList.remove('is-hidden');
+    toggleList(id) {
+        document.querySelector(`#${id}`).classList.toggle('is-hidden');
+    }
+
+    openSubList(event) {
+        const target = event.currentTarget;
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-list-id');
+        this.toggleList(id);
+        this.toggleIcon(targetIcon);
     }
 
     toggle(event) {
diff --git a/webgis/js/controllers/modal_controller.js b/webgis/js/controllers/modal_controller.js
index 23917fc..c947ad9 100644
--- a/webgis/js/controllers/modal_controller.js
+++ b/webgis/js/controllers/modal_controller.js
@@ -11,4 +11,3 @@ export default class extends Controller {
         this.modalTarget.classList.remove('is-active');
     }
 }
-
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 406a218..5b07d79 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -3,6 +3,7 @@ import UI from './ui.js';
 import { Application } from '@hotwired/stimulus';
 import MenuController from './controllers/menu_controller.js';
 import ModalController from './controllers/modal_controller.js';
+import MarkerController from './controllers/marker_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -28,4 +29,5 @@ function initStimulus() {
     window.Stimulus = Application.start();
     Stimulus.register("menu", MenuController);
     Stimulus.register("modal", ModalController);
+    Stimulus.register("marker", MarkerController);
 }
\ No newline at end of file