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

Move some UI to Stimulus + Lo Pozzo geojson

Browse Source
This commit is contained in:
Nicolò P 2024-11-27 11:48:03 +01:00
parent 8ef3331b25
commit 211379b986
9 changed files with 107 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/app.css
View File

@ -154,6 +154,7 @@ a:visited {
/* Menu overlay */
#menu {
z-index: 1000;
overflow-y: auto;
}
/* Content in tabs */
.docs-title {

8
webgis/geojson/lopozzo.geojson Normal file
View File

@ -0,0 +1,8 @@
{
"type": "FeatureCollection",
"name": "lopozzo",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "denominaz": "area residenziale e complesso idraulico in località Lo Pozzo" }, "geometry": { "type": "Point", "coordinates": [ 14.213643789607119, 40.556601906452713 ] } }
]
}

94
webgis/index.html
View File

@ -41,21 +41,32 @@
</div>
<hr class="navbar-divider">
<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"
data-action="click->menu#toggleMenu" data-id="siti">
Beni archeologici
</button>
<button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
Beni non conservati
</button>
<button class="navbar-item button is-size-5 is-white mr-3" role="button" id="rinvenimenti">
Rinvenimenti
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-action="click->menu#toggleMenu">
<span class="icon mr-2">
<i class="fa fa-list"></i>
</span>
Apri menu
</button>
<button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
<span class="icon is-large has-text-link">
<i class="fas fa-question fa-lg"></i>
</span>
</button>
<!--
<button class="navbar-item button is-size-5 is-white" role="button"
data-action="click->menu#toggleMenu" data-id="siti">
Beni archeologici
</button>
<button class="navbar-item button is-size-5 is-white" role="button"
data-action="click->menu#toggleMenu" data-id="non-conser">
Beni non conservati
</button>
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-action="click->menu#toggleMenu" data-id="rinv">
Rinvenimenti
</button>
-->
</div>
</nav>
<div class="wait-lg text-center is-hidden" style="clear: both;">
@ -65,15 +76,15 @@
<div class="main columns">
<div class="column is-hidden is-4 is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu"
data-menu-target="menu">
<aside class="menu ml-4">
<button title="Chiudi menu" class="delete is-pulled-right" id="close-menu"></button>
<aside class="menu ml-4 mt-3">
<button title="Chiudi menu" class="delete is-pulled-right" data-action="click->menu#close"></button>
<p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
<span class="icon pr-2">
<img class="image" src="img/icons/siti_menu.png"/>
</span>
Beni archeologici
<span class="icon pl-2">
<i class="fa fa-chevron-right"></i>
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
@ -138,33 +149,54 @@
</ul>
</li>
</ul>
<p class="menu-label is-size-5 is-clickable">
<p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="non-conser">
<span class="icon pr-2">
<img class="image" src="img/icons/non_cons_menu.png"/>
</span>
Beni non conservati
<span class="icon pl-2">
<i class="fa fa-chevron-right"></i>
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="not-conserved-list" data-menu-target="list">
<ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list">
<li>
Anacapri
<ul id="noncons-anacapri-sub">
<li>
<a class="button" id="cala">
Cala a mare - resti di ambienti
</a>
</li>
<li>
<a class="button" id="campetiello">
Punta Campetiello - scala
</a>
</li>
<li>
<a class="button" id="castagnaro">
Castagnaro - area funeraria
</a>
</li>
<li>
<a class="button" id="ceselle">
Ceselle - necropoli
</a>
</li>
</ul>
<p class="menu-label is-size-5 is-clickable">
</li>
</ul>
<p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="rinv">
<span class="icon pr-2">
<img class="image" src="img/icons/rinv_menu.png"/>
</span>
Rinvenimenti
<span class="icon pl-2">
<i class="fa fa-chevron-right"></i>
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="rinvenimenti-list">
<ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list">
<li>
Anacapri
<span class="icon is-small">
<i class="fa fa-plus"></i>
</span>
<ul id="rinv-anacapri-sub">
<li>
<a class="button" id="affresco_dame">
@ -188,8 +220,8 @@
</div>
</div>
<!-- Sites data modal -->
<div class="modal" id="site-data">
<div class="modal-background"></div>
<div class="modal" id="site-data" data-controller="modal" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div class="tabs is-centered">
<ul>
@ -232,19 +264,19 @@
<div class="data-tabs is-hidden" id="photos"></div>
<div class="data-tabs is-hidden" id="documents"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
</div>
<!-- Not conserved modal -->
<div class="modal" id="not-conser-data">
<div class="modal-background"></div>
<div class="modal" id="not-conser-data" data-controller="modal" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close"></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>
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
</div>
<!-- Not conserved modal -->
<div class="modal" id="finding-data">
<div class="modal-background"></div>
<div class="modal" id="finding-data" data-controller="modal" data-modal-target="modal">
<div class="modal-background" data-action="click->modal#close"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div class="tabs is-centered">
<ul>
@ -269,7 +301,7 @@
<div class="data-tabs" id="finding-sheet"></div>
<div class="data-tabs is-hidden" id="photos"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
</div>
<!-- Spherical photo modal -->
<div class="modal" id="spherical-modal">

