From 2ee12b881cb2e90c5919cfb5f0216aa921209d68 Mon Sep 17 00:00:00 2001 From: "amaury.zarzelli" Date: Thu, 25 Jan 2024 17:44:03 +0100 Subject: [PATCH] fix(various) Back button not appearing after opening POI and position Alert user when forms are incomplete Fix calculation pre-fill when click from position menu Cant filter POI when isochrone mode Change interactivity style too much margin when safe area Interactivity not working anymore after click when not interactive Add "select all" for isochrone POI --- src/css/my-position.css | 4 +- src/css/nav.css | 4 +- src/css/poi.css | 1 + src/js/directions/directions-dom.js | 24 ++++++-- src/js/directions/directions.js | 1 + src/js/elevation-line-control.js | 1 - src/js/isochrone/isochrone-dom.js | 58 +++++++++++++++++++ src/js/isochrone/isochrone.js | 25 ++++++-- .../map-interactivity-styles.js | 4 +- src/js/map-interactivity/map-interactivity.js | 1 + src/js/nav.js | 20 +++---- src/js/poi.js | 4 +- src/js/position.js | 55 +++--------------- src/js/route-draw/route-draw.js | 1 - src/js/services/location.js | 3 + src/js/state.js | 8 ++- 16 files changed, 136 insertions(+), 78 deletions(-) diff --git a/src/css/my-position.css b/src/css/my-position.css index 0c90d7dc..c25f494a 100644 --- a/src/css/my-position.css +++ b/src/css/my-position.css @@ -48,7 +48,7 @@ margin-right: 5px; } .divPositionSectionAddress { - + text-align: left; } .lblPositionAddress { font-family: "Open Sans Bold"; @@ -203,7 +203,7 @@ .divLegendContainer { display: flex; } - + .divLegendDescription { margin-bottom: auto; margin-top: auto; diff --git a/src/css/nav.css b/src/css/nav.css index e46ddb4b..8a10ccf2 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -3,10 +3,10 @@ position: absolute; top: calc(100% - 78px - var(--safe-area-inset-bottom)); width: 100%; - height: calc(60px + var(--safe-area-inset-bottom)); + height: 60px ; font-size: 12px; background-color: white; - padding: 10px 0px 8px 0px; + padding: 10px 0px calc(8px + var(--safe-area-inset-bottom)) 0px; z-index: 3002; flex-direction: row; align-items: center; diff --git a/src/css/poi.css b/src/css/poi.css index fbc5d1b0..ca2a1cd7 100644 --- a/src/css/poi.css +++ b/src/css/poi.css @@ -20,6 +20,7 @@ .divPOIDisplay { padding-bottom: 15px; + width: 100%; } diff --git a/src/js/directions/directions-dom.js b/src/js/directions/directions-dom.js index 28330475..40f9da4d 100644 --- a/src/js/directions/directions-dom.js +++ b/src/js/directions/directions-dom.js @@ -1,4 +1,5 @@ import LoadingWhite from "../../css/assets/loading-white.svg"; +import { Toast } from '@capacitor/toast'; /** * DOM du contrôle du calcul d'itineraire @@ -91,19 +92,30 @@ let DirectionsDOM = { var points = document.getElementsByClassName("inputDirectionsLocations"); var start = points[0].dataset.coordinates; var end = points[points.length - 1].dataset.coordinates; - locations.push(start); + if (start) { + locations.push(start); + } for (let i = 1; i < points.length - 1; i++) { if (points[i].dataset.coordinates) { locations.push(points[i].dataset.coordinates); } } - locations.push(end); - + if (end) { + locations.push(end); + } + if (locations.length < 2) { + Toast.show({ + text: "Au moins 2 lieux sont nécessaires pour le calcul d'itinéraire", + duration: "long", + position: "bottom" + }); + return; + } // passer les valeurs au service self.compute({ - transport : transport, - computation : computation, - locations : locations + transport: transport, + computation: computation, + locations: locations }); return false; diff --git a/src/js/directions/directions.js b/src/js/directions/directions.js index 3854221b..d85230df 100644 --- a/src/js/directions/directions.js +++ b/src/js/directions/directions.js @@ -249,6 +249,7 @@ class Directions { padding: padding, }); } + this.elevation.target = document.getElementById("directions-elevationline"); this.elevation.setCoordinates(routeCoordinates); this.elevation.compute(); } diff --git a/src/js/elevation-line-control.js b/src/js/elevation-line-control.js index 60e21d86..adfec9e2 100644 --- a/src/js/elevation-line-control.js +++ b/src/js/elevation-line-control.js @@ -159,7 +159,6 @@ class ElevationLineControl { } } }; - this.chart = new ChartJS(target, chartConfig); } diff --git a/src/js/isochrone/isochrone-dom.js b/src/js/isochrone/isochrone-dom.js index 90432668..052abbd7 100644 --- a/src/js/isochrone/isochrone-dom.js +++ b/src/js/isochrone/isochrone-dom.js @@ -1,6 +1,8 @@ import DomUtils from "../dom-utils"; import LoadingWhite from "../../css/assets/loading-white.svg"; +import { Toast } from '@capacitor/toast'; + /** * DOM du contrôle du calcul d'isochrone * @mixin IsochroneDOM @@ -68,6 +70,14 @@ let IsochroneDOM = { strPoi = `
+
+ Tout sélectionner + +
+
${strPoiItems}
@@ -156,6 +166,7 @@ let IsochroneDOM = { this.dom.showLimitsChk = shadow.getElementById("showLimitsChk"); this.dom.showOutPoisChk = shadow.getElementById("showOutPoisChk"); this.dom.isochroneCompute = shadow.getElementById("isochroneCompute"); + this.dom.poiToggle = shadow.getElementById("displayPOI-isochrone"); // ajout des listeners principaux : // - le calcul @@ -216,6 +227,23 @@ let IsochroneDOM = { poisToDisplay[el.value] = el.checked; }); + if (!mode.value) { + Toast.show({ + text: "Ajoutez un temps ou une durée pour le calcul de la zone", + duration: "long", + position: "bottom" + }); + return; + } + if (!value) { + Toast.show({ + text: "Ajoutez un point de départ pour le calcul de la zone", + duration: "long", + position: "bottom" + }); + return; + } + // passer les valeurs au service self.compute({ transport: transport, @@ -241,6 +269,36 @@ let IsochroneDOM = { document.getElementById("isochroneModeValueDistance").className = "isochroneValueHidden"; }); + this.dom.poiToggle.addEventListener("change", (e) => { + const toggleChecked = e.target.checked; + document.querySelectorAll(".inputIsochroneFilterItem").forEach((el) => { + if (toggleChecked) { + el.checked = true; + } else { + el.checked = false; + } + }); + }); + document.querySelectorAll(".inputIsochroneFilterItem").forEach((el) => { + el.addEventListener("change", (e) => { + let allUnchecked = true; + let allChecked = true; + document.querySelectorAll(".inputPOIFilterItem").forEach((el) => { + if (el.checked) { + allUnchecked = false; + } else { + allChecked = false; + } + }); + if (allChecked) { + this.dom.poiToggle.checked = true; + } + if (allUnchecked) { + this.dom.poiToggle.checked = false; + } + }); + }); + return shadow; }, diff --git a/src/js/isochrone/isochrone.js b/src/js/isochrone/isochrone.js index 7415eef8..a7d7dcac 100644 --- a/src/js/isochrone/isochrone.js +++ b/src/js/isochrone/isochrone.js @@ -1,5 +1,6 @@ import IsochroneDOM from "./isochrone-dom"; import Globals from "../globals"; +import LayersGroup from '../layer-manager/layer-group'; // dependance : abonnement au event du module import Geocode from "../services/geocode"; @@ -85,6 +86,9 @@ class Isochrone { // bind this.onAddWayPoint = this.onAddWayPoint.bind(this); + // Isochrone déjà calculée ? + this.computed = false; + return this; } @@ -127,10 +131,10 @@ class Isochrone { delete filter["source-layer"]; } return { - id : source, - config : config, - filters : filters, - ids : ids + id: source, + config: config, + filters: filters, + ids: ids }; } @@ -301,6 +305,7 @@ class Isochrone { if (this.poi) { this.poi.ids.forEach( (id) => { + LayersGroup.addVisibilityByID(Globals.poi.id, id, true); if (settings.poisToDisplay[id.split(" ")[0]] && !settings.showPoisOutside) { this.map.setFilter(id, ["all", ["within", this.polygon], this.map.getFilter(id)]); } else if (!settings.poisToDisplay[id.split(" ")[0]]) { @@ -316,6 +321,8 @@ class Isochrone { Globals.currentScrollIndex = 0; Globals.menu.updateScrollAnchors(); this.__unsetComputeButtonLoading(); + this.interactive(false); + this.computed = true; } /** @@ -392,13 +399,21 @@ class Isochrone { Globals.searchResultMarker = null; } this.__unsetComputeButtonLoading(); + this.computed = false; + + document.querySelectorAll(".inputPOIFilterItem").forEach((el) => { + var layers = LayersGroup.getGroupLayers(Globals.poi.id).filter((layer) => { return layer.metadata.thematic === el.name }); + for (let i = 0; i < layers.length; i++) { + const element = layers[i]; + LayersGroup.addVisibilityByID(Globals.poi.id, element.id, el.checked); + } + }); } /** * activation du mode interaction * @param {*} status * @public - * @todo gerer le statut des POI osm sur l'affichage */ interactive(status) { if (status) { diff --git a/src/js/map-interactivity/map-interactivity-styles.js b/src/js/map-interactivity/map-interactivity-styles.js index 0ddd6306..b72530b4 100644 --- a/src/js/map-interactivity/map-interactivity-styles.js +++ b/src/js/map-interactivity/map-interactivity-styles.js @@ -31,7 +31,7 @@ const layers = { layout: {}, paint: { "fill-color": "#307CCD", - "fill-opacity": 0.4, + "fill-opacity": 0.15, } }, "polygon-outline": { @@ -42,7 +42,7 @@ const layers = { paint: { "line-color": "#307CCD", "line-opacity": 1, - "line-width": 3, + "line-width": 1, } } }; diff --git a/src/js/map-interactivity/map-interactivity.js b/src/js/map-interactivity/map-interactivity.js index 7ffd03a0..0eebd32c 100644 --- a/src/js/map-interactivity/map-interactivity.js +++ b/src/js/map-interactivity/map-interactivity.js @@ -89,6 +89,7 @@ class MapInteractivity { } } if (!Globals.interactivityIndicator.shown) { + this.map.on("click", this.handleInfoOnMap); return; } diff --git a/src/js/nav.js b/src/js/nav.js index 15e7dda1..974324c7 100644 --- a/src/js/nav.js +++ b/src/js/nav.js @@ -80,9 +80,6 @@ class MenuNavigation { * @param {*} id */ open(id) { - // HACK : on supprime l'interaction du calcul d'itineraire - // Globals.directions.interactive(false); - // on vide tous les panneaux var lstElements = DOM.$tabContainer.childNodes; for (let i = 0; i < lstElements.length; i++) { @@ -217,6 +214,7 @@ class MenuNavigation { Globals.currentScrollIndex = 1; break; case "position": + Globals.backButtonState = "position-" + previousBackState; DOM.$search.style.display = "none"; DOM.$filterPoiBtn.style.top = "calc(10px + var(--safe-area-inset-top))"; DOM.$backTopLeftBtn.classList.remove('d-none'); @@ -226,10 +224,12 @@ class MenuNavigation { // FIXME mettre en place une méthode sur la classe Search // ex. Globals.search.hide() DOM.$search.style.display = "none"; - DOM.$filterPoiBtn.style.top = "calc(10px + var(--safe-area-inset-top))"; + DOM.$filterPoiBtn.classList.add('d-none'); DOM.$sideBySideBtn.classList.add('d-none'); DOM.$backTopLeftBtn.classList.remove('d-none'); - Globals.isochrone.interactive(true); + if (!Globals.isochrone.computed) { + Globals.isochrone.interactive(true); + } Globals.interactivityIndicator.hardDisable(); Globals.currentScrollIndex = 1; break; @@ -246,6 +246,8 @@ class MenuNavigation { Globals.currentScrollIndex = 0; break; case "directionsResults": + DOM.$search.style.display = "none"; + DOM.$backTopLeftBtn.classList.remove('d-none'); DOM.$tabContainer.style.backgroundColor = "white"; Globals.interactivityIndicator.enable(); DOM.$tabContainer.style.removeProperty("height"); @@ -276,7 +278,6 @@ class MenuNavigation { DOM.$filterPoiBtn.style.top = "calc(10px + var(--safe-area-inset-top))"; DOM.$backTopLeftBtn.classList.remove('d-none'); DOM.$sideBySideBtn.classList.add('d-none'); - // Globals.directions.interactive(true); Globals.interactivityIndicator.hardDisable(); Globals.currentScrollIndex = 2; break; @@ -317,8 +318,8 @@ class MenuNavigation { DOM.$backTopLeftBtn.classList.add('d-none'); break; case "selectOnMapDirections": - case "selectOnMapIsochrone": DOM.$filterPoiBtn.classList.remove("d-none"); + case "selectOnMapIsochrone": DOM.$layerManagerBtn.classList.remove("d-none"); DOM.$mapCenter.classList.add("d-none"); DOM.$mapCenterMenu.classList.add("d-none"); @@ -415,7 +416,7 @@ class MenuNavigation { case "isochrone": // FIXME mettre en place une méthode sur la classe Searchs DOM.$search.style.display = "flex"; - DOM.$filterPoiBtn.style.removeProperty("top"); + DOM.$filterPoiBtn.classList.remove('d-none'); DOM.$backTopLeftBtn.classList.add('d-none'); DOM.$sideBySideBtn.classList.remove('d-none'); Globals.isochrone.clear(); @@ -480,7 +481,6 @@ class MenuNavigation { DOM.$backTopLeftBtn.classList.add('d-none'); DOM.$sideBySideBtn.classList.remove('d-none'); Globals.directions.clear(); - // Globals.directions.interactive(false); Globals.interactivityIndicator.enable(); break; default: @@ -552,11 +552,11 @@ class MenuNavigation { case "directionsResults": DOM.$directionsWindow.classList.remove("d-none"); Globals.backButtonState = 'directions'; // on revient sur le contrôle ! - // Globals.directions.interactive(true); this.#midScroll(); break; case "searchIsochrone": case "selectOnMapIsochrone": + DOM.$filterPoiBtn.classList.add('d-none'); DOM.$search.style.display = "none"; DOM.$backTopLeftBtn.classList.remove('d-none'); DOM.$isochroneWindow.classList.remove("d-none"); diff --git a/src/js/poi.js b/src/js/poi.js index 2710cb08..9eced6a6 100644 --- a/src/js/poi.js +++ b/src/js/poi.js @@ -135,9 +135,9 @@ class POI { checked = "checked"; } return ` -