nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Add not conserved points

Browse Source
This commit is contained in:
Nicolò P 2024-11-15 16:12:10 +01:00
parent d95ca7206d
commit a2028312b9
4 changed files with 63 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/icons/non_conserv.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

39
js/components/SiteSheet.js
View File

@ -14,27 +14,26 @@ export class SiteSheet {
return `<div class="container has-bottom-border"> return `<div class="container has-bottom-border">
<table class="table is-fullwidth is-striped"> <table class="table is-fullwidth is-striped">
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Identificazione</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Identificazione</th></tr>
<tr><th>Denominazione</th><td>${this._siteData.denominazione}</td></tr> <tr><th>Denominazione</th><td>${this._siteData.denomination}</td></tr>
<tr><th>Definizione</th><td>${this._siteData.definizione}</td></tr> <tr><th>Definizione</th><td>${this._siteData.definition}</td></tr>
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Localizzazione geografico-amministrativa</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Localizzazione geografico-amministrativa</th></tr>
<tr><th>Comune</th><td>${this._siteData.comune}</td></tr> <tr><th>Comune</th><td>${this._siteData.municipality}</td></tr>
<tr><th>Indirizzo</th><td>${this._siteData.indirizzo}</td></tr> <tr><th>Indirizzo</th><td>${this._siteData.address}</td></tr>
<tr><th>Località</th><td>${this._siteData.localita}</td></tr> <tr><th>Località</th><td>${this._siteData.place}</td></tr>
<tr><th>Localizzazione</th><td>${this._siteData.localizzazione}</td></tr> <tr><th>Localizzazione</th><td>${this._siteData.localization}</td></tr>
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Cronologia</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Cronologia</th></tr>
<tr><th>Periodo</th><td>${this._siteData.periodo}</td></tr> <tr><th>Periodo</th><td>${this._siteData.period}</td></tr>
<tr><th>Fase</th><td>${this._siteData.fase}</td></tr> <tr><th>Fase</th><td>${this._siteData.phase}</td></tr>
<tr><th>Cronologia</th><td>${this._siteData.cronologia}</td></tr> <tr><th>Cronologia</th><td>${this._siteData.chronology}</td></tr>
<tr><th>Motivazione cronologia</th><td>${this._siteData.motivazione_cron}</td></tr> <tr><th>Motivazione cronologia</th><td>${this._siteData.motivation}</td></tr>
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Conservazione e condizione giuridica</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Conservazione e condizione giuridica</th></tr>
<tr><th>Stato di conservazione</th><td>${this._siteData.stato_conserv}</td></tr> <tr><th>Stato di conservazione</th><td>${this._siteData.conservationState}</td></tr>
<tr><th>Tutela vigente</th><td>${this._siteData.tutela_vigente}</td></tr>
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Ritrovamento e materiali</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Ritrovamento e materiali</th></tr>
<tr><th>Anno di ritrovamento</th><td>${this._siteData.ritrovamento}</td></tr> <tr><th>Anno di ritrovamento</th><td>${this._siteData.finding}</td></tr>
<tr><th>Materiali rinvenuti</th><td>${this._siteData.materiali_rinv}</td></tr> <tr><th>Materiali rinvenuti</th><td>${this._siteData.materials}</td></tr>
<tr><th>Luogo custodia materiali</th><td>${this._siteData.luogo_custodia_mat}</td></tr> <tr><th>Luogo custodia materiali</th><td>${this._siteData.conservationPlace}</td></tr>
<tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Descrizione</th></tr> <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Descrizione</th></tr>
<tr><td class="pr-6 pl-6 pt-3" colspan="2">${this._siteData.descrizione}</td></tr> <tr><td class="pr-6 pl-6 pt-3" colspan="2">${this._siteData.description}</td></tr>
</table> </table>
</div>`; </div>`;
} }
@ -46,22 +45,22 @@ export class SiteSheet {
<span class="icon has-text-link"> <span class="icon has-text-link">
<i class="fa fa-tag"></i> <i class="fa fa-tag"></i>
</span> </span>
<strong>Denominazione:</strong> ${this._siteData.denominazione} <strong>Denominazione:</strong> ${this._siteData.denomination}
</p> </p>
<p class="p-2"> <p class="p-2">
<span class="icon has-text-link"> <span class="icon has-text-link">
<i class="fa fa-hourglass"></i> <i class="fa fa-hourglass"></i>
</span> </span>
<strong>Periodo:</strong> ${this._siteData.periodo} <strong>Periodo:</strong> ${this._siteData.period}
</p> </p>
<p class="p-2"> <p class="p-2">
<span class="icon has-text-link"> <span class="icon has-text-link">
<i class="fa fa-map"></i> <i class="fa fa-map"></i>
</span> </span>
<strong>Località generica:</strong> ${this._siteData.loc_generica} <strong>Località generica:</strong> ${this._siteData.genericPlace}
</p> </p>
<p class="mt-4 pl-2 pr-5"> <p class="mt-4 pl-2 pr-5">
${this._siteData.desc_breve} ${this._siteData.shortDescription}
</p> </p>
</div>`; </div>`;
} }

