Add sheet for not conserved stuff

index.html

@@ -132,6 +132,14 @@
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>
+    <!-- Not conserved modal -->
+    <div class="modal" id="not-conser-data">
+        <div class="modal-background"></div>
+        <div class="modal-content has-background-white" style="min-height: 95vh;">
+            <div id="not-conser-sheet"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close"></button>
+    </div>
     <!-- Project info modal -->
     <div class="modal" id="project-info">
         <div class="modal-background"></div>

js/components/NotConservedSheet.js

@@ -0,0 +1,67 @@
+/**
+ * Component to render data for not conserved assets sheet
+ * @class NotConservedSheet
+ */
+export class NotConservedSheet {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._data = data;
+    }
+
+    render() {
+        return `
+        <div class="container ml-3">
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-tag"></i>
+                </span>
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-hourglass"></i>
+                </span>
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-map"></i>
+                </span>
+                <strong>Località generica:</strong> ${this._data.genericLocation}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${this._data.shortDescription}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${this.biblio(this._data.bibliography)}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-map"></i>
+                </span>
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    biblio(records) {
+        let biblio = '';
+
+        if (records.length) {
+            records.forEach(record => {
+                biblio += `
+                    <span class="is-capitalized">${record.citation.toLowerCase()}</span>,
+                    ${record.pages};
+                `;
+            });
+        }
+
+        return biblio.trim().slice(0, -1);
+    }
+}

js/components/SiteDocuments.js

@@ -13,7 +13,6 @@ export class SiteDocuments {
     render() {
         let content = `
             <div class="has-bottom-border">
-                <p class="p-2 has-text-centered">${this._siteData.documenti}</p>
                 <div class="p-2">
                     <table class="p-4 table is-fullwidth is-striped">
                         <thead>
@@ -22,9 +21,9 @@ export class SiteDocuments {
                         </thead>
                         <tbody>
             `;
-		for (const doc of this._siteData.documents.filter(d => d.tipo === 'documentazione')) {
+		for (const doc of this._siteData.documents.filter(d => d.type === 'documentazione')) {
 			content += `
-				<tr><td>${doc.titolo}</td><td>${doc.autori}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+				<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                     <i class="fa fa-download mr-2"></i> PDF
                 </a></td></tr>
 			`;
@@ -37,9 +36,9 @@ export class SiteDocuments {
                 </thead>
                 <tbody>
         `;
-		for (const doc of this._siteData.documents.filter(d => d.tipo === 'pubblicazione')) {
+		for (const doc of this._siteData.documents.filter(d => d.type === 'pubblicazione')) {
 			content += `
-				<tr><td>${doc.titolo}</td><td>${doc.autori}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
+				<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                     <i class="fa fa-download mr-2"></i> PDF
                 </a></td></tr>
 			`;

js/gis.js

@@ -4,8 +4,14 @@ 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';
+
-const API_URL = 'https://localhost:8001';
+let API_URL = '';
+if (BASE_URL.includes('localhost')) {
+    console.log(BASE_URL);
+    API_URL = `https://caprigis-api.ddev.site`;
+} else {
+    API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
+}
 
 // Global leaflet
 /**
@@ -25,7 +31,7 @@ const optionsVincoli = {
 const optionsSiti = {
     color: '#800040',
     opacity: 1,
-    weight: 2.5,
+    weight: 1.5,
     fillColor: '#800040',
     fillOpacity: 0.8
 };
@@ -136,6 +142,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
                 record.coordinates,
                 {icon: notConserIcon}
             ).bindTooltip(record.denomination)
+            .on(
+                'click',
+                () => UI.openNotConserModal(record, '#not-conser-data')
+            )
         );
     }
 
@@ -162,7 +172,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
             .bindTooltip(MARKER_NAMES.sites[id])
             .openTooltip();
         
-        marker.on('click', () => UI.openModal(data, '#site-data'));
+        marker.on('click', () => UI.openSiteModal(data, '#site-data'));
 
         sitesMarkers.push(marker);
     }
@@ -322,7 +332,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
                     let data = GIS.layerData(layerId);
                     
                     if (typeof data === 'object') {
-                        UI.openModal(data);
+                        UI.openSiteModal(data);
                     }
                 });
             }

js/ui.js

@@ -5,6 +5,7 @@ import { SiteSheet } from './components/SiteSheet.js';
 import { SiteDocuments } from './components/SiteDocuments.js';
 import { SiteSurveys } from './components/SiteSurveys.js';
 import { SitePhotos } from './components/SitePhotos.js';
+import { NotConservedSheet } from './components/NotConservedSheet.js';
 import GIS from './gis.js';
 
 /**
@@ -73,12 +74,12 @@ UI.toggleMenu = function (triggerId) {
 	});
 }
 /**
- * Open a modal with DB data
+ * Open a modal with DB site data
  * @todo Refactor!!! Web components??
  * @param {object} data The data retrieved from the DB to display as modal content
  * @param {string} selector The modal selector
  */
-UI.openModal = async function (data, selector) {
+UI.openSiteModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
 	const tabs = modal.querySelector('.tabs > ul');
 
@@ -108,6 +109,7 @@ UI.openModal = async function (data, selector) {
 		images.innerHTML += photos[0] ? sitePhotos.render() : '';
 	}
 
+	// Move to Stimulus?
 	let dataTabs = modal.querySelectorAll('.data-tabs');
 	// TODO Awful!!!
 	tabs.childNodes.forEach(node => {
@@ -142,6 +144,25 @@ UI.openModal = async function (data, selector) {
 	this.imageGallery('gallery-1', surveys);
 	this.imageGallery('gallery-2', photos);
 }
+/**
+ * @param {object} data The data retrieved from the DB to display as modal content
+ * @param {string} selector The modal selector
+ */
+UI.openNotConserModal = async function (data, selector) {
+	const modal = document.querySelector(selector);
+
+	let sheet = new NotConservedSheet();
+	sheet.siteData = data;
+	modal.querySelector('#not-conser-sheet').innerHTML = sheet.render();
+
+	modal.classList.add('is-active');
+	const closeBtn = modal.querySelector('.modal-close');
+	const modalBg = modal.querySelector('.modal-background');
+	const closeModal = () => modal.classList.remove('is-active');
+	// CLose modal when clicking either on the X button or on the background
+	closeBtn.addEventListener('click', () => closeModal());
+	modalBg.addEventListener('click', () => closeModal());
+}
 /**
  * Open a modal with project info
  * @param {string} selector The modal selector to open project info
@@ -177,7 +198,7 @@ UI.sitesMenu = function (menuListSel, map, sites) {
 			// zoom to layer...
 			const layer = sites.customGetLayer(layerId);
 			const data = await GIS.layerData(layerId);
-			this.openModal(data, '#site-data');
+			this.openSiteModal(data, '#site-data');
 			map.setView(
 				layer.getBounds().getCenter(),
 				19,