From 452e28ac0e8267c0570e421c5ad023aa692e50a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Wed, 12 Jun 2024 12:39:22 +0200
Subject: [PATCH] Fetch data from DB and show in modal (draft)

---
 css/app.css    |  2 +-
 js/caprigis.js |  8 ++++++--
 js/ui.js       | 18 +++++++++++++++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/css/app.css b/css/app.css
index 04b7c15..6a0757c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -135,6 +135,6 @@ a:visited {
 }
 @media (min-width: 1280px) {
     .map-lg {
-        height: 820px;
+        height: 860px;
     }
 }
\ No newline at end of file
diff --git a/js/caprigis.js b/js/caprigis.js
index 1b5bf90..e6ca126 100644
--- a/js/caprigis.js
+++ b/js/caprigis.js
@@ -33,6 +33,7 @@ const optionsPaesistici = {
 };
 
 const BASE_URL = location.href;
+const API_URL = 'http://localhost:3002/gis';
 /**
  * Capitalize a text string
  * @todo Move to utils
@@ -193,8 +194,11 @@ GIS.featurePopup = function (layerName, feature) {
  * @param {string} recordId
  */
 GIS._fetchData = async function (recordId) {
-    //const data = await fetch()
-    return recordId;
+    const data = await fetch(`${API_URL}/${recordId}`)
+        .then(res => res.json())
+        .catch(err => console.log('Error fetching data from DB: ' + err));
+
+    return data;
 }
 
 export default GIS;
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
index 11699ad..4357672 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -77,7 +77,23 @@ UI.openModal = async function (data) {
 	const modal = document.querySelector('.modal');
 	// DEBUG
 	modal.querySelector('.modal-content').innerHTML = `
-		<p class="has-text-centered is-size-5">${data}</p>
+		<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>Descrizione</th><td>${data.descrizione}</td></tr>
+		</table>
 	`;
 	modal.classList.add('is-active');
 	const closeBtn = modal.querySelector('.modal-close');