Findings (WIP) + change some UI behaviour
This commit is contained in:
parent
bda52fc665
commit
08711db11a
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,8 +5,8 @@
|
||||
*.shp*
|
||||
*.log
|
||||
*.zip
|
||||
*.pdf
|
||||
vendor/
|
||||
docs/
|
||||
progetto_QGIS/
|
||||
conf.json
|
||||
shapefile
|
||||
|
||||
0
webgis/docs/.keep
Normal file
0
webgis/docs/.keep
Normal file
BIN
webgis/img/icons/rinvenimenti.png
Normal file
BIN
webgis/img/icons/rinvenimenti.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -21,7 +21,7 @@
|
||||
<title>WebGIS Isola di Capri</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar mb-2" role="navigation">
|
||||
<nav class="navbar mb-0" role="navigation">
|
||||
<div class="navbar-brand">
|
||||
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
|
||||
<span class="icon">
|
||||
@ -39,7 +39,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-end" id="nav-menu">
|
||||
<div class="navbar-end pb-1 pt-1" id="nav-menu">
|
||||
<button class="navbar-item button is-size-5 is-white" role="button" id="siti">
|
||||
Beni archeologici
|
||||
</button>
|
||||
@ -56,7 +56,6 @@
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- TODO Loader -->
|
||||
<div class="wait-lg text-center is-hidden" style="clear: both;">
|
||||
<p>Loading...</p>
|
||||
<div class="loading loading-lg"></div>
|
||||
@ -109,8 +108,8 @@
|
||||
<ul class="menu-list" id="not-conserved"></ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column is-full is-relative">
|
||||
<div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
|
||||
<div class="column mb-0 pb-0 is-full is-relative">
|
||||
<div class="pb-0" id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
|
||||
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
|
||||
</div>
|
||||
</div>
|
||||
@ -170,6 +169,14 @@
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Not conserved modal -->
|
||||
<div class="modal" id="finding-data">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||
<div id="finding-sheet"></div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Spherical photo modal -->
|
||||
<div class="modal" id="spherical-modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
48
webgis/js/components/Finding.js
Normal file
48
webgis/js/components/Finding.js
Normal file
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* @class Finding
|
||||
*/
|
||||
export class Finding {
|
||||
set data(data) {
|
||||
this._data = data;
|
||||
}
|
||||
|
||||
render() {
|
||||
return `
|
||||
<div class="container px-4 pt-4">
|
||||
<p class="p-2">
|
||||
<strong>Oggetto:</strong> ${this._data.object}
|
||||
</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>Inventario</strong> ${this._data.inventory}
|
||||
</p>
|
||||
<p class="p-2">
|
||||
<strong>Luogo rinvenimento</strong> ${this._data.place}
|
||||
</p>
|
||||
<p class="p-2">
|
||||
<strong>Anno rinvenimento</strong> ${this._data.year}
|
||||
</p>
|
||||
<p class="p-2">
|
||||
<strong>Datazione</strong> ${this._data.dating}
|
||||
</p>
|
||||
<p class="p-2">
|
||||
<strong>Stato di conservazione</strong> ${this._data.conservationState}
|
||||
</p>
|
||||
<p class="p-2">
|
||||
<strong>Luogo di conservazione</strong> ${this._data.conservationPlace}
|
||||
</p>
|
||||
<p class="mt-4 pl-2 pr-5">
|
||||
<strong class="pb-3">Descrizione</strong></br>
|
||||
${this._data.description}
|
||||
</p>
|
||||
<p class="p-2 mb-4">
|
||||
<strong>Autore scheda:</strong> ${this._data.author}
|
||||
</p>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@ -129,11 +129,13 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
|
||||
let markersGroup = await this.sitesMarkers(sitesGroup);
|
||||
let notConservedGroup = await this.notConserved();
|
||||
let findingsGroup = await this.findings();
|
||||
|
||||
const archeo = {
|
||||
'Beni archeologici (punti)' : markersGroup,
|
||||
'Beni archeologici (strutture)' : sitesGroup,
|
||||
'Beni non conservati' : notConservedGroup,
|
||||
'Rinvenimenti' : findingsGroup,
|
||||
'Vincoli archeologici' : layerVincoli,
|
||||
'Vincoli paesistici' : layerPaesistici,
|
||||
};
|
||||
@ -141,6 +143,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
markersGroup.addTo(map);
|
||||
sitesGroup.addTo(map);
|
||||
notConservedGroup.addTo(map);
|
||||
findingsGroup.addTo(map);
|
||||
|
||||
L.control.layers(
|
||||
baseMap,
|
||||
@ -178,8 +181,9 @@ GIS.sitesMarkers = async function (sitesGroup) {
|
||||
}
|
||||
|
||||
const marker = L.marker(coords, { icon: Icons.site })
|
||||
.bindTooltip(MARKER_NAMES.sites[id])
|
||||
.openTooltip();
|
||||
.bindTooltip(MARKER_NAMES.sites[id] + '<br>(Clicca per aprire scheda)');
|
||||
|
||||
marker.id = id;
|
||||
|
||||
marker.on('click', () => UI.openSiteModal(data, '#site-data'));
|
||||
|
||||
@ -212,6 +216,30 @@ GIS.notConserved = async function () {
|
||||
|
||||
return L.layerGroup(notConserved);
|
||||
}
|
||||
/**
|
||||
* Create findings group
|
||||
* @returns {L.LayerGroup}
|
||||
*/
|
||||
GIS.findings = async function () {
|
||||
let findingsData = await fetch(`${API_URL}/finding`)
|
||||
.then(data => data.json());
|
||||
|
||||
let findings = [];
|
||||
|
||||
for (let record of findingsData) {
|
||||
findings.push(L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.finding}
|
||||
).bindTooltip(record.object)
|
||||
.on(
|
||||
'click',
|
||||
() => UI.openFindingModal(record, '#finding-data')
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return L.layerGroup(findings);
|
||||
}
|
||||
/*
|
||||
GIS._prepareLayers = async function(layer) {
|
||||
const fromStorage = localStorage.getItem(layer.id);
|
||||
@ -254,6 +282,7 @@ GIS._prepareLayers = async function(layer) {
|
||||
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}}
|
||||
*/
|
||||
GIS.initLayers = async function(map) {
|
||||
// TODO Move all this to separate array / object!
|
||||
let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
|
||||
let layerMaterArea = await this.loadLayer('matermania_area.geojson', optionsSiti, false);
|
||||
let layerArsenale = await this.loadLayer('arsenale.geojson', optionsSiti, false);
|
||||
|
||||
@ -21,6 +21,15 @@ Icons.notConserved = L.icon(
|
||||
}
|
||||
);
|
||||
|
||||
Icons.finding = L.icon(
|
||||
{
|
||||
iconUrl: 'img/icons/rinvenimenti.png',
|
||||
iconSize: [24, 36],
|
||||
iconAnchor: [12, 32],
|
||||
tooltipAnchor: [0, -26],
|
||||
}
|
||||
);
|
||||
|
||||
Icons.camera = L.divIcon({className: 'fa fa-2x fa-camera'});
|
||||
|
||||
export default Icons;
|
||||
@ -7,6 +7,7 @@ import { SiteSurveys } from './components/SiteSurveys.js';
|
||||
import { SitePhotos } from './components/SitePhotos.js';
|
||||
import { NotConservedSheet } from './components/NotConservedSheet.js';
|
||||
import GIS from './gis.js';
|
||||
import { Finding } from './components/Finding.js';
|
||||
|
||||
/**
|
||||
* @namespace UI
|
||||
@ -194,6 +195,24 @@ UI.openNotConserModal = async function (data, selector) {
|
||||
modalBg.addEventListener('click', () => closeModal());
|
||||
|
||||
}
|
||||
/**
|
||||
* @param {object} data The data retrieved from the DB to display as modal content
|
||||
* @param {string} selector The modal selector
|
||||
*/
|
||||
UI.openFindingModal = async function (data, selector) {
|
||||
const modal = document.querySelector(selector);
|
||||
|
||||
let sheet = new Finding();
|
||||
sheet.data = data;
|
||||
modal.querySelector('#finding-sheet').innerHTML = await 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());
|
||||
}
|
||||
/**
|
||||
* @param {string} menuListSel Menu list selector
|
||||
* @param {L.Map} map
|
||||
@ -202,23 +221,29 @@ UI.openNotConserModal = async function (data, selector) {
|
||||
UI.sitesMenu = function (menuListSel, map, sites) {
|
||||
// Close menu if arrow button is clicked...
|
||||
this.toggleMenu('close-menu');
|
||||
let markers = [];
|
||||
|
||||
map.eachLayer(layer => {
|
||||
if (layer instanceof L.Marker) {
|
||||
markers.push(layer);
|
||||
}
|
||||
})
|
||||
|
||||
const menu = document.querySelector(menuListSel);
|
||||
menu.addEventListener('click', async event => {
|
||||
if (event.target.nodeName === 'A') {
|
||||
const layerId = event.target.id;
|
||||
const marker = markers.filter(m => m.id === layerId)[0];
|
||||
|
||||
// zoom to layer...
|
||||
const layer = sites.customGetLayer(layerId);
|
||||
const data = await GIS.layerData(layerId);
|
||||
map.setView(
|
||||
layer.getBounds().getCenter(),
|
||||
19,
|
||||
{animate: true, duration: 1, easeLinearity: 0.25}
|
||||
);
|
||||
setTimeout(
|
||||
() => this.openSiteModal(data, '#site-data'),
|
||||
1200
|
||||
);
|
||||
|
||||
marker.openTooltip();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user