Refactor components (WIP)

webgis/js/components/Finding.js

@@ -1,4 +1,4 @@
-import { GisState } from "../state.js";
+import Utils from "./utils.js";
 /**
  * @class Finding
  */
@@ -50,64 +50,25 @@ export class Finding {
             </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="finding-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}/finding/${this._data.id}`)
-
-        if (record.images.length) {
-            this.images = record.images;
-            imageContainer.innerHTML = this.renderImages();
-            gallery('finding-gallery', this.images);
-        }
+        if (this._data.images?.length) {
+            imageContainer.innerHTML = Utils.renderImages('finding-gallery', this._data.images);
+            gallery('finding-gallery', this._data.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
     }
     /**
      * @param {number} recordId 
      */
     async biblio(recordId) {
-        let finding = await this.fetchData(`${GisState.apiUrl}/finding/${recordId}`);
+        let {citations, biblioElements} = await Utils.buildBibliography('not_conserved', recordId);
+        this.biblioElements = biblioElements;
 
-        let 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);
+        return citations;
     }
 
     getReference(id) {
@@ -116,8 +77,4 @@ export class Finding {
             return ref.match(regex);
         });
     }
-
-    async fetchData(url) {
-        return await fetch(url).then(res => res.json());
-    }
 }