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

Add images + better cache handling...

Browse Source
This commit is contained in:
Nicolò P
2024-06-13 15:45:44 +02:00
parent 94b65f0312
commit 545562fbc6
12 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/caprigis.js
View File

@@ -92,7 +92,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let data = {};
let coords = layer.getBounds().getCenter();
if (fromStorage !== undefined) {
if (fromStorage !== 'undefined') {
try {
data = JSON.parse(fromStorage);
const lat = data?.lat ?? coords[0];
@@ -109,7 +109,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
.addTo(map)
.bindTooltip(Object.keys(archeo).find(k => archeo[k] === layer))
.openTooltip();
marker.on('click', () => UI.openModal(data));
if (typeof data === 'object') {
marker.on('click', () => UI.openModal(data));
}
});
// TODO Horrible?
@@ -184,10 +187,21 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
else {
layer.on("click", async () => {
const fromStorage = localStorage.getItem(layerId);
const data = fromStorage !== undefined ?
JSON.parse(fromStorage) :
let data = {};
if (fromStorage !== 'undefined') {
try {
data = JSON.parse(fromStorage);
} catch (error) {
console.log(error);
}
} else {
await GIS._fetchData(layerId);
UI.openModal(data);
}
if (typeof data === 'object') {
UI.openModal(data);
}
});
}
}

22
js/ui.js
View File

@@ -60,8 +60,7 @@ UI.toggleMenu = function (triggerId) {
UI.openModal = async function (data) {
const modal = document.querySelector('.modal');
// DEBUG
modal.querySelector('.modal-content').innerHTML = `
<table class="table is-fullwidth is-striped">
let table = `<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>
@@ -79,8 +78,25 @@ UI.openModal = async function (data) {
<tr><th>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
<tr><th>Documenti</th><td>${data.documenti}</td></tr>
<tr><th>Descrizione</th><td>${data.descrizione}</td></tr>
</table>
`;
if (data.images.length) {
table += `<tr><th class="has-text-centered" colspan="2">Immagini</th></tr>`;
for (const img of data.images) {
table += `
<tr>
<td colspan="2" style="max-width: 70%">
<figure class="image">
<img src="/img/${img.filename}" />
<figcaption class="p-2 has-text-centered">${img.didascalia}</figcaption>
</figure>
</td>
</tr>
`;
}
}
table += '</table>';
modal.querySelector('.modal-content').innerHTML = table;
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');