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

Crude tabs...

Browse Source
This commit is contained in:
Nicolò P
2024-10-07 17:18:35 +02:00
parent 3ca23381fb
commit abd1e6774d
6 changed files with 89 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/components/SiteDocuments.js
View File

@@ -11,10 +11,8 @@ export class SiteDocuments {
}
render() {
let content = `<div class="has-bottom-border"><details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Documentazione di archivio
</summary>
let content = `<div class="has-bottom-border">
<h3 class="p-2">Documentazione di archivio</h3>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
@@ -23,11 +21,9 @@ export class SiteDocuments {
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
content += '</ol></div></details></div>';
content += `<div class="has-bottom-border"><details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Pubblicazioni del progetto Carta Archeologica
</summary>
content += '</ol></div></div>';
content += `<div class="has-bottom-border">
<h3 class="p-2">Pubblicazioni del progetto Carta Archeologica</h3>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
@@ -36,7 +32,7 @@ export class SiteDocuments {
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
content += '</ol></div></details></div>';
content += '</ol></div></div>';
return content;
}

5
js/components/SiteSheet.js
View File

@@ -12,10 +12,6 @@ export class SiteSheet {
render() {
return `<div class="container has-bottom-border">
<details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Scheda del sito
</summary>
<table class="table is-fullwidth is-striped">
<tr><th>Denominazione</th><td>${this._siteData.denominazione}</td></tr>
<tr><th>Località</th><td>${this._siteData.localita}</td></tr>
@@ -37,7 +33,6 @@ export class SiteSheet {
<td><details><summary class="is-clickable">Leggi tutto</summary>${this._siteData.descrizione}</details></td>
</tr>
</table>
</details>
</div>`;
}
}

34
js/gis.js
View File

@@ -281,18 +281,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
}
else {
layer.on("click", async () => {
const fromStorage = localStorage.getItem(layerId);
let data = {};
if (fromStorage !== 'undefined') {
try {
data = JSON.parse(fromStorage);
} catch (error) {
console.log(error);
}
} else {
await GIS._fetchData(layerId);
}
let data = GIS.layerData(layerId);
if (typeof data === 'object') {
UI.openModal(data);
@@ -304,6 +293,27 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
return layer;
}
/**
* Retrieves data for a given layer
* @param {string} layerId
* @returns {object} Data for this layer from DB or cache
*/
GIS.layerData = async function (layerId) {
const fromStorage = localStorage.getItem(layerId);
let data = {};
if (fromStorage !== 'undefined') {
try {
data = JSON.parse(fromStorage);
} catch (error) {
console.log(error);
}
} else {
data = await GIS._fetchData(layerId);
}
return data;
}
/**
* Cache data from DB in local storage
* for a given layer

4
js/index.js
View File

@@ -11,8 +11,4 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.sitesMenu('.menu-list', map, sites);
UI.projectInfo('#project-info');
// TEMP
document.querySelector('.dropdown-trigger').addEventListener('click', function() {
document.querySelector('.dropdown').classList.toggle('is-active');
});
});

36
js/ui.js
View File

@@ -73,35 +73,57 @@ UI.toggleMenu = function (triggerId) {
}
/**
* Open a modal with DB data
* @todo Refactor! Web components??
* @todo Refactor!!! Web components??
* @param {object} data The data retrieved from the DB to display as modal content
* @param {string} selector The modal selector
*/
UI.openModal = async function (data, selector) {
const modal = document.querySelector(selector);
const tabs = modal.querySelector('.tabs > ul');
let siteSheet = new SiteSheet();
siteSheet.siteData = data;
modal.querySelector('.modal-content').innerHTML = siteSheet.render();
modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
let content = ``;
if (data.documents.length) {
let siteDocs = new SiteDocuments;
siteDocs.siteData = data;
modal.querySelector('.modal-content').innerHTML += siteDocs.render();
modal.querySelector('#documents').innerHTML = siteDocs.render();
}
if (data.surveys.length) {
let siteSurveys = new SiteSurveys;
siteSurveys.siteData = data.surveys[0];
modal.querySelector('.modal-content').innerHTML += siteSurveys.render();
modal.querySelector('#photos').innerHTML += siteSurveys.render();
}
if (data.photos.length) {
let sitePhotos = new SitePhotos;
sitePhotos.siteData = data.photos[0];
modal.querySelector('.modal-content').innerHTML += sitePhotos.render();
modal.querySelector('#photos').innerHTML += sitePhotos.render();
}
modal.querySelector('.modal-content').innerHTML += content;
let dataTabs = modal.querySelectorAll('.data-tabs');
// TODO Awful!!!
tabs.childNodes.forEach(node => {
if (node.nodeName === 'LI') {
node.addEventListener('click', () => {
node.classList.add('is-active');
for (let el of tabs.childNodes) {
if (el.nodeName === 'LI' && el !== node) {
el.classList.remove('is-active');
}
}
for (let tab of dataTabs) {
tab.classList.add('is-hidden');
if (tab.id == node.id.replace('for-','')) {
tab.classList.remove('is-hidden');
}
}
});
}
});
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');