39
js/gis.js
View File

@ -4,7 +4,8 @@ import UI from "./ui.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw'; const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href; const BASE_URL = location.href;
const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis'; //const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
const API_URL = 'https://localhost:8001';
// Global leaflet // Global leaflet
/** /**
@ -39,7 +40,7 @@ const optionsFabbricati = {
color: '#222', color: '#222',
opacity: 1, opacity: 1,
weight: 1.5, weight: 1.5,
fillColor: '#ff8000', fillColor: '#5b5d5f',
fillOpacity: 0.8 fillOpacity: 0.8
}; };
@ -102,8 +103,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
const {baseMap, sitesGroup} = await this.initLayers(map); const {baseMap, sitesGroup} = await this.initLayers(map);
let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli); let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
// TODO named parameters??
let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici); let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
let notConserData = await fetch(`${API_URL}/not_conserved`)
.then(data => data.json());
// Add scale and ruler controls // Add scale and ruler controls
L.control.scale({imperial: false}).addTo(map); L.control.scale({imperial: false}).addTo(map);
@ -118,6 +120,24 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
tooltipAnchor: [0, -26], tooltipAnchor: [0, -26],
} }
); );
let notConserIcon = L.icon(
{
iconUrl: 'img/icons/non_conserv.png',
iconSize: [24, 36],
iconAnchor: [12, 32],
tooltipAnchor: [0, -26],
}
);
let notConserved = [];
for (let record of notConserData.records) {
notConserved.push(L.marker(
record.coordinates,
{icon: notConserIcon}
).bindTooltip(record.denomination)
);
}
for (let id in MARKER_NAMES.sites) { for (let id in MARKER_NAMES.sites) {
let layer = sitesGroup.customGetLayer(id); let layer = sitesGroup.customGetLayer(id);
@ -128,14 +148,14 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
if (fromStorage !== 'undefined') { if (fromStorage !== 'undefined') {
try { try {
data = JSON.parse(fromStorage); data = JSON.parse(fromStorage);
const lat = data?.lat ?? coords.lat; const lat = data?.coordinates[0] ?? coords.lat;
const lon = data?.lon ?? coords.lng; const lon = data?.coordinates[1] ?? coords.lng;
coords = [lat, lon]; coords = [lat, lon];
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} else { } else {
data = await GIS._fetchData(id); data = await GIS._fetchData('site/' + id);
} }
const marker = L.marker(coords, { icon: siteIcon }) const marker = L.marker(coords, { icon: siteIcon })
@ -148,16 +168,19 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
} }
let markersGroup = L.layerGroup(sitesMarkers); let markersGroup = L.layerGroup(sitesMarkers);
let notConservedGroup = L.layerGroup(notConserved);
const archeo = { const archeo = {
'Beni archeologici (punti)' : markersGroup, 'Beni archeologici (punti)' : markersGroup,
'Beni archeologici (strutture)' : sitesGroup, 'Beni archeologici (strutture)' : sitesGroup,
'Beni non conservati' : notConservedGroup,
'Vincoli archeologici' : layerVincoli, 'Vincoli archeologici' : layerVincoli,
'Vincoli paesistici' : layerPaesistici, 'Vincoli paesistici' : layerPaesistici,
}; };
markersGroup.addTo(map); markersGroup.addTo(map);
sitesGroup.addTo(map); sitesGroup.addTo(map);
notConservedGroup.addTo(map);
L.control.layers( L.control.layers(
baseMap, baseMap,
@ -324,7 +347,7 @@ GIS.layerData = async function (layerId) {
console.log(error); console.log(error);
} }
} else { } else {
data = await GIS._fetchData(layerId); data = await GIS._fetchData('site/' + layerId);
} }
return data; return data;
@ -335,7 +358,7 @@ GIS.layerData = async function (layerId) {
* @param {string} layerId * @param {string} layerId
*/ */
GIS.cacheDBData = async function (layerId) { GIS.cacheDBData = async function (layerId) {
const data = await this._fetchData(layerId); const data = await this._fetchData('site/' + layerId);
localStorage.setItem(layerId, JSON.stringify(data)); localStorage.setItem(layerId, JSON.stringify(data));
} }
/** /**

23
js/ui.js
View File

@ -87,22 +87,25 @@ UI.openModal = async function (data, selector) {
modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort(); modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
modal.querySelector('#site-sheet').innerHTML = siteSheet.render(); modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
let photos = modal.querySelector('#photos'); let images = modal.querySelector('#photos');
if (data.documents.length) { if (data.documents?.length) {
let siteDocs = new SiteDocuments; let siteDocs = new SiteDocuments;
siteDocs.siteData = data; siteDocs.siteData = data;
modal.querySelector('#documents').innerHTML = siteDocs.render(); modal.querySelector('#documents').innerHTML = siteDocs.render();
} }
if (photos.innerHTML.length === 0) { let surveys = data.images.filter(i => i.type === 'Survey');
let photos = data.images.filter(i => i.type === 'Photo');
if (images.innerHTML.length === 0) {
let siteSurveys = new SiteSurveys; let siteSurveys = new SiteSurveys;
siteSurveys.siteData = data.surveys[0] ?? undefined; siteSurveys.siteData = surveys.length !== 0 ? surveys[0] : undefined;
photos.innerHTML += data.surveys[0] ? siteSurveys.render() : ''; images.innerHTML += surveys ? siteSurveys.render() : '';
let sitePhotos = new SitePhotos; let sitePhotos = new SitePhotos;
sitePhotos.siteData = data.photos[0] ?? undefined; sitePhotos.siteData = photos[0] ?? undefined;
photos.innerHTML += data.photos[0] ? sitePhotos.render() : ''; images.innerHTML += photos[0] ? sitePhotos.render() : '';
} }
let dataTabs = modal.querySelectorAll('.data-tabs'); let dataTabs = modal.querySelectorAll('.data-tabs');
@ -136,8 +139,8 @@ UI.openModal = async function (data, selector) {
closeBtn.addEventListener('click', () => closeModal()); closeBtn.addEventListener('click', () => closeModal());
modalBg.addEventListener('click', () => closeModal()); modalBg.addEventListener('click', () => closeModal());
this.imageGallery('gallery-1', data.surveys); this.imageGallery('gallery-1', surveys);
this.imageGallery('gallery-2', data.photos); this.imageGallery('gallery-2', photos);
} }
/** /**
* Open a modal with project info * Open a modal with project info
@ -194,7 +197,7 @@ UI.imageGallery = function (galleryId, images) {
if (element) { if (element) {
let gallery = []; let gallery = [];
for (let img of images) { for (let img of images) {
gallery.push({src: `img/${img.filename}`, description: img.didascalia}); gallery.push({src: `img/${img.filename}`, description: img.caption});
} }
document.querySelector(`#${galleryId}`).addEventListener('click', () => { document.querySelector(`#${galleryId}`).addEventListener('click', () => {