Draft UI changes + remote DB API

TODO: use Web Components...

.gitignore

@@ -8,3 +8,4 @@
 vendor/
 docs/
 progetto_QGIS/
+conf.json

index.html

@@ -50,9 +50,22 @@
                 </p>
                 <ul class="menu-list">
                     <li>
-                        <a class="button" title="Vai al sito Villa di Gradola" id="gradola">
+                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
                             Villa di Gradola
+                            <span class="dropdown-trigger icon is-small">
+                                <i class="fas fa-angle-down ml-2" aria-hidden="true"></i>
+                            </span>
                         </a>
+                            <div class="dropdown ml-2">
+                                <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                                  <div class="dropdown-content">
+                                    <a class="dropdown-item" data-sheet="gradola">Scheda del sito</a>
+                                    <a class="dropdown-item" data-docs="gradola">Documentazione</a>
+                                    <a class="dropdown-item" data-surveys="gradola">Elaborazioni CNR</a>
+                                    <a class="dropdown-item" data-photos="gradola">Fotografie</a>
+                                  </div>
+                                </div>
+                            </div>
                         <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
                             Villa di Damecuta
                         <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">

js/components/SiteDocuments.js

@@ -0,0 +1,43 @@
+/**
+ * Component to render data for site documents
+ * @class SiteDocuments
+ */
+export class SiteDocuments {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    render() {
+        let content = `<div class="has-bottom-border"><details>
+            <summary class="is-clickable has-text-centered p-2 is-size-5">
+                Documentazione di archivio
+            </summary>
+            <div class="p-2">
+            <ol class="ml-2 pl-4">
+            `;
+		for (const doc of this._siteData.documents.filter(d => d.tipo === 'documentazione')) {
+			content += `
+				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
+			`;
+		}
+		content += '</ol></div></details></div>';
+		content += `<div class="has-bottom-border"><details>
+            <summary class="is-clickable has-text-centered p-2 is-size-5">
+                Pubblicazioni del progetto Carta Archeologica
+            </summary>
+            <div class="p-2">
+            <ol class="ml-2 pl-4">
+        `;
+		for (const doc of this._siteData.documents.filter(d => d.tipo === 'pubblicazione')) {
+			content += `
+				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
+			`;
+		}
+		content += '</ol></div></details></div>';
+
+        return content;
+    }
+}

js/components/SitePhotos.js

@@ -0,0 +1,32 @@
+/**
+ * Component to render data for site photos
+ * @class SitePhotos
+ */
+export class SitePhotos {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    render() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Fotografie</p>`;
+		content += `
+			<div style="max-width: 70%; margin: 0 auto">
+				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
+				<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
+					<img src="img/${this._siteData.filename}" width="300"/>
+					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+						<i class="is-flex fa fa-2x fa-play-circle"></i>
+					</div>
+					<figcaption class="p-2 has-text-centered">${this._siteData.didascalia}</figcaption>
+				</figure>
+			</div>
+		</div>
+		`;
+
+        return content;
+    }
+}

js/components/SiteSheet.js

@@ -0,0 +1,43 @@
+/**
+ * Component to render data for site sheet
+ * @class SiteSheet
+ */
+export class SiteSheet {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    render() {
+        return `<div class="container has-bottom-border">
+            <details>
+            <summary class="is-clickable has-text-centered p-2 is-size-5">
+                Scheda del sito
+            </summary>
+            <table class="table is-fullwidth is-striped">
+                <tr><th>Denominazione</th><td>${this._siteData.denominazione}</td></tr>
+                <tr><th>Località</th><td>${this._siteData.localita}</td></tr>
+                <tr><th>Indirizzo</th><td>${this._siteData.indirizzo}</td></tr>
+                <tr><th>Comune</th><td>${this._siteData.comune}</td></tr>
+                <tr><th>Localizzazione</th><td>${this._siteData.localizzazione}</td></tr>
+                <tr><th>Definizione</th><td>${this._siteData.definizione}</td></tr>
+                <tr><th>Periodo</th><td>${this._siteData.periodo}</td></tr>
+                <tr><th>Fase</th><td>${this._siteData.fase}</td></tr>
+                <tr><th>Cronologia</th><td>${this._siteData.cronologia}</td></tr>
+                <tr><th>Motivazione cronologia</th><td>${this._siteData.motivazione_cron}</td></tr>
+                <tr><th>Ritrovamento</th><td>${this._siteData.ritrovamento}</td></tr>
+                <tr><th>Materiali rinvenuti</th><td>${this._siteData.materiali_rinv}</td></tr>
+                <tr><th>Luogo custodia materiali</th><td>${this._siteData.luogo_custodia_mat}</td></tr>
+                <tr><th>Tutela vigente</th><td>${this._siteData.tutela_vigente}</td></tr>
+                <tr><th>Stato di conservazione</th><td>${this._siteData.stato_conserv}</td></tr>
+                <tr><th>Documenti</th><td>${this._siteData.documenti}</td></tr>
+                <tr><th>Descrizione</th>
+                    <td><details><summary class="is-clickable">Leggi tutto</summary>${this._siteData.descrizione}</details></td>
+                </tr>
+            </table>
+            </details>
+        </div>`;
+    }
+}

js/components/SiteSurveys.js

@@ -0,0 +1,32 @@
+/**
+ * Component to render data for site surveys
+ * @class SiteSurveys
+ */
+export class SiteSurveys {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    render() {
+		let content = `<div class="has-text-centered has-bottom-border">
+			<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
+		content += `
+			<div style="max-width: 70%; margin: 0 auto">
+				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
+				<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
+					<img src="img/${this._siteData.filename}" width="300"/>
+					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+						<i class="is-flex fa fa-2x fa-play-circle"></i>
+					</div>
+					<figcaption class="p-2 has-text-centered">${this._siteData.didascalia}</figcaption>
+				</figure>
+			</div>
+		</div>
+		`;
+
+        return content;
+    }
+}

