nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Fetch data from DB and show in modal (draft)

Browse Source
This commit is contained in:
Nicolò P 2024-06-12 12:39:22 +02:00
parent 72f90fff47
commit 452e28ac0e
3 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/app.css
View File

@ -135,6 +135,6 @@ a:visited {
}
@media (min-width: 1280px) {
.map-lg {
height: 820px;
height: 860px;
}
}

8
js/caprigis.js
View File

@ -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;

18
js/ui.js
View File

@ -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');