From 77d42a2c27d8e0ed0a56041a3467fbf8e1cdda3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Mon, 1 Sep 2025 17:20:47 +0200 Subject: [PATCH] Refactor components (WIP) --- webgis/index.html | 36 ++++-- webgis/js/components/Finding.js | 61 ++------- webgis/js/components/NotConserved.js | 109 ++-------------- webgis/js/components/Underwater.js | 16 ++- webgis/js/components/utils.js | 152 +++++++++++++++++++++++ webgis/js/controllers/menu_controller.js | 3 - webgis/js/ui.js | 2 + 7 files changed, 214 insertions(+), 165 deletions(-) create mode 100644 webgis/js/components/utils.js diff --git a/webgis/index.html b/webgis/index.html index 37fef7a..f2f481d 100644 --- a/webgis/index.html +++ b/webgis/index.html @@ -462,12 +462,36 @@ - `; } - renderImages() { - let content = `
-

Immagini

`; - content += ` -
-

Cliccare sull'immagine per aprire la gallery

-
- -
- -
-
-
-
`; - - return content; - } /** * @param {HTMLElement} imageContainer * @param {Function} gallery */ - async setImages(imageContainer, gallery) { + setImages(imageContainer, gallery) { if (this._data.images.length) { - this.images = this._data.images; - imageContainer.innerHTML = this.renderImages(); - gallery('not-conserved-gallery', this.images); + imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images); + gallery('not-conserved-gallery', this._data.images); } else imageContainer.innerHTML = '

Nessuna risorsa visuale disponibile

'; } async renderDocs() { - let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`); - - this.documentation = record.documents.filter(d => d.type === 'documentazione') - this.publications = record.documents.filter(d => d.type === 'pubblicazione'); - - let content = ` -
-
- - - - - - - `; - - for (const doc of this.documentation) { - content += ` - - `; - } - if (this.publications.length) { - content += ` - - - - - - - `; - for (const doc of this.publications) { - content += ` - - `; - } - } - content += ` - -
Documentazione di archivio
TitoloLuogo di conservazioneDownload
${doc.title}${doc.conservationPlace} - PDF -
Pubblicazioni del progetto Carta Archeologica
TitoloAutoriDownload
${doc.title}${doc.authors} - PDF -
-
-
- `; - - if (!this.publications.length && !this.documentation.length) { - content = '

Nessun documento disponibile.

'; - } - - return content; + return await Utils.generateDocsTable(this._data, 'not_conserved'); } async biblio(recordId) { - let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`); + let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId); + this.biblioElements = biblioElements; - let citations = ''; - - if (record.bibliography.length) { - record.bibliography.forEach(record => { - citations += ` - - ${record.citation.trim()}`; - - citations += record.pages?.length ? `, ${record.pages};` : ';'; - - this.biblioElements.push(` -
-

${record.reference}

-
- ` - ); - }); - } - - return citations.trim().slice(0, -1); + return citations; } getReference(id) { @@ -169,8 +80,4 @@ export class NotConserved { return ref.match(regex); }); } - - async fetchData(url) { - return await fetch(url).then(res => res.json()); - } } diff --git a/webgis/js/components/Underwater.js b/webgis/js/components/Underwater.js index c6e0261..70983dd 100644 --- a/webgis/js/components/Underwater.js +++ b/webgis/js/components/Underwater.js @@ -1,3 +1,4 @@ +import Utils from "./utils.js"; /** * @class Underwater */ @@ -34,8 +35,19 @@ export class Underwater {

`; } + /** + * @param {HTMLElement} imageContainer + * @param {Function} gallery + */ + setImages(imageContainer, gallery) { + if (this._data.images?.length) { + imageContainer.innerHTML = Utils.renderImages('underwater-gallery', this._data.images); + gallery('underwater-gallery', this._data.images); + } else + imageContainer.innerHTML = '

Nessuna risorsa visuale disponibile

'; + } - async fetchData(url) { - return await fetch(url).then(res => res.json()); + async renderDocs() { + return await Utils.generateDocsTable(this._data, 'underwater'); } } diff --git a/webgis/js/components/utils.js b/webgis/js/components/utils.js new file mode 100644 index 0000000..fc940df --- /dev/null +++ b/webgis/js/components/utils.js @@ -0,0 +1,152 @@ +import { GisState } from "../state.js"; +/** + * @namespace Utils + */ +const Utils = {}; + + +/** + * + * @param {string} galleryId The image gallery's id + * @param {Object} imagesData + * @returns {string} + */ +Utils.renderImages = function (galleryId, imagesData) { + let content = `
+

Immagini

`; + content += ` +
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
+
+
`; + + return content; +} +/** + * @param {Object} imagesData + * @param {HTMLElement} imageContainer + * @param {Function} galleryGenerator The function that creates the image gallery + * @param {string} galleryId The image gallery's id + */ +Utils.setImages = function(imagesData, imageContainer, galleryGenerator, galleryId) { + imageContainer.innerHTML = Utils.renderImages(galleryId); + galleryGenerator(galleryId, imagesData); +} + +/** + * + * @param {Object} data The component's data + * @param {String} resourceUri The resource URI to be used for API calls + * @returns {String} The table HTML + */ +Utils.generateDocsTable = async function(data, resourceUri) { + let record = await Utils.fetchData(`${GisState.apiUrl}/${resourceUri}/${data.id}`); + + // TODO Horrible?? + if (record instanceof Error) return '

Nessun documento disponibile.

'; + + const documentation = record.documents.filter(d => d.type === 'documentazione') + const publications = record.documents.filter(d => d.type === 'pubblicazione'); + + let content = ` +
+
+ + + + + + + `; + + for (const doc of documentation) { + content += ` + + `; + } + if (publications.length) { + content += ` + + + + + + + `; + for (const doc of publications) { + content += ` + + `; + } + } + content += ` + +
Documentazione di archivio
TitoloLuogo di conservazioneDownload
${doc.title}${doc.conservationPlace} + PDF +
Pubblicazioni del progetto Carta Archeologica
TitoloAutoriDownload
${doc.title}${doc.authors} + PDF +
+
+
+ `; + + if (publications.length === 0 && documentation.length === 0) { + content = '

Nessun documento disponibile.

'; + } + + return content; +} + +/** + * + * @param {String} recordUri The record URI used for API calls + * @param {Number} recordId This record's ID + * @returns {{citations:String,biblioElements:String[]}} + */ +Utils.buildBibliography = async function(recordUri, recordId) { + let record = await Utils.fetchData(`${GisState.apiUrl}/${recordUri}/${recordId}`); + let biblioElements = []; + + let citations = ''; + + if (record.bibliography.length) { + record.bibliography.forEach(record => { + citations += ` + + ${record.citation.trim()} + + `; + + citations += record.pages?.length ? `, ${record.pages};` : ';'; + + biblioElements.push(` +
+

${record.reference}

+
+ ` + ); + }); + } + + const bibliography = { + citations: citations.trim().slice(0, -1), + biblioElements + } + + return bibliography; +} + +Utils.fetchData = async function(url) { + return await fetch(url).then(res => res.ok ? res.json() : new Error()) + .catch(err => console.log(err)); +} + +export default Utils; \ No newline at end of file diff --git a/webgis/js/controllers/menu_controller.js b/webgis/js/controllers/menu_controller.js index b47729b..6ab18f8 100644 --- a/webgis/js/controllers/menu_controller.js +++ b/webgis/js/controllers/menu_controller.js @@ -24,9 +24,6 @@ export default class extends Controller { let ul = this.renderMenuItems(group, municipality); document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`) ?.appendChild(ul); - - if (group === 'reuse' && municipality === 'Capri') console.log(ul); - } } } diff --git a/webgis/js/ui.js b/webgis/js/ui.js index 2bcd888..9478fc2 100644 --- a/webgis/js/ui.js +++ b/webgis/js/ui.js @@ -212,6 +212,8 @@ UI.openUnderwaterModal = function (data, selector) { // For Stimulus biblio_controller //GisState.bibliography = underwater; underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html); + underwater.renderDocs().then(html => modal.querySelector('#documents').innerHTML = html); + underwater.setImages(modal.querySelector('#photos'), this.imageGallery); modal.classList.add('is-active'); } /**