js/gis.js

@@ -3,6 +3,8 @@
 import UI from "./ui.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
+const BASE_URL = location.href;
+const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
 
 // Global leaflet
 /**
@@ -41,8 +43,6 @@ const optionsFabbricati = {
     fillOpacity: 0.8
 };
 
-const BASE_URL = location.href;
-const API_URL = 'http://localhost:3002/gis';
 /**
  * Capitalize a text string
  * @todo Move to utils

js/index.js

@@ -9,4 +9,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
+
+    // TEMP
+    document.querySelector('.dropdown-trigger').addEventListener('click', function() {
+        document.querySelector('.dropdown').classList.toggle('is-active');
+    });
 });

js/ui.js

@@ -1,6 +1,10 @@
 'use strict';
 
 import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
+import { SiteSheet } from './components/SiteSheet.js';
+import { SiteDocuments } from './components/SiteDocuments.js';
+import { SiteSurveys } from './components/SiteSurveys.js';
+import { SitePhotos } from './components/SitePhotos.js';
 
 /**
  * @namespace UI
@@ -74,100 +78,29 @@ UI.toggleMenu = function (triggerId) {
  */
 UI.openModal = async function (data) {
 	const modal = document.querySelector('.modal');
-	// DEBUG
-	let content = `<div class="container has-bottom-border">
-		<details>
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
-			Scheda del sito
-		</summary>
-		<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>
-			<tr><th>Comune</th><td>${data.comune}</td></tr>
-			<tr><th>Localizzazione</th><td>${data.localizzazione}</td></tr>
-			<tr><th>Definizione</th><td>${data.definizione}</td></tr>
-			<tr><th>Periodo</th><td>${data.periodo}</td></tr>
-			<tr><th>Fase</th><td>${data.fase}</td></tr>
-			<tr><th>Cronologia</th><td>${data.cronologia}</td></tr>
-			<tr><th>Motivazione cronologia</th><td>${data.motivazione_cron}</td></tr>
-			<tr><th>Ritrovamento</th><td>${data.ritrovamento}</td></tr>
-			<tr><th>Materiali rinvenuti</th><td>${data.materiali_rinv}</td></tr>
-			<tr><th>Luogo custodia materiali</th><td>${data.luogo_custodia_mat}</td></tr>
-			<tr><th>Tutela vigente</th><td>${data.tutela_vigente}</td></tr>
-			<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><details><summary class="is-clickable">Leggi tutto</summary>${data.descrizione}</details></td></tr>
-		</table>
-		</details>
-	</div>`;
-	if (data.documents.length) {
-		let publications = data.documents.filter(d => d.tipo === 'pubblicazione');
-		let docs = data.documents.filter(d => d.tipo === 'documentazione');
 
-		content += `<div class="has-bottom-border"><details>
+	let siteSheet = new SiteSheet();
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
+	siteSheet.siteData = data;
-			Documentazione di archivio
+	modal.querySelector('.modal-content').innerHTML = siteSheet.render();
-		</summary>
+
-		<div class="p-2">
+	let content = ``;
-		<ol class="ml-2 pl-4">
+	if (data.documents.length) {
-		`;
+		let siteDocs = new SiteDocuments;
-		for (const doc of docs) {
+		siteDocs.siteData = data;
-			content += `
+		modal.querySelector('.modal-content').innerHTML += siteDocs.render();
-				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
-			`;
-		}
-		content += '</ol></div></details></div>';
-		content += `<div class="has-bottom-border"><details>
-		<summary class="is-clickable has-text-centered p-2 is-size-5">
-			Pubblicazioni del progetto Carta Archeologica
-		</summary>
-		<div class="p-2">
-		<ol class="ml-2 pl-4">
-		`;
-		for (const doc of publications) {
-			content += `
-				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
-			`;
-		}
-		content += '</ol></div></details></div>';
 	}
 	if (data.surveys.length) {
-		content += `<div class="has-text-centered has-bottom-border">
+		let siteSurveys = new SiteSurveys;
-			<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
+		siteSurveys.siteData = data.surveys[0];
-		content += `
+		modal.querySelector('.modal-content').innerHTML += siteSurveys.render();
-			<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
-					<img src="img/${data.surveys[0].filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
-					<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
-				</figure>
-			</div>
-		</div>
-		`;
 	}
 	if (data.photos.length) {
-		content += `<div class="content has-text-centered">
+		let sitePhotos = new SitePhotos;
-			<p class="is-size-5 mt-3">Fotografie</p>`;
+		sitePhotos.siteData = data.photos[0];
-		content += `
+		modal.querySelector('.modal-content').innerHTML += sitePhotos.render();
-			<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
-					<img src="img/${data.photos[0].filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
-					<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
-				</figure>
-			</div>
-		</div>
-		`;
 	}
 
-	modal.querySelector('.modal-content').innerHTML = content;
+	modal.querySelector('.modal-content').innerHTML += content;
 	modal.classList.add('is-active');
 	const closeBtn = modal.querySelector('.modal-close');
 	const modalBg = modal.querySelector('.modal-background');