diff --git a/webgis/index.html b/webgis/index.html index e376b82..70d7ec6 100644 --- a/webgis/index.html +++ b/webgis/index.html @@ -340,12 +340,87 @@ -

+

Aree pre-protostoriche + + +

+
@@ -439,6 +514,14 @@
+ + - - `; + `; return content; } diff --git a/webgis/js/components/Prehistoric.js b/webgis/js/components/Prehistoric.js new file mode 100644 index 0000000..32a3b34 --- /dev/null +++ b/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 ` +
+

+ Denominazione: ${this._data.denomination} +

+

+ Località generica: ${this._data.genericPlace} +

+

+ Periodo: ${this._data.period} +

+

+ Descrizione breve
+ ${this._data.description} +

+

+ Conservazione: ${this._data.conservation} +

+

+ Autore scheda: ${this._data.author} +

+
`; + + /* + +

+ + + + Bibliografia: ${await this.biblio(this._data.id)} +

+ + */ + } + /** + * @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 += ` + + ${record.citation.toLowerCase()}`; + + citations += record.pages?.length ? `, ${record.pages};` : ';'; + + this.biblioElements.push(` +
+

${record.reference}

+
+ `); + }); + } + + 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()); + } +} diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 7350b92..b166a92 100644 --- a/webgis/js/gis.js +++ b/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) { diff --git a/webgis/js/ui.js b/webgis/js/ui.js index 5da4906..bacad18 100644 --- a/webgis/js/ui.js +++ b/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