15
webgis/js/controllers/menu_controller.js
View File

@ -1,17 +1,22 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['list', 'menu'];
static targets = ['list', 'menu', 'icon'];
toggleMenu(event) {
toggleMenu() {
/*
const target = event.currentTarget;
const id = target.getAttribute('data-id');
const icon = this.iconTargets.find(i => i.getAttribute('data-id') === id);
*/
this.menuTarget.classList.toggle('is-hidden');
//this.toggleIcon(icon);
//this.openList(`#${id}-list`);
}
this.openList(`#${id}-list`);
console.log(this.menuTarget);
close() {
this.menuTarget.classList.add('is-hidden');
}
openList(id) {

14
webgis/js/controllers/modal_controller.js Normal file
View File

@ -0,0 +1,14 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['close', 'modal'];
open() {
this.modalTarget.classList.add('is-active');
}
close() {
this.modalTarget.classList.remove('is-active');
}
}

7
webgis/js/gis.js
View File

@ -72,6 +72,7 @@ const MARKER_NAMES = {
'san_michele' : 'Villa San Michele',
'scala_fenicia' : 'Scala Fenicia',
'grotta_azzurra' : 'Grotta Azzurra',
'lopozzo' : 'Località Lo Pozzo',
},
};
@ -150,6 +151,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
archeo,
).addTo(map);
// TEMP!! Remove point for Lo Pozzo...
map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
// TODO Horrible?
return {map: map, sites: sitesGroup};
}
@ -295,6 +299,7 @@ GIS.initLayers = async function(map) {
let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
let layerScala = await this.loadLayer('scala_fenicia.geojson', optionsSiti, false);
let layerGrotta = await this.loadLayer('grotta_azzurra.geojson', optionsGrotta, false);
let layerLopozzo = await this.loadLayer('lopozzo.geojson', optionsSiti, false);
layerMater.id = 'matermania';
layerMaterArea.id = 'matermania_area';
@ -308,6 +313,7 @@ GIS.initLayers = async function(map) {
layerTiberio.id = 'tiberio';
layerScala.id = 'scala_fenicia';
layerGrotta.id = 'grotta_azzurra';
layerLopozzo.id = 'lopozzo';
let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxNativeZoom : 22,
@ -339,6 +345,7 @@ GIS.initLayers = async function(map) {
layerTiberio,
layerScala,
layerGrotta,
layerLopozzo
]);
const baseGroup = new L.LayerGroup([osmap]);
baseGroup.addTo(map);

2
webgis/js/icons.js
View File

@ -30,6 +30,6 @@ Icons.finding = L.icon(
}
);
Icons.camera = L.divIcon({className: 'fa fa-2x fa-camera'});
Icons.camera = L.divIcon({className: 'fa fa-camera'});
export default Icons;

8
webgis/js/index.js
View File

@ -2,6 +2,7 @@ import GIS from './gis.js';
import UI from './ui.js';
import { Application } from '@hotwired/stimulus';
import MenuController from './controllers/menu_controller.js';
import ModalController from './controllers/modal_controller.js';
document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers
@ -17,17 +18,14 @@ document.addEventListener('DOMContentLoaded', async () => {
GIS.toggleSpherical(map);
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
//UI.toggleMenu('siti', 'siti-list');
//UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
UI.toggleBurger('navbar-burger');
UI.sitesMenu('.menu-list', map, sites);
document.querySelector('#close-menu').addEventListener('click', () => {
document.querySelector('#menu').classList.add('is-hidden');
})
window.LMap = map;
});
function initStimulus() {
window.Stimulus = Application.start();
Stimulus.register("menu", MenuController);
Stimulus.register("modal", ModalController);
}

22
webgis/js/ui.js
View File

@ -106,8 +106,6 @@ UI.openSiteModal = async function (data, selector) {
for (let tab of dataTabs) {
tab.innerHTML = '';
}
//tabs.classList.remove('is-hidden');
let siteSheet = new SiteSheet();
siteSheet.siteData = data;
@ -161,12 +159,6 @@ UI.openSiteModal = async function (data, selector) {
});
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());
this.imageGallery('gallery-1', surveys);
this.imageGallery('gallery-2', photos);
@ -199,13 +191,6 @@ UI.openNotConserModal = async function (data, selector) {
});
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 {object} data The data retrieved from the DB to display as modal content
@ -268,12 +253,6 @@ UI.openFindingModal = async function (data, selector) {
}
});
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
@ -281,7 +260,6 @@ UI.openFindingModal = async function (data, selector) {
* @param {L.LayerGroup} sites
*/
UI.sitesMenu = function (menuListSel, map, sites) {
// Close menu if arrow button is clicked...
let markers = [];
map.eachLayer(layer => {