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

@@ -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;

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;

src/css/poi.css

@@ -20,6 +20,7 @@
 
 .divPOIDisplay {
     padding-bottom: 15px;
+    width: 100%;
 }
 
 

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;

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();
             }

src/js/elevation-line-control.js

@@ -159,7 +159,6 @@ class ElevationLineControl {
         }
       }
     };
-
     this.chart = new ChartJS(target, chartConfig);
   }
 

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 = `
       <div class="section">
         <label class="filterTitle">Lieux à afficher</label>
+        <div class="divPOIDisplay">
+          <span>Tout sélectionner</span>
+          <label class="toggleSwitch">
+            <input id="displayPOI-isochrone" class="toggleInput" type="checkbox" checked>
+            <span class="toggleSlider"></span>
+          </label>
+        </div>
+
         <div class="divIsochronePOIFilter">
           ${strPoiItems}
         </div>
@@ -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;
   },
 

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) {

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,
     }
   }
 };

src/js/map-interactivity/map-interactivity.js

@@ -89,6 +89,7 @@ class MapInteractivity {
       }
     }
     if (!Globals.interactivityIndicator.shown) {
+      this.map.on("click", this.handleInfoOnMap);
       return;
     }
 

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");

src/js/poi.js

@@ -135,9 +135,9 @@ class POI {
         checked = "checked";
       }
       return `
-            <label class="lblPOIFilterItem chkContainer" /* for="${values.id}-POIFilterItem" */ title="${values.name}">
+            <label class="lblPOIFilterItem chkContainer" for="${values.id}-POIFilterItem" title="${values.name}">
                 ${values.name}
-                <input /* id="${values.id}-POIFilterItem" */
+                <input id="${values.id}-POIFilterItem"
                     class="inputPOIFilterItem checkbox"
                     type="checkbox"
                     name="${values.id}"