+
+
+ Reimpiego
+
+
+
+
+
+
+
+
+
+
+
+
+ Reimpiego
+
+
+
+
+
@@ -445,6 +477,35 @@
+
+
+ Denominazione: ${this._data.denomination}
+
+ Materia: ${this._data.material}
+
+ Misure: ${this._data.measurements}
+
+ Luogo di conservazione: ${this._data.conservationPlace}
+
+ Stato di conservazione: ${this._data.conservationState}
+
+ Luogo e anno rinvenimento: ${this._data.finding}
+
+ Datazione: ${this._data.dating}
+
+ Descrizione
+ ${this._data.description}
+
+
+
+
+ Bibliografia: ${await this.biblio(this._data.id)}
+
+ Autore scheda: ${this._data.author}
+ Immagini Cliccare sull'immagine per aprire la gallery ${record.reference}
+
+
+
+
diff --git a/webgis/js/components/Reuse.js b/webgis/js/components/Reuse.js
new file mode 100644
index 0000000..a8b7c8f
--- /dev/null
+++ b/webgis/js/components/Reuse.js
@@ -0,0 +1,124 @@
+import { GisState } from "../state.js";
+/**
+ * @class Reuse
+ */
+export class Reuse {
+ biblioElements = [];
+ images = null;
+
+ set data(data) {
+ this._data = data;
+ }
+
+ async render() {
+ return `
+
+ `;
+ }
+
+ renderImages() {
+ let content = `
+ `;
+
+ return content;
+ }
+ /**
+ * @param {HTMLElement} imageContainer
+ * @param {Function} gallery
+ */
+ async setImages(imageContainer, gallery) {
+ let record = await this.fetchData(`${GisState.apiUrl}/reuse/${this._data.id}`)
+
+ if (record.images.length) {
+ this.images = record.images;
+ imageContainer.innerHTML = this.renderImages();
+ gallery('finding-gallery', this.images);
+ }
+ }
+ /**
+ * @param {number} recordId
+ */
+ async biblio(recordId) {
+ let finding = await this.fetchData(`${GisState.apiUrl}/reuse/${recordId}`);
+
+ let citations = '';
+
+ if (finding.bibliography.length) {
+ finding.bibliography.forEach(record => {
+ citations += `
+
+ ${record.citation}`;
+
+ citations += record.pages?.length ? `, ${record.pages};` : ';';
+
+ this.biblioElements.push(`
+
+
+
+
+
+
+ `);
+ });
+ }
+
+ 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/controllers/menu_controller.js b/webgis/js/controllers/menu_controller.js
index 6ab18f8..b47729b 100644
--- a/webgis/js/controllers/menu_controller.js
+++ b/webgis/js/controllers/menu_controller.js
@@ -24,6 +24,9 @@ export default class extends Controller {
let ul = this.renderMenuItems(group, municipality);
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
?.appendChild(ul);
+
+ if (group === 'reuse' && municipality === 'Capri') console.log(ul);
+
}
}
}
diff --git a/webgis/js/gis.js b/webgis/js/gis.js
index cbf111a..52b6d05 100644
--- a/webgis/js/gis.js
+++ b/webgis/js/gis.js
@@ -158,6 +158,7 @@ GIS.addLayerGroups = async function (map) {
this.findings(),
this.prehistoric(),
this.underwater(),
+ this.reuse(),
]
);
groups.forEach(group => group.addTo(map));
@@ -322,7 +323,7 @@ GIS.underwater = async function () {
);
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
- GisState.markers.prehistoric[markerLabel] = marker;
+ GisState.markers.underwater[markerLabel] = marker;
underwater.addLayer(marker);
}
@@ -331,6 +332,38 @@ GIS.underwater = async function () {
return underwater;
}
+/**
+ * Create reused sites group ('reimpiego')
+ * @returns {L.MarkerClusterGroup}
+ */
+GIS.reuse = async function () {
+ let reuseData = await fetch(`${API_URL}/reuse`)
+ .then(data => data.json());
+
+ let reuse = L.markerClusterGroup(Options.cluster);
+
+ for (let record of reuseData.records) {
+ const marker = L.marker(
+ record.coordinates,
+ {icon: Icons.reuse}
+ ).bindTooltip(record.label)
+ .on(
+ 'click',
+ () => UI.openReuseModal(record, '#reuse-data')
+ );
+
+ const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ marker.options.municipality = record.municipality;
+ marker.options.label = record.label;
+ GisState.markers.reuse[markerLabel] = marker;
+
+ reuse.addLayer(marker);
+ }
+
+ GisState.layers.reuse = reuse;
+
+ return reuse;
+}
/**
* Adds layers to map and returns an object
* with {baseMap, archeoLayers, sitesLayerGroup}
diff --git a/webgis/js/icons.js b/webgis/js/icons.js
index a13056f..81e73dc 100644
--- a/webgis/js/icons.js
+++ b/webgis/js/icons.js
@@ -48,6 +48,15 @@ Icons.underwater = L.icon(
}
);
+Icons.reuse = L.icon(
+ {
+ iconUrl: 'img/icons/reimpiego.png',
+ iconSize: [18, 27],
+ iconAnchor: [10, 24],
+ tooltipAnchor: [0, -22],
+ }
+);
+
Icons.camera = L.divIcon({className: 'fa fa-camera'});
export default Icons;
\ No newline at end of file
diff --git a/webgis/js/state.js b/webgis/js/state.js
index a9e5dc1..b9e0550 100644
--- a/webgis/js/state.js
+++ b/webgis/js/state.js
@@ -27,6 +27,7 @@ export const GisState = {
findings: {},
prehistoric: {},
underwater: {},
+ reuse: {},
},
layers: {
sites: {},
@@ -34,6 +35,7 @@ export const GisState = {
findings: {},
prehistoric: {},
underwater: {},
+ reuse: {},
},
bibliography: null,
apiUrl : null,
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index eee7181..9b1f4d5 100644
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -10,6 +10,7 @@ import { Finding } from './components/Finding.js';
import { Prehistoric } from './components/Prehistoric.js';
import { Underwater } from './components/Underwater.js';
import { GisState } from "./state.js";
+import { Reuse } from './components/Reuse.js';
/**
* @namespace UI
@@ -213,6 +214,22 @@ UI.openUnderwaterModal = function (data, selector) {
underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
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.openReuseModal = function (data, selector) {
+ const modal = document.querySelector(selector);
+
+ let reuse = new Reuse();
+ reuse.data = data;
+
+ // For Stimulus biblio_controller
+ //GisState.bibliography = underwater;
+ reuse.render().then(html => modal.querySelector('#reuse-sheet').innerHTML = html);
+ modal.classList.add('is-active');
+}
/**
* Open Spotlight gallery
* @param {string} galleryId The id of the trigger element