Findings (WIP) + change some UI behaviour

webgis/js/ui.js

@@ -7,6 +7,7 @@ import { SiteSurveys } from './components/SiteSurveys.js';
 import { SitePhotos } from './components/SitePhotos.js';
 import { NotConservedSheet } from './components/NotConservedSheet.js';
 import GIS from './gis.js';
+import { Finding } from './components/Finding.js';
 
 /**
  * @namespace UI
@@ -194,6 +195,24 @@ UI.openNotConserModal = async function (data, selector) {
 	modalBg.addEventListener('click', () => closeModal());
 
 }
+/**
+ * @param {object} data The data retrieved from the DB to display as modal content
+ * @param {string} selector The modal selector
+ */
+UI.openFindingModal = async function (data, selector) {
+	const modal = document.querySelector(selector);
+
+	let sheet = new Finding();
+	sheet.data = data;
+	modal.querySelector('#finding-sheet').innerHTML = await 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());
+}
 /**
  * @param {string} menuListSel Menu list selector
  * @param {L.Map} map
@@ -202,23 +221,29 @@ UI.openNotConserModal = async function (data, selector) {
 UI.sitesMenu = function (menuListSel, map, sites) {
 	// Close menu if arrow button is clicked...
 	this.toggleMenu('close-menu');
+	let markers = [];
+
+	map.eachLayer(layer => {
+		if (layer instanceof L.Marker) {
+			markers.push(layer);
+		}
+	})
 
 	const menu = document.querySelector(menuListSel);
 	menu.addEventListener('click', async event => {
 		if (event.target.nodeName === 'A') {
 			const layerId = event.target.id;
+			const marker = markers.filter(m => m.id === layerId)[0];
+
 			// zoom to layer...
 			const layer = sites.customGetLayer(layerId);
-			const data = await GIS.layerData(layerId);
 			map.setView(
 				layer.getBounds().getCenter(),
 				19,
 				{animate: true, duration: 1, easeLinearity: 0.25}
 			);
-			setTimeout(
-				() => this.openSiteModal(data, '#site-data'),
-				1200
-			);
+
+			marker.openTooltip();
 		}
 	});
 }