.gitignore

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

index.html

@@ -50,22 +50,9 @@
                 </p>
                 <ul class="menu-list">
                     <li>
-                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
+                        <a class="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

@@ -1,43 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,43 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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,8 +3,6 @@
 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
 /**
@@ -43,6 +41,8 @@ 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,9 +9,4 @@ 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,10 +1,6 @@
 '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
@@ -78,29 +74,100 @@ UI.toggleMenu = function (triggerId) {
  */
 UI.openModal = async function (data) {
 	const modal = document.querySelector('.modal');
-
+	// DEBUG
-	let siteSheet = new SiteSheet();
+	let content = `<div class="container has-bottom-border">
-	siteSheet.siteData = data;
+		<details>
-	modal.querySelector('.modal-content').innerHTML = siteSheet.render();
+		<summary class="is-clickable has-text-centered p-2 is-size-5">
-
+			Scheda del sito
-	let content = ``;
+		</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 siteDocs = new SiteDocuments;
+		let publications = data.documents.filter(d => d.tipo === 'pubblicazione');
-		siteDocs.siteData = data;
+		let docs = data.documents.filter(d => d.tipo === 'documentazione');
-		modal.querySelector('.modal-content').innerHTML += siteDocs.render();
+
+		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 docs) {
+			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 publications) {
+			content += `
+				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
+			`;
+		}
+		content += '</ol></div></details></div>';
 	}
 	if (data.surveys.length) {
-		let siteSurveys = new SiteSurveys;
+		content += `<div class="has-text-centered has-bottom-border">
-		siteSurveys.siteData = data.surveys[0];
+			<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
-		modal.querySelector('.modal-content').innerHTML += siteSurveys.render();
+		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/${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) {
-		let sitePhotos = new SitePhotos;
+		content += `<div class="content has-text-centered">
-		sitePhotos.siteData = data.photos[0];
+			<p class="is-size-5 mt-3">Fotografie</p>`;
-		modal.querySelector('.modal-content').innerHTML += sitePhotos.render();
+		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/${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');