nicolo/caprigis
1
0
Fork 0
Code Issues 3 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -56,22 +56,10 @@
<li>
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
Villa di Gradola
<span class="dropdown-trigger icon is-small">
<i class="fas fa-angle-down ml-2" aria-hidden="true"></i>
</span>
</a>
<div class="dropdown ml-2">
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" data-sheet="gradola">Scheda del sito</a>
<a class="dropdown-item" data-docs="gradola">Documentazione</a>
<a class="dropdown-item" data-surveys="gradola">Elaborazioni CNR</a>
<a class="dropdown-item" data-photos="gradola">Fotografie</a>
</div>
</div>
</div>
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
Villa di Damecuta
</a>
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
Grotta di Matermania
</a>
@ -99,6 +87,37 @@
<div class="modal" id="site-data">
<div class="modal-background"></div>
<div class="modal-content has-background-white">
<div class="tabs is-centered">
<ul>
<li class="is-active" id="for-site-sheet">
<a>
<span class="icon is-small"
><i class="fas fa-info-circle" aria-hidden="true"></i
></span>
<span>Scheda descrittiva</span>
</a>
</li>
<li id="for-photos">
<a>
<span class="icon is-small"
><i class="fas fa-image" aria-hidden="true"></i
></span>
<span>Disegni e fotografie</span>
</a>
</li>
<li id="for-documents">
<a>
<span class="icon is-small"
><i class="far fa-file-alt" aria-hidden="true"></i
></span>
<span>Documenti</span>
</a>
</li>
</ul>
</div>
<div class="data-tabs" id="site-sheet"></div>
<div class="data-tabs is-hidden" id="photos"></div>
<div class="data-tabs is-hidden" id="documents"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>

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