From d35cc2e2189cec8353cf7959cdad43fdc09e49a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Mon, 5 May 2025 17:41:47 +0200
Subject: [PATCH] Prepare for images in prehistoric

---
 webgis/index.html                   | 27 +++++++++++++++++++++---
 webgis/js/components/Prehistoric.js | 32 +++++++++++++++++++++++++++++
 webgis/js/ui.js                     |  5 +++++
 3 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/webgis/index.html b/webgis/index.html
index 4e0000d..4c10106 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -794,11 +794,32 @@
     </div>
     <!-- Prehistoric modal -->
     <div class="modal" id="prehist-data" data-controller="modal biblio marker" data-modal-target="modal">
-        <div class="modal-background" data-action="click->modal#close"></div>
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
         <div class="modal-content has-background-white">
-            <div id="prehist-sheet"></div>
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-prehist-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda</span>
+                        </a>
+                    </li>
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Immagini</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="prehist-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
         </div>
-        <button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
     </div>
     <!-- Underwater modal -->
     <div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal">
diff --git a/webgis/js/components/Prehistoric.js b/webgis/js/components/Prehistoric.js
index 49fee26..7f6b242 100644
--- a/webgis/js/components/Prehistoric.js
+++ b/webgis/js/components/Prehistoric.js
@@ -57,6 +57,38 @@ export class Prehistoric {
             <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></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 (this._data.images.length) {
+            this.images = this._data.images;
+            imageContainer.innerHTML = this.renderImages();
+            gallery('prehist-gallery', this.images);
+        } else
+            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+    }
     /**
      * @param {number} recordId 
      */
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index 0459166..90924d4 100644
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -205,13 +205,18 @@ UI.openFindingModal = function (data, selector) {
  */
 UI.openPrehistModal = function (data, selector) {
 	const modal = document.querySelector(selector);
+	let dataTabs = modal.querySelectorAll('.data-tabs');
 	
+	// Reset data tabs content
+	for (let tab of dataTabs) tab.innerHTML = '';
+
 	let prehistoric = new Prehistoric();
 	prehistoric.data = data;
 
 	// For Stimulus biblio_controller
 	//window.Biblio = prehistoric;
 	prehistoric.render().then(html => modal.querySelector('#prehist-sheet').innerHTML = html);
+	prehistoric.setImages(modal.querySelector('#photos'), this.imageGallery);
 	modal.classList.add('is-active');
 }
 /**