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

Add sheet for not conserved stuff

Browse Source
This commit is contained in:
Nicolò P 2024-11-18 11:00:21 +01:00
parent a2028312b9
commit e9c8ac6b07
5 changed files with 125 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -132,6 +132,14 @@
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Not conserved modal -->
<div class="modal" id="not-conser-data">
<div class="modal-background"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div id="not-conser-sheet"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Project info modal -->
<div class="modal" id="project-info">
<div class="modal-background"></div>

67
js/components/NotConservedSheet.js Normal file
View File

@ -0,0 +1,67 @@
/**
* Component to render data for not conserved assets sheet
* @class NotConservedSheet
*/
export class NotConservedSheet {
/**
* @param {object} data
*/
set siteData(data) {
this._data = data;
}
render() {
return `
<div class="container ml-3">
<p class="p-2">
<span class="icon has-text-link">
<i class="fa fa-tag"></i>
</span>
<strong>Denominazione:</strong> ${this._data.denomination}
</p>
<p class="p-2">
<span class="icon has-text-link">
<i class="fa fa-hourglass"></i>
</span>
<strong>Periodo:</strong> ${this._data.period}
</p>
<p class="p-2">
<span class="icon has-text-link">
<i class="fa fa-map"></i>
</span>
<strong>Località generica:</strong> ${this._data.genericLocation}
</p>
<p class="mt-4 pl-2 pr-5">
<strong class="pb-3">Descrizione</strong></br>
${this._data.shortDescription}
</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> ${this.biblio(this._data.bibliography)}
</p>
<p class="p-2">
<span class="icon has-text-link">
<i class="fa fa-map"></i>
</span>
<strong>Autore scheda:</strong> ${this._data.author}
</p>
</div>`;
}
biblio(records) {
let biblio = '';
if (records.length) {
records.forEach(record => {
biblio += `
<span class="is-capitalized">${record.citation.toLowerCase()}</span>,
${record.pages};
`;
});
}
return biblio.trim().slice(0, -1);
}
}

21
js/components/SiteDocuments.js
View File

@ -13,18 +13,17 @@ export class SiteDocuments {
render() {
let content = `
<div class="has-bottom-border">
<p class="p-2 has-text-centered">${this._siteData.documenti}</p>
<div class="p-2">
<table class="p-4 table is-fullwidth is-striped">
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
</thead>
<tbody>
<table class="p-4 table is-fullwidth is-striped">
<thead>
<tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
<tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
</thead>
<tbody>
`;
for (const doc of this._siteData.documents.filter(d => d.tipo === 'documentazione')) {
for (const doc of this._siteData.documents.filter(d => d.type === 'documentazione')) {
content += `
<tr><td>${doc.titolo}</td><td>${doc.autori}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;
@ -37,9 +36,9 @@ export class SiteDocuments {
</thead>
<tbody>
`;
for (const doc of this._siteData.documents.filter(d => d.tipo === 'pubblicazione')) {
for (const doc of this._siteData.documents.filter(d => d.type === 'pubblicazione')) {
content += `
<tr><td>${doc.titolo}</td><td>${doc.autori}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
<i class="fa fa-download mr-2"></i> PDF
</a></td></tr>
`;

22
js/gis.js
View File

@ -4,8 +4,14 @@ import UI from "./ui.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href;
//const API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
const API_URL = 'https://localhost:8001';
let API_URL = '';
if (BASE_URL.includes('localhost')) {
console.log(BASE_URL);
API_URL = `https://caprigis-api.ddev.site`;
} else {
API_URL = 'https://testaec.electricmandarine.cloud/gisdb/gis';
}
// Global leaflet
/**
@ -25,7 +31,7 @@ const optionsVincoli = {
const optionsSiti = {
color: '#800040',
opacity: 1,
weight: 2.5,
weight: 1.5,
fillColor: '#800040',
fillOpacity: 0.8
};
@ -136,6 +142,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
record.coordinates,
{icon: notConserIcon}
).bindTooltip(record.denomination)
.on(
'click',
() => UI.openNotConserModal(record, '#not-conser-data')
)
);
}
@ -162,7 +172,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
.bindTooltip(MARKER_NAMES.sites[id])
.openTooltip();
marker.on('click', () => UI.openModal(data, '#site-data'));
marker.on('click', () => UI.openSiteModal(data, '#site-data'));
sitesMarkers.push(marker);
}
@ -322,7 +332,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
let data = GIS.layerData(layerId);
if (typeof data === 'object') {
UI.openModal(data);
UI.openSiteModal(data);
}
});
}
@ -398,4 +408,4 @@ GIS._fetchData = async function (recordId) {
return data;
}
export default GIS;
export default GIS;

27
js/ui.js
View File

@ -5,6 +5,7 @@ import { SiteSheet } from './components/SiteSheet.js';
import { SiteDocuments } from './components/SiteDocuments.js';
import { SiteSurveys } from './components/SiteSurveys.js';
import { SitePhotos } from './components/SitePhotos.js';
import { NotConservedSheet } from './components/NotConservedSheet.js';
import GIS from './gis.js';
/**
@ -73,12 +74,12 @@ UI.toggleMenu = function (triggerId) {
});
}
/**
* Open a modal with DB data
* Open a modal with DB site data
* @todo Refactor!!! Web components??
* @param {object} data The data retrieved from the DB to display as modal content
* @param {string} selector The modal selector
*/
UI.openModal = async function (data, selector) {
UI.openSiteModal = async function (data, selector) {
const modal = document.querySelector(selector);
const tabs = modal.querySelector('.tabs > ul');
@ -108,6 +109,7 @@ UI.openModal = async function (data, selector) {
images.innerHTML += photos[0] ? sitePhotos.render() : '';
}
// Move to Stimulus?
let dataTabs = modal.querySelectorAll('.data-tabs');
// TODO Awful!!!
tabs.childNodes.forEach(node => {
@ -142,6 +144,25 @@ UI.openModal = async function (data, selector) {
this.imageGallery('gallery-1', surveys);
this.imageGallery('gallery-2', photos);
}
/**
* @param {object} data The data retrieved from the DB to display as modal content
* @param {string} selector The modal selector
*/
UI.openNotConserModal = async function (data, selector) {
const modal = document.querySelector(selector);
let sheet = new NotConservedSheet();
sheet.siteData = data;
modal.querySelector('#not-conser-sheet').innerHTML = sheet.render();
modal.classList.add('is-active');
const closeBtn = modal.querySelector('.modal-close');
const modalBg = modal.querySelector('.modal-background');
const closeModal = () => modal.classList.remove('is-active');
// CLose modal when clicking either on the X button or on the background
closeBtn.addEventListener('click', () => closeModal());
modalBg.addEventListener('click', () => closeModal());
}
/**
* Open a modal with project info
* @param {string} selector The modal selector to open project info
@ -177,7 +198,7 @@ UI.sitesMenu = function (menuListSel, map, sites) {
// zoom to layer...
const layer = sites.customGetLayer(layerId);
const data = await GIS.layerData(layerId);
this.openModal(data, '#site-data');
this.openSiteModal(data, '#site-data');
map.setView(
layer.getBounds().getCenter(),
19,