UI changes (part 1)

2024-09-27 16:13:21 +02:00 · 2024-09-27 16:13:21 +02:00 · 3ca23381fb
commit 3ca23381fb
parent f6883c3502
6 changed files with 102 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -3,17 +3,19 @@
 <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
-    <script src="js/vendor/leaflet/dist/leaflet.js"></script>
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
+    <link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
+    <script src="js/vendor/leaflet/dist/leaflet.js"></script>
+    <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
    <script src="js/index.js" type="module"></script>
-    <title>Carta Archeologica di Capri</title>
+    <title>WebGIS Isola di Capri</title>
 </head>
 <body>
    <nav class="navbar mb-2" role="navigation">
        <div class="navbar-brand">
            <span class="navbar-item is-size-3">
-                Carta archeologica di Capri
+                WebGIS Isola di Capri
            </span>
            <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
                <span aria-hidden="true"></span>
@ -23,13 +25,15 @@
            </a>
        </div>
        <hr class="navbar-divider">
-        <div class="navbar-menu ml-3" id="nav-menu">
+        <div class="navbar-menu ml-3 container is-align-items-center is-justify-content-center" id="nav-menu">
            <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
                <i class="fa fa-list mr-2"></i> Siti indagati
            </button>
+            <button class="navbar-item is-size-5 is-white" title="Informazioni sul progetto" id="progetto">
+                <i class="fa fa-info-circle mr-2"></i> Progetto
+            </button>
        </div>
        <div class="navbar-end">
-            <a class="navbar-item" href="about.html" class="btn btn-link" title="About">About</a>
        </div>
    </nav>
    <!-- TODO Loader -->
@ -91,11 +95,34 @@
            <div id="map"></div>
        </div>
    </div>
-    <div class="modal">
+    <!-- Sites data modal -->
+    <div class="modal" id="site-data">
        <div class="modal-background"></div>
        <div class="modal-content has-background-white">
        </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>
+        <div class="modal-card content has-background-white panel">
+            <header class="modal-card-head">
+                <h1 class="modal-card-title has-text-centered"><i class="fa fa-info-circle mr-2"></i> Il progetto</h1>
+                <button class="delete" aria-label="close"></button>
+            </header>
+            <section class="modal-card-body">
+                <p class="p-2 mt-2 mb-2 panel-block is-size-5">
+                    construct digital franchise table Legba concrete neural urban soul-delay industrial grade rebar. 3D-printed post- receding savant assault table nodality realism knife tiger-team augmented reality. artisanal tower advert man hotdog city network meta- artisanal euro-pop rifle.
+                    -ware chrome artisanal shoes cartel -space face forwards Kowloon range-rover office Tokyo. crypto- sub-orbital monofilament crypto- soul-delay engine range-rover shanty town post- crypto- camera. stimulate tattoo garage car savant silent youtube post- motion wristwatch -space.
+                    drone math- Tokyo sunglasses courier knife sign systemic decay kanji digital. numinous semiotics Tokyo assassin sign nano- 8-bit grenade tank-traps carbon sub-orbital. singularity network bridge drugs voodoo god franchise urban towards RAF neon girl.
+                </p>
+            </section>
+            <footer class="modal-card-foot">
+                <div class="buttons">
+                    <button class="button">Chiudi</button>
+                </div>
+            </footer>
+        </div>
+    </div>
 </body>
 </html>
--- a/js/gis.js
+++ b/js/gis.js
@ -92,10 +92,13 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
    L.control.layers(
            baseMap,
            archeo,
-            {collapsed: false}
        )
        .addTo(map);

+    // Add scale and ruler controls
+    L.control.scale({imperial: false}).addTo(map);
+    L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
+
    sitesGroup.eachLayer(async layer => {
        const fromStorage = localStorage.getItem(layer.id);
        let data = {};
@ -125,7 +128,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
                .openTooltip();
            
            if (typeof data === 'object') {
-                marker.on('click', () => UI.openModal(data));
+                marker.on('click', () => UI.openModal(data, '#site-data'));
            }
        }
    });
