Images for not conserved

2025-04-28 12:36:09 +02:00
parent 334cab6e4f
commit 0ca98e2b6d
3 changed files with 63 additions and 10 deletions
--- a/webgis/js/components/NotConserved.js
+++ b/webgis/js/components/NotConserved.js
@@ -0,0 +1,120 @@
+/**
+ * Component to render data for not conserved assets
+ * @class NotConserved
+ */
+export class NotConserved {
+    biblioElements = [];
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._data = data;
+    }
+
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-tag"></i>
+                </span>
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-hourglass"></i>
+                </span>
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <span class="icon has-text-link">
+                    <i class="fa fa-map"></i>
+                </span>
+                <strong>Località generica:</strong> ${this._data.genericLocation}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${this._data.shortDescription}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </span>
+                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
+            </p>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    renderImages() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Immagini</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="not-conserved-gallery">
+					<img src="img/${this.images[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>
+				</figure>
+			</div>
+		</div>`;
+
+        return content;
+    }
+    /**
+     * @param {HTMLElement} imageContainer
+     * @param {Function} gallery
+     */
+    async setImages(imageContainer, gallery) {
+        let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
+
+        if (record.images.length) {
+            this.images = record.images;
+            imageContainer.innerHTML = this.renderImages();
+            gallery('not-conserved-gallery', this.images);
+        }
+    }
+
+    async biblio(recordId) {
+        let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
+
+        let citations = '';
+
+        if (record.bibliography.length) {
+            record.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable is-capitalized has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation.toLowerCase().trim()}</span>`;
+
+                citations += record.pages?.length ? `, ${record.pages};` : ';';
+                
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p class="p-3">${record.reference}</p>
+                    </div>
+                    `
+                );
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}