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

Compare commits

base: nicolo:29b53e0f9bad343f4b758ed52f9737e45484d4ed
Branches Tags
nicolo:master
nicolo:wms
..
compare: nicolo:f6883c3502dbdff4c3f2c260628a7372bf6cdc73
Branches Tags
nicolo:master
nicolo:wms

2 Commits
29b53e0f9b ... f6883c3502

Author SHA1 Message Date
Nicolò P
f6883c3502 Draft UI changes + remote DB API 2024-07-09 16:44:28 +02:00
Nicolò P
ff7f3d08ac Restructure DB data rendering 
TODO: use Web Components...
 2024-07-09 16:43:14 +02:00
9 changed files with 192 additions and 90 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,3 +8,4 @@
vendor/
docs/
progetto_QGIS/
conf.json

15
index.html
View File

@ -50,9 +50,22 @@
</p>
<ul class="menu-list">
<li>
<a class="button" title="Vai al sito Villa di Gradola" id="gradola">
<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 class="button" title="Vai al sito Grotta di Matermania" id="matermania">

43
js/components/SiteDocuments.js Normal file
View File

@ -0,0 +1,43 @@
/**
* Component to render data for site documents
* @class SiteDocuments
*/
export class SiteDocuments {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
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>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of this._siteData.documents.filter(d => d.tipo === 'documentazione')) {
content += `
<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>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of this._siteData.documents.filter(d => d.tipo === 'pubblicazione')) {
content += `
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
content += '</ol></div></details></div>';
return content;
}
}

32
js/components/SitePhotos.js Normal file
View File

@ -0,0 +1,32 @@
/**
* Component to render data for site photos
* @class SitePhotos
*/
export class SitePhotos {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
render() {
let content = `<div class="content has-text-centered">
<p class="is-size-5 mt-3">Fotografie</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
<img src="img/${this._siteData.filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
<figcaption class="p-2 has-text-centered">${this._siteData.didascalia}</figcaption>
</figure>
</div>
</div>
`;
return content;
}
}

43
js/components/SiteSheet.js Normal file
View File

