Add prehistoric assets
This commit is contained in:
parent
058c83da65
commit
73e804f303
@ -340,12 +340,87 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5">
|
||||
<p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="preist">
|
||||
<span class="icon pr-2">
|
||||
<img class="image" src="img/icons/preistorici.png"/>
|
||||
</span>
|
||||
Aree pre-protostoriche
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
|
||||
</span>
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="preist-list" data-menu-target="list" data-controller="marker">
|
||||
<li data-list-id="preist-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="preist-anacapri-sub">
|
||||
Anacapri
|
||||
<span class="icon ml-2 is-small" data-list-id="noncons-anacapri-sub">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul id="preist-anacapri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.548922 14.229593">
|
||||
Valletta di Cetrella
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.554641 14.198711">
|
||||
Punta Capocchia
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.556512 14.198711">
|
||||
Punta del Miglio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.549190 14.198606">
|
||||
Punta Campetiello
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.5473633 14.1992508">
|
||||
Rio Latino - Cala di Mezzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.5469179 14.2022463">
|
||||
Località Pino
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.543768 14.202657">
|
||||
Grotta del Pisco
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.541755 14.197580">
|
||||
Punta del Pino
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.5386677 14.1997139">
|
||||
Capo Ruglio-Limmo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.5399062 14.2098143">
|
||||
Belvedere della Migliara
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.5367431 14.1995263">
|
||||
Punta Carena-Limmo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-coords="40.558507 14.200558">
|
||||
Punta dell'Arcera
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column mb-0 pb-0 is-full is-relative">
|
||||
@ -439,6 +514,14 @@
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||
</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-content has-background-white">
|
||||
<div id="prehist-sheet"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
|
||||
</div>
|
||||
<!-- Spherical photo modal -->
|
||||
<div class="modal" id="spherical-modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
@ -63,8 +63,7 @@ export class Finding {
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>`;
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
90
webgis/js/components/Prehistoric.js
Normal file
90
webgis/js/components/Prehistoric.js
Normal file
@ -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());
|
||||
}
|
||||
}
|
||||
@ -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) {
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user