Add prehistoric assets

webgis/js/components/Finding.js

@@ -63,8 +63,7 @@ export class Finding {
 					</div>
 				</figure>
 			</div>
-		</div>
-		`;
+		</div>`;
 
         return content;
     }

webgis/js/components/Prehistoric.js

@@ -0,0 +1,90 @@
+
+/**
+ * @class Prehistoric
+ */
+export class Prehistoric {
+    biblioElements = [];
+    
+    set data(data) {
+        this._data = data;
+    }
+    /**
+     * 
+     * @todo Biblio
+     * @returns {string} The HTML
+     */
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <strong>Località generica:</strong> ${this._data.genericPlace}
+            </p>
+            <p class="p-2">
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione breve</strong></br>
+                ${this._data.description}
+            </p>
+            <p class="p-2">
+                <strong>Conservazione:</strong> ${this._data.conservation}
+            </p>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+
+        /*
+
+            <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>
+        */
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let finding = await this.fetchData(`${window.API_URL}/prehistoric/${recordId}`);
+
+        let citations = '';
+
+        if (finding.bibliography.length) {
+            finding.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()}</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());
+    }
+}

webgis/js/gis.js

@@ -257,6 +257,27 @@ GIS.findings = async function () {
  * 
  */
 GIS.prehistoric = async function () {
+    let data = await fetch(`${API_URL}/prehistoric`)
+        .then(data => data.json());
+
+    let prehistoric = L.markerClusterGroup(
+        clusterOptions
+    );
+
+    for (let record of data.records) {
+        prehistoric.addLayer(L.marker(
+                record.coordinates,
+                {icon: Icons.prehistoric}
+            ).bindTooltip(record.denomination)
+            .on(
+                'click',
+                () => UI.openPrehistModal(record, '#prehist-data')
+            )
+        );
+    }
+
+    return prehistoric;
+    /*
     const geo = await fetch(`${BASE_URL}/geojson/preistorici.geojson`)
         .then(res => res.json());
 
@@ -281,6 +302,7 @@ GIS.prehistoric = async function () {
     });
 
     return prehistoric;
+    */
 }
 /*
 GIS._prepareLayers = async function(layer) {

webgis/js/ui.js

@@ -7,6 +7,7 @@ import { SiteSurveys } from './components/SiteSurveys.js';
 import { SiteMedia } from './components/SiteMedia.js';
 import { NotConservedSheet } from './components/NotConservedSheet.js';
 import { Finding } from './components/Finding.js';
+import { Prehistoric } from './components/Prehistoric.js';
 
 /**
  * @namespace UI
@@ -198,6 +199,23 @@ UI.openFindingModal = async function (data, selector) {
 	}
 	modal.classList.add('is-active');
 }
+/**
+ * @todo Biblio
+ * @param {object} data The data retrieved from the DB to display as modal content
+ * @param {string} selector The modal selector
+ */
+UI.openPrehistModal = async function (data, selector) {
+	const modal = document.querySelector(selector);
+	
+	let prehistoric = new Prehistoric();
+	prehistoric.data = data;
+
+	// For Stimulus biblio_controller
+	//window.Biblio = prehistoric;
+
+	modal.querySelector('#prehist-sheet').innerHTML = await prehistoric.render();
+	modal.classList.add('is-active');
+}
 /**
  * @param {string} menuListSel Menu list selector
  * @param {L.Map} map