Update index pages + add layers

webgis/js/components/NotConservedSheet.js

@@ -66,7 +66,6 @@ export class NotConservedSheet {
 
                 this.biblioElements.push(`
                     <div class="p-2" id="ref-${record.id}">
-                        <p><strong>Riferimento</strong></p>
                         <p>${record.reference}</p>
                     </div>
                     `
@@ -78,7 +77,10 @@ export class NotConservedSheet {
     }
 
     getReference(id) {
-        return this.biblioElements.find(ref => ref.includes(`ref-${id}`));
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
     }
 
     async fetchData(url) {

webgis/js/gis.js

@@ -37,6 +37,13 @@ const optionsSiti = {
     fillColor: '#800040',
     fillOpacity: 0.8
 };
+const optionsGrotta = {
+    color: '#205dac',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#205dac',
+    fillOpacity: 0.8
+}
 const optionsPaesistici = {
     color: '#222',
     opacity: 1,
@@ -61,6 +68,8 @@ const MARKER_NAMES = {
         'tiberio' : 'Bagni di Tiberio',
         'mura' : 'Mura greche',
         'san_michele' : 'Villa San Michele',
+        'scala_fenicia' : 'Scala Fenicia',
+        'grotta_azzurra' : 'Grotta Azzurra',
     },
 };
 
@@ -254,6 +263,8 @@ GIS.initLayers = async function(map) {
     let layerSanMichele = await this.loadLayer('san_michele.geojson', optionsSiti, false);
     let layerDamecuta = await this.loadLayer('damecuta.geojson', optionsSiti, false);
     let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
+    let layerScala = await this.loadLayer('scala_fenicia.geojson', optionsSiti, false);
+    let layerGrotta = await this.loadLayer('grotta_azzurra.geojson', optionsGrotta, false);
 
     layerMater.id = 'matermania';
     layerMaterArea.id = 'matermania_area';
@@ -265,6 +276,8 @@ GIS.initLayers = async function(map) {
     layerSanMichele.id = 'san_michele';
     layerDamecuta.id = 'damecuta';
     layerTiberio.id = 'tiberio';
+    layerScala.id = 'scala_fenicia';
+    layerGrotta.id = 'grotta_azzurra';
 
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxNativeZoom : 22,
@@ -294,6 +307,8 @@ GIS.initLayers = async function(map) {
         layerSanMichele,
         layerDamecuta,
         layerTiberio,
+        layerScala,
+        layerGrotta,
     ]);
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);

webgis/js/index.js

@@ -13,5 +13,4 @@ document.addEventListener('DOMContentLoaded', async () => {
     UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
-    UI.projectInfo('#project-info');
 });

webgis/js/ui.js

@@ -82,11 +82,21 @@ UI.toggleMenu = function (triggerId) {
 UI.openSiteModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
 	const tabs = modal.querySelector('.tabs > ul');
+	let dataTabs = modal.querySelectorAll('.data-tabs');
+	
+	// Reset data tabs content
+	for (let tab of dataTabs) {
+		tab.innerHTML = '';
+	}
+	//tabs.classList.remove('is-hidden');
 
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
+
 	modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
-	modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
+	if (data.description) {
+		modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
+	}
 
 	let images = modal.querySelector('#photos');
 
@@ -101,8 +111,8 @@ UI.openSiteModal = async function (data, selector) {
 
 	if (images.innerHTML.length === 0) {
 		let siteSurveys = new SiteSurveys;
-		siteSurveys.siteData = surveys.length !== 0 ? surveys[0] : undefined;
-		images.innerHTML += surveys ? siteSurveys.render() : '';
+		siteSurveys.siteData = surveys[0] ?? undefined;
+		images.innerHTML += surveys[0] ? siteSurveys.render() : '';
 
 		let sitePhotos = new SitePhotos;
 		sitePhotos.siteData = photos[0] ?? undefined;
@@ -110,7 +120,6 @@ UI.openSiteModal = async function (data, selector) {
 	}
 
 	// Move to Stimulus?
-	let dataTabs = modal.querySelectorAll('.data-tabs');
 	// TODO Awful!!!
 	tabs.childNodes.forEach(node => {
 		if (node.nodeName === 'LI') {
@@ -157,7 +166,12 @@ UI.openNotConserModal = async function (data, selector) {
 	modal.addEventListener('click', event => {
 		const biblio = document.querySelector('#biblio');
 		if (event.target.id.includes('cit')) {
+
+			// DEBUG
+			console.log(event.target.id);
+
 			const id = event.target.id.replace('cit-','');
+
 			biblio.innerHTML = '<button class="delete"></button>';
 			biblio.innerHTML += sheet.getReference(id);
 			biblio.classList.remove('is-hidden');
@@ -178,25 +192,6 @@ UI.openNotConserModal = async function (data, selector) {
 	modalBg.addEventListener('click', () => closeModal());
 
 }
-/**
- * Open a modal with project info
- * @param {string} selector The modal selector to open project info
- */
-UI.projectInfo = function (selector) {
-	const modal = document.querySelector(selector);
-
-	document.querySelector('#progetto').addEventListener('click', () => {
-		modal.classList.add('is-active');
-		const closeIcon = modal.querySelector('.delete');
-		const modalBg = modal.querySelector('.modal-background');
-		const closeBtn = modal.querySelector('.buttons > .button');
-		const closeModal = () => modal.classList.remove('is-active');
-		// Close modal when clicking either on the X button or on the background
-		closeBtn.addEventListener('click', () => closeModal());
-		closeIcon.addEventListener('click', () => closeModal());
-		modalBg.addEventListener('click', () => closeModal());
-	});
-}
 /**
  * @param {string} menuListSel Menu list selector
  * @param {L.Map} map