@ -0,0 +1,43 @@
/**
* Component to render data for site sheet
* @class SiteSheet
*/
export class SiteSheet {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
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>
<tr><th>Indirizzo</th><td>${this._siteData.indirizzo}</td></tr>
<tr><th>Comune</th><td>${this._siteData.comune}</td></tr>
<tr><th>Localizzazione</th><td>${this._siteData.localizzazione}</td></tr>
<tr><th>Definizione</th><td>${this._siteData.definizione}</td></tr>
<tr><th>Periodo</th><td>${this._siteData.periodo}</td></tr>
<tr><th>Fase</th><td>${this._siteData.fase}</td></tr>
<tr><th>Cronologia</th><td>${this._siteData.cronologia}</td></tr>
<tr><th>Motivazione cronologia</th><td>${this._siteData.motivazione_cron}</td></tr>
<tr><th>Ritrovamento</th><td>${this._siteData.ritrovamento}</td></tr>
<tr><th>Materiali rinvenuti</th><td>${this._siteData.materiali_rinv}</td></tr>
<tr><th>Luogo custodia materiali</th><td>${this._siteData.luogo_custodia_mat}</td></tr>
<tr><th>Tutela vigente</th><td>${this._siteData.tutela_vigente}</td></tr>
<tr><th>Stato di conservazione</th><td>${this._siteData.stato_conserv}</td></tr>
<tr><th>Documenti</th><td>${this._siteData.documenti}</td></tr>
<tr><th>Descrizione</th>
<td><details><summary class="is-clickable">Leggi tutto</summary>${this._siteData.descrizione}</details></td>
</tr>
</table>
</details>
</div>`;
}
}

32
js/components/SiteSurveys.js Normal file
View File

@ -0,0 +1,32 @@
/**
* Component to render data for site surveys
* @class SiteSurveys
*/
export class SiteSurveys {
/**
* @param {object} data
*/
set siteData(data) {
this._siteData = data;
}
render() {
let content = `<div class="has-text-centered has-bottom-border">
<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
<img src="img/${this._siteData.filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
<figcaption class="p-2 has-text-centered">${this._siteData.didascalia}</figcaption>
</figure>
</div>
</div>
`;
return content;
}
}

4
js/gis.js
View File

@ -3,6 +3,8 @@
import UI from "./ui.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href;
const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
// Global leaflet
/**
@ -41,8 +43,6 @@ const optionsFabbricati = {
fillOpacity: 0.8
};
const BASE_URL = location.href;
const API_URL = 'http://localhost:3002/gis';
/**
* Capitalize a text string
* @todo Move to utils

5
js/index.js
View File

@ -9,4 +9,9 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.toggleMenu('siti');
UI.toggleBurger('navbar-burger');
UI.sitesMenu('.menu-list', map, sites);
// TEMP
document.querySelector('.dropdown-trigger').addEventListener('click', function() {
document.querySelector('.dropdown').classList.toggle('is-active');
});
});

107
js/ui.js
View File

@ -1,6 +1,10 @@
'use strict';
import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
import { SiteSheet } from './components/SiteSheet.js';
import { SiteDocuments } from './components/SiteDocuments.js';
import { SiteSurveys } from './components/SiteSurveys.js';
import { SitePhotos } from './components/SitePhotos.js';
/**
* @namespace UI
@ -74,100 +78,29 @@ UI.toggleMenu = function (triggerId) {
*/
UI.openModal = async function (data) {
const modal = document.querySelector('.modal');
// DEBUG
let content = `<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>${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>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
<tr><th>Documenti</th><td>${data.documenti}</td></tr>
<tr><th>Descrizione</th><td><details><summary class="is-clickable">Leggi tutto</summary>${data.descrizione}</details></td></tr>
</table>
</details>
</div>`;
if (data.documents.length) {
let publications = data.documents.filter(d => d.tipo === 'pubblicazione');
let docs = data.documents.filter(d => d.tipo === 'documentazione');
content += `<div class="has-bottom-border"><details>
<summary class="is-clickable has-text-centered p-2 is-size-5">
Documentazione di archivio
</summary>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of docs) {
content += `
<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>
<div class="p-2">
<ol class="ml-2 pl-4">
`;
for (const doc of publications) {
content += `
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
`;
}
content += '</ol></div></details></div>';
let siteSheet = new SiteSheet();
siteSheet.siteData = data;
modal.querySelector('.modal-content').innerHTML = siteSheet.render();
let content = ``;
if (data.documents.length) {
let siteDocs = new SiteDocuments;
siteDocs.siteData = data;
modal.querySelector('.modal-content').innerHTML += siteDocs.render();
}
if (data.surveys.length) {
content += `<div class="has-text-centered has-bottom-border">
<p class="is-size-5 mt-3">Elaborazioni CNR da rilievi</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
<img src="img/${data.surveys[0].filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
</figure>
</div>
</div>
`;
let siteSurveys = new SiteSurveys;
siteSurveys.siteData = data.surveys[0];
modal.querySelector('.modal-content').innerHTML += siteSurveys.render();
}
if (data.photos.length) {
content += `<div class="content has-text-centered">
<p class="is-size-5 mt-3">Fotografie</p>`;
content += `
<div style="max-width: 70%; margin: 0 auto">
<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
<img src="img/${data.photos[0].filename}" width="300"/>
<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
<i class="is-flex fa fa-2x fa-play-circle"></i>
</div>
<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
</figure>
</div>
</div>
`;
let sitePhotos = new SitePhotos;
sitePhotos.siteData = data.photos[0];
modal.querySelector('.modal-content').innerHTML += sitePhotos.render();
}
modal.querySelector('.modal-content').innerHTML = content;
modal.querySelector('.modal-content').innerHTML += content;
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');