More refactoring components (minus Site)

webgis/js/components/Finding.js

@@ -65,7 +65,7 @@ export class Finding {
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
+        let {citations, biblioElements} = await Utils.buildBibliography('finding', recordId);
         this.biblioElements = biblioElements;
 
         return citations;

webgis/js/components/NotConserved.js

@@ -56,7 +56,7 @@ export class NotConserved {
      * @param {Function} gallery
      */
     setImages(imageContainer, gallery) {
-        if (this._data.images.length) {
+        if (this._data.images?.length) {
             imageContainer.innerHTML = Utils.renderImages('not-conserved-gallery', this._data.images);
             gallery('not-conserved-gallery', this._data.images);
         } else

webgis/js/components/Prehistoric.js

@@ -1,4 +1,4 @@
-import { GisState } from "../state.js";
+import Utils from "./utils.js";
 /**
  * @class Prehistoric
  */
@@ -47,7 +47,6 @@ export class Prehistoric {
         </div>`;
 
         /*
-
             <p class="mt-4 pl-2 pr-5">
                 <span class="icon has-text-link">
                     <i class="fa fa-book"></i>
@@ -58,32 +57,14 @@ export class Prehistoric {
         */
     }
 
-    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="prehist-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) {
-        if (this._data.images.length) {
+        if (this._data.images?.length) {
-            this.images = this._data.images;
+            imageContainer.innerHTML = Utils.renderImages('prehist-gallery', this._data.images);
-            imageContainer.innerHTML = this.renderImages();
+            gallery('prehist-gallery', this._data.images);
-            gallery('prehist-gallery', this.images);
         } else
             imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
     }
@@ -91,29 +72,10 @@ export class Prehistoric {
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
+        let {citations, biblioElements} = await Utils.buildBibliography('prehistoric', recordId);
+        this.biblioElements = biblioElements;
 
-        let citations = '';
+        return citations;
-
-        if (finding.bibliography.length) {
-            finding.bibliography.forEach(record => {
-                citations += `
-                    <span class="is-clickable has-text-link"
-                        data-action="click->biblio#open"
-                        id="cit-${record.id}">
-                        ${record.citation}</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) {
@@ -122,8 +84,4 @@ export class Prehistoric {
             return ref.match(regex);
         });
     }
-
-    async fetchData(url) {
-        return await fetch(url).then(res => res.json());
-    }
 }

webgis/js/components/Reuse.js

@@ -1,4 +1,4 @@
-import { GisState } from "../state.js";
+import Utils from "./utils.js";
 /**
  * @class Reuse
  */
@@ -50,64 +50,25 @@ export class Reuse {
             </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="reuse-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(`${GisState.apiUrl}/reuse/${this._data.id}`)
+        if (this._data.images?.length) {
-
+            imageContainer.innerHTML = Utils.renderImages('reuse-gallery', this._data.images);
-        if (record.images.length) {
+            gallery('reuse-gallery', this._data.images);
-            this.images = record.images;
+        } else
-            imageContainer.innerHTML = this.renderImages();
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
-            gallery('reuse-gallery', this.images);
-        }
     }
     /**
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${GisState.apiUrl}/reuse/${recordId}`);
+        let {citations, biblioElements} = await Utils.buildBibliography('reuse', recordId);
+        this.biblioElements = biblioElements;
 
-        let citations = '';
+        return citations;
-
-        if (finding.bibliography.length) {
-            finding.bibliography.forEach(record => {
-                citations += `
-                    <span class="is-clickable has-text-link"
-                        data-action="click->biblio#open"
-                        id="cit-${record.id}">
-                        ${record.citation}</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) {
@@ -116,9 +77,5 @@ export class Reuse {
             return ref.match(regex);
         });
     }
-
-    async fetchData(url) {
-        return await fetch(url).then(res => res.json());
-    }
 }
 

webgis/js/components/utils.js

@@ -17,7 +17,7 @@ Utils.renderImages = function (galleryId, imagesData) {
     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">
+            <figure class="is-relative is-clickable has-text-centered" id="${galleryId}">
                 <img src="img/${imagesData[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>