From ff7f3d08ac15757dc00031452875e9c6ed295a09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Tue, 9 Jul 2024 16:43:14 +0200 Subject: [PATCH] Restructure DB data rendering TODO: use Web Components... --- .gitignore | 1 + js/components/SiteDocuments.js | 43 +++++++++++++ js/components/SitePhotos.js | 32 ++++++++++ js/components/SiteSheet.js | 43 +++++++++++++ js/components/SiteSurveys.js | 32 ++++++++++ js/ui.js | 107 ++++++--------------------------- 6 files changed, 171 insertions(+), 87 deletions(-) create mode 100644 js/components/SiteDocuments.js create mode 100644 js/components/SitePhotos.js create mode 100644 js/components/SiteSheet.js create mode 100644 js/components/SiteSurveys.js diff --git a/.gitignore b/.gitignore index dea7f32..f849f48 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ vendor/ docs/ progetto_QGIS/ +conf.json diff --git a/js/components/SiteDocuments.js b/js/components/SiteDocuments.js new file mode 100644 index 0000000..b3ea47d --- /dev/null +++ b/js/components/SiteDocuments.js @@ -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 = `
+ + Documentazione di archivio + +
+
    + `; + for (const doc of this._siteData.documents.filter(d => d.tipo === 'documentazione')) { + content += ` +
  1. ${doc.titolo}
    2. + `; + } + content += '
'; + content += `
+ + Pubblicazioni del progetto Carta Archeologica + +
+
    + `; + for (const doc of this._siteData.documents.filter(d => d.tipo === 'pubblicazione')) { + content += ` +
  1. ${doc.titolo}
    2. + `; + } + content += '
'; + + return content; + } +} \ No newline at end of file diff --git a/js/components/SitePhotos.js b/js/components/SitePhotos.js new file mode 100644 index 0000000..2f4408f --- /dev/null +++ b/js/components/SitePhotos.js @@ -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 = `
+

Fotografie

`; + content += ` +
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
${this._siteData.didascalia}
+
+
+
+ `; + + return content; + } +} diff --git a/js/components/SiteSheet.js b/js/components/SiteSheet.js new file mode 100644 index 0000000..7275591 --- /dev/null +++ b/js/components/SiteSheet.js @@ -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 `
+
+ + Scheda del sito + + + + + + + + + + + + + + + + + + + + + +
Denominazione${this._siteData.denominazione}
Località${this._siteData.localita}
Indirizzo${this._siteData.indirizzo}
Comune${this._siteData.comune}
Localizzazione${this._siteData.localizzazione}
Definizione${this._siteData.definizione}
Periodo${this._siteData.periodo}
Fase${this._siteData.fase}
Cronologia${this._siteData.cronologia}
Motivazione cronologia${this._siteData.motivazione_cron}
Ritrovamento${this._siteData.ritrovamento}
Materiali rinvenuti${this._siteData.materiali_rinv}
Luogo custodia materiali${this._siteData.luogo_custodia_mat}
Tutela vigente${this._siteData.tutela_vigente}
Stato di conservazione${this._siteData.stato_conserv}
Documenti${this._siteData.documenti}
Descrizione
Leggi tutto${this._siteData.descrizione}
+
+
`; + } +} \ No newline at end of file diff --git a/js/components/SiteSurveys.js b/js/components/SiteSurveys.js new file mode 100644 index 0000000..dadbf9e --- /dev/null +++ b/js/components/SiteSurveys.js @@ -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 = `
+

Elaborazioni CNR da rilievi

`; + content += ` +
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
${this._siteData.didascalia}
+
+
+
+ `; + + return content; + } +} \ No newline at end of file diff --git a/js/ui.js b/js/ui.js index c755aba..868ebc2 100644 --- a/js/ui.js +++ b/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 = `
-
- - Scheda del sito - - - - - - - - - - - - - - - - - - - -
Denominazione${data.denominazione}
Località${data.localita}
Indirizzo${data.indirizzo}
Comune${data.comune}
Localizzazione${data.localizzazione}
Definizione${data.definizione}
Periodo${data.periodo}
Fase${data.fase}
Cronologia${data.cronologia}
Motivazione cronologia${data.motivazione_cron}
Ritrovamento${data.ritrovamento}
Materiali rinvenuti${data.materiali_rinv}
Luogo custodia materiali${data.luogo_custodia_mat}
Tutela vigente${data.tutela_vigente}
Stato di conservazione${data.stato_conserv}
Documenti${data.documenti}
Descrizione
Leggi tutto${data.descrizione}
-
-
`; - if (data.documents.length) { - let publications = data.documents.filter(d => d.tipo === 'pubblicazione'); - let docs = data.documents.filter(d => d.tipo === 'documentazione'); - content += `
- - Documentazione di archivio - -
-
    - `; - for (const doc of docs) { - content += ` -
  1. ${doc.titolo}
    2. - `; - } - content += '
'; - content += `
- - Pubblicazioni del progetto Carta Archeologica - -
-
    - `; - for (const doc of publications) { - content += ` -
  1. ${doc.titolo}
    2. - `; - } - content += '
'; + 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 += `
-

Elaborazioni CNR da rilievi

`; - content += ` -
-

Cliccare sull'immagine per aprire la gallery

-
- -
- -
-
${data.surveys[0].didascalia}
-
-
-
- `; + let siteSurveys = new SiteSurveys; + siteSurveys.siteData = data.surveys[0]; + modal.querySelector('.modal-content').innerHTML += siteSurveys.render(); } if (data.photos.length) { - content += `
-

Fotografie

`; - content += ` -
-

Cliccare sull'immagine per aprire la gallery

-
- -
- -
-
${data.photos[0].didascalia}
-
-
-
- `; + 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');