Restructure DB data rendering
TODO: use Web Components...
This commit is contained in:
parent
29b53e0f9b
commit
ff7f3d08ac
1
.gitignore
vendored
1
.gitignore
vendored
@ -8,3 +8,4 @@
|
||||
vendor/
|
||||
docs/
|
||||
progetto_QGIS/
|
||||
conf.json
|
||||
|
||||
43
js/components/SiteDocuments.js
Normal file
43
js/components/SiteDocuments.js
Normal 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
32
js/components/SitePhotos.js
Normal 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
43
js/components/SiteSheet.js
Normal 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
32
js/components/SiteSurveys.js
Normal 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;
|
||||
}
|
||||
}
|
||||
107
js/ui.js
107
js/ui.js
@ -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');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user