@ -133,6 +136,41 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
    // TODO Horrible?
    return {map: map, sites: sitesGroup};
 }
+/*
+GIS._prepareLayers = async function(layer) {
+    const fromStorage = localStorage.getItem(layer.id);
+    let data = {};
+    let coords = layer.getBounds().getCenter();
+
+    if (fromStorage !== 'undefined') {
+        try {
+            data = JSON.parse(fromStorage);
+            const lat = data?.lat ?? coords[0];
+            const lon = data?.lon ?? coords[1];
+            coords = [lat, lon];
+        } catch (error) {
+            console.log(error);
+        }
+    } else {
+        data = await GIS._fetchData(layer.id);
+    }
+
+    // TODO: terrible!
+    if (!layer.id.includes('area')) {
+        const marker = L.marker(coords)
+            .addTo(map)
+            .bindTooltip(
+                Object.keys(archeo).find(k => archeo[k] === layer)
+                    .replace(/\s\(.*$/, '')
+            )
+            .openTooltip();
+        
+        if (typeof data === 'object') {
+            marker.on('click', () => UI.openModal(data, '#site-data'));
+        }
+    }
+}
+*/
 /**
 * Adds layers to map and returns an object
 * with {baseMap, archeoLayers, sitesLayerGroup}
--- a/js/index.js
+++ b/js/index.js
@ -9,6 +9,7 @@ document.addEventListener('DOMContentLoaded', async () => {
    UI.toggleMenu('siti');
    UI.toggleBurger('navbar-burger');
    UI.sitesMenu('.menu-list', map, sites);
+    UI.projectInfo('#project-info');

    // TEMP
    document.querySelector('.dropdown-trigger').addEventListener('click', function() {
--- a/js/package.json
+++ b/js/package.json
@ -5,6 +5,7 @@
  "author": "Nicolò P.",
  "license": "GPLv3",
  "dependencies": {
+    "@kalisio/leaflet-graphicscale": "^1.0.0",
    "bulma": "^1.0.1",
    "fontawesome-free": "^1.0.4",
    "leaflet": "^1.9.4",
--- a/js/ui.js
+++ b/js/ui.js
@ -75,9 +75,10 @@ UI.toggleMenu = function (triggerId) {
 * Open a modal with DB 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) {
-	const modal = document.querySelector('.modal');
+UI.openModal = async function (data, selector) {
+	const modal = document.querySelector(selector);

 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
@ -112,6 +113,25 @@ UI.openModal = async function (data) {
 	this.imageGallery('gallery-1', data.surveys);
 	this.imageGallery('gallery-2', data.photos);
 }
+/**
+ * Open a modal with project info
+ * @param {string} selector The modal selector to open project info
+ */
+UI.projectInfo = function (selector) {
+	const modal = document.querySelector(selector);
+
+	document.querySelector('#progetto').addEventListener('click', () => {
+		modal.classList.add('is-active');
+		const closeIcon = modal.querySelector('.delete');
+		const modalBg = modal.querySelector('.modal-background');
+		const closeBtn = modal.querySelector('.buttons > .button');
+		const closeModal = () => modal.classList.remove('is-active');
+		// Close modal when clicking either on the X button or on the background
+		closeBtn.addEventListener('click', () => closeModal());
+		closeIcon.addEventListener('click', () => closeModal());
+		modalBg.addEventListener('click', () => closeModal());
+	});
+}
 /**
 * @param {string} menuListSel Menu list selector
 * @param {L.Map} map
--- a/js/yarn.lock
+++ b/js/yarn.lock
@ -2,6 +2,11 @@
 # yarn lockfile v1


+"@kalisio/leaflet-graphicscale@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@kalisio/leaflet-graphicscale/-/leaflet-graphicscale-1.0.0.tgz#5a163e01805208b08ddafd9301e6ad0d4c603e51"
+  integrity sha512-iy42jngdr8c+9iymJ+TCRmotYjcRAHz+4V1OXhuDt4vy49dYjsCpeYOi27m6UOWrSkwNLqPkn2q0OXXYVhutUg==
+
 bulma@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"