Add images + better cache handling...

css/app.css

@@ -107,10 +107,13 @@ a:visited {
 #fullscreen {
     padding: 2px;
 }
-/* Override Bulma z-index for modals (TODO: SASS??) */
+/* Override some Bulma rules for modals (TODO: SASS??) */
 .modal {
     z-index: 1000;
 }
+.modal-content {
+    width: 60vw;
+}
 /* Custom controls */
 .site-control {
     padding-top: 3px;
@@ -120,21 +123,21 @@ a:visited {
 /* Leaflef map container */
 @media (max-width: 840px) {
     .map-sm {
-        height: 650px;
+        height: 450px;
     }
 }
 @media (min-width: 840px) and (max-width: 960px) {
     .map-sm {
-        height: 700px;
+        height: 600px;
     }
 }
 @media (min-width: 960px) and (max-width: 1280px) {
     .map-lg {
-        height: 750px;
+        height: 700px;
     }
 }
 @media (min-width: 1280px) {
     .map-lg {
-        height: 860px;
+        height: 800px;
     }
 }

js/caprigis.js

@@ -92,7 +92,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
         let data = {};
         let coords = layer.getBounds().getCenter();
 
-        if (fromStorage !== undefined) {
+        if (fromStorage !== 'undefined') {
             try {
                 data = JSON.parse(fromStorage);
                 const lat = data?.lat ?? coords[0];
@@ -109,7 +109,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
             .addTo(map)
             .bindTooltip(Object.keys(archeo).find(k => archeo[k] === layer))
             .openTooltip();
+        
+        if (typeof data === 'object') {
             marker.on('click', () => UI.openModal(data));
+        }
     });
 
     // TODO Horrible?
@@ -184,10 +187,21 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
             else {
                 layer.on("click", async () => {
                     const fromStorage = localStorage.getItem(layerId);
-                    const data = fromStorage !== undefined ?
-                        JSON.parse(fromStorage) :
+                    let data = {};
+
+                    if (fromStorage !== 'undefined') {
+                        try {
+                            data = JSON.parse(fromStorage);
+                        } catch (error) {
+                            console.log(error);
+                        }
+                    } else {
                         await GIS._fetchData(layerId);
+                    }
+                    
+                    if (typeof data === 'object') {
                         UI.openModal(data);
+                    }
                 });
             }
         }

js/ui.js

@@ -60,8 +60,7 @@ UI.toggleMenu = function (triggerId) {
 UI.openModal = async function (data) {
 	const modal = document.querySelector('.modal');
 	// DEBUG
-	modal.querySelector('.modal-content').innerHTML = `
-		<table class="table is-fullwidth is-striped">
+	let table = `<table class="table is-fullwidth is-striped">
 			<tr><th>Denominazione</th><td>${data.denominazione}</td></tr>
 			<tr><th>Località</th><td>${data.localita}</td></tr>
 			<tr><th>Indirizzo</th><td>${data.indirizzo}</td></tr>
@@ -79,8 +78,25 @@ UI.openModal = async function (data) {
 			<tr><th>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
 			<tr><th>Documenti</th><td>${data.documenti}</td></tr>
 			<tr><th>Descrizione</th><td>${data.descrizione}</td></tr>
-		</table>
 	`;
+	if (data.images.length) {
+		table += `<tr><th class="has-text-centered" colspan="2">Immagini</th></tr>`;
+		for (const img of data.images) {
+			table += `
+				<tr>
+				<td colspan="2" style="max-width: 70%">
+					<figure class="image">
+						<img src="/img/${img.filename}" />
+						<figcaption class="p-2 has-text-centered">${img.didascalia}</figcaption>
+					</figure>
+				</td>
+				</tr>
+			`;
+		}
+	}
+	table += '</table>';
+
+	modal.querySelector('.modal-content').innerHTML = table;
 	modal.classList.add('is-active');
 	const closeBtn = modal.querySelector('.modal-close');
 	const modalBg = modal.querySelector('.modal-background');