Images for not conserved

webgis/js/components/NotConserved.js

@@ -1,8 +1,8 @@
 /**
- * Component to render data for not conserved assets sheet
- * @class NotConservedSheet
+ * Component to render data for not conserved assets
+ * @class NotConserved
  */
-export class NotConservedSheet {
+export class NotConserved {
     biblioElements = [];
     /**
      * @param {object} data
@@ -49,6 +49,37 @@ export class NotConservedSheet {
         </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}`);