Add Reuse asset type

webgis/index.html

@@ -192,6 +192,38 @@
                         </span>
                     </li>
                 </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="reuse">
+                     <span class="icon pl-1 mr-2 is-small" data-layer-target="reuse" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/reimpiego_menu.png"/>
+                    </span>
+                    <span role="button" data-action="click->menu#toggle" data-id="reuse">
+                        Reimpiego
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="reuse"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="reuse-list" data-menu-target="list" data-controller="marker">
+                    <li data-list-id="reuse-anacapri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="reuse-anacapri-sub">
+                            Anacapri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                    <li class="mt-3" data-list-id="reuse-capri-sub">
+                        <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="reuse-capri-sub">
+                            Capri
+                            <span class="icon ml-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon"></i>
+                            </span>
+                        </span>
+                    </li>
+                </ul>
                 <p class="menu-label is-size-5 is-clickable" data-id="prehistoric">
                      <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="prehistoric" data-action="click->layer#toggle">
                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
@@ -445,6 +477,35 @@
         </div>
         <button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
     </div>
+    <!-- Reuse modal -->
+    <div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
+        <div class="modal-content has-background-white">
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-reuse-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="reuse-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 tabs#reset"></button>
+    </div>
     <!-- Spherical photo modal -->
     <div class="modal" id="spherical-modal">
         <div class="modal-background"></div>

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 `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <strong>Materia:</strong> ${this._data.material}
+            </p>
+            <p class="p-2">
+                <strong>Misure:</strong> ${this._data.measurements}
+            </p>
+            <p class="p-2">
+                <strong>Luogo di conservazione:</strong> ${this._data.conservationPlace}
+            </p>
+            <p class="p-2">
+                <strong>Stato di conservazione:</strong> ${this._data.conservationState}
+            </p>
+            <p class="p-2">
+                <strong>Luogo e anno rinvenimento:</strong> ${this._data.finding}
+            </p>
+            <p class="p-2">
+                <strong>Datazione:</strong> ${this._data.dating}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione</strong></br>
+                ${this._data.description}
+            </p>
+            <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>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </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="finding-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(`${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 += `
+                    <span class="is-clickable has-text-link"
+                        data-action="click->biblio#open"
+                        id="cit-${record.id}">
+                        ${record.citation}</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/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);
+
             }
         }
     }

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}

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;

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,

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