feat: add possibility to follow routes

Author: azarz

src/css/layer-switcher.css

@@ -174,6 +174,7 @@ div[id^="opacity-middle-div_ID_"] {
 .tools-layer-visibility,
 .tools-layer-info,
 .tools-layer-share,
+.tools-layer-follow,
 .tools-layer-edit,
 .tools-layer-export,
 .tools-layer-remove {

src/html/index.html

@@ -41,6 +41,7 @@
               <%= require('html-loader!./tabs/isochroneWindow.html').default %>
               <%= require('html-loader!./tabs/routeDrawWindow.html').default %>
               <%= require('html-loader!./tabs/routeDrawSaveWindow.html').default %>
+              <%= require('html-loader!./tabs/routeFollowWindow.html').default %>
               <%= require('html-loader!./tabs/positionWindow.html').default %>
               <%= require('html-loader!./tabs/informationsWindow.html').default %>
               <%= require('html-loader!./tabs/poiWindow.html').default %>

src/html/tabs/routeFollowWindow.html

@@ -0,0 +1,8 @@
+<div class="d-none" id="routeFollowWindow">
+  Suivi de l'itinéraire.
+  <p class="d-none notFollowAltert">VOUS VOUS ELOIGNEZ DE L'ITINERAIRE</p>
+  <button class="recenter">Recentrer</button>
+  <p>Temps restant estimé : <span class="remainingTime"></span></p>
+  <p>Distance restante : <span class="remainingDist"></span></p>
+  <p>Dénivelé positif restant : <span class="remainingDplus"></span></p>
+</div>

src/js/controls.js

@@ -30,6 +30,8 @@ import LocationLayers from "./services/location-styles";
 // TODO: activate
 // import ImmersiveNotifications from "./immersive-notifications";
 
+import RouteFollow from "./route-follow";
+
 /**
  * Ajout des contrôle à la fin du chargement de la carte
  * @see maplibregl.ScaleControl
@@ -149,6 +151,9 @@ const addControls = () => {
     Globals.signalement = new Signalement(map, {});
     Globals.signalementOSM = new SignalementOSM(map, {});
 
+    // suivi d'itinéraire
+    Globals.routeFollow = new RouteFollow(map, {}, true);
+
     // points de repère
     Globals.landmark = new Landmark(map, {
       // callback sur l'ouverture / fermeture du panneau

src/js/dom.js

@@ -76,6 +76,7 @@ const $signalementOSMWindow = document.getElementById("signalementOSMWindow");
 const $landmarkWindow = document.getElementById("landmarkWindow");
 const $compareLandmarkWindow = document.getElementById("compareLandmarkWindow");
 const $offlineMapsWindow = document.getElementById("offlineMapsWindow");
+const $routeFollowWindow = document.getElementById("routeFollowWindow");
 
 export default {
   $search,
@@ -138,4 +139,5 @@ export default {
   $createCompareLandmarkBtn,
   $compareLandmarkWindow,
   $offlineMapsWindow,
+  $routeFollowWindow,
 };

src/js/globals.js

@@ -108,6 +108,9 @@ let immersiveNotifications = null;
 // Global control 3d
 let threeD = null;
 
+// Global control route follow
+let routeFollow = null;
+
 // Global flag: is the device connected to the internet?
 let online = (await Network.getStatus()).connected;
 
@@ -198,4 +201,5 @@ export default {
   immersiveNotifications,
   newPlaceNotifEnabled,
   threeD,
+  routeFollow,
 };

src/js/my-account/my-account-dom.js

@@ -325,6 +325,11 @@ let MyAccountDOM = {
             text: "Télecharger le plan",
             value: "download",
           },
+          {
+            class: "tools-layer-follow",
+            text: "Suivre",
+            value: "follow",
+          },
           {
             class: "tools-layer-share",
             text: "Partager",
@@ -383,6 +388,9 @@ let MyAccountDOM = {
         if (value === "download") {
           this.downloadRoute(route);
         }
+        if (value === "follow") {
+          this.followRoute(route);
+        }
       });
     });
 

src/js/my-account/my-account.js

@@ -797,6 +797,14 @@ class MyAccount {
    * @param {*} route
    */
   downloadRoute(route) {
+    if (!Globals.online) {
+      Toast.show({
+        text: "Fonctionnalité indisponible en mode hors ligne.",
+        duration: "long",
+        position: "bottom"
+      });
+      return;
+    }
     let coordinates = [];
     route.data.steps.forEach((step) => {
       coordinates = coordinates.concat(step.geometry.coordinates);
@@ -874,6 +882,54 @@ class MyAccount {
     Globals.routeDraw.showDetails();
   }
 
+  /**
+   * Ouvre le suivi d'itinéraire
+   * @param {*} route
+   */
+  followRoute(route) {
+    let steps = JSON.parse(JSON.stringify(route.data.steps));
+    const coords = [];
+    steps.forEach( (step) => {
+      coords.push(step.geometry.coordinates);
+    });
+    const dissolvedCoords = gisUtils.geoJsonMultiLineStringCoordsToSingleLineStringCoords(coords);
+
+    const routeLine = {
+      type: "Feature",
+      geometry: {
+        type: "LineString",
+        coordinates: dissolvedCoords,
+      },
+      properties: {
+        distance: route.data.distance,
+        duration: route.data.duration,
+      },
+    };
+    Globals.routeFollow.setData({
+      routeLine: routeLine,
+      elevations: route.data.elevationData.elevationData,
+    });
+    this.hide();
+    Globals.routeFollow.show();
+  }
+
+  /**
+   * Ouvre le suivi d'itinéraire à partir de son ID
+   * @param {Number} routeId
+   */
+  followRouteFromID(routeId) {
+    try {
+      this.followRoute(this.#getRouteFromID(routeId));
+    } catch (e) {
+      console.warn(e);
+      Toast.show({
+        text: "L'itinéraire n'a pas pu être ouvert.",
+        duration: "short",
+        position: "bottom"
+      });
+    }
+  }
+
   /**
    * Ouvre l'outil de création de point de repère pour le modifer
    * @param {*} landmark

src/js/nav.js

@@ -137,6 +137,13 @@ class MenuNavigation {
     // y'a t il des particularités sur l'ouverture du panneau demandé ?
     var isSpecific = false;
     switch (id) {
+    case "routeFollow":
+      DOM.$search.classList.add("d-none");
+      DOM.$filterPoiBtn.classList.add("higher");
+      DOM.$layerManagerBtn.classList.add("higher");
+      DOM.$backTopLeftBtn.classList.remove("d-none");
+      Globals.currentScrollIndex = 2;
+      break;
     case "offlineMaps":
       DOM.$search.classList.add("d-none");
       DOM.$filterPoiBtn.classList.add("d-none");
@@ -442,6 +449,13 @@ class MenuNavigation {
     var isSpecific = false;
     var isFinished = false; // hack pour search !
     switch (id) {
+    case "routeFollow":
+      Globals.routeFollow.disable();
+      DOM.$search.classList.remove("d-none");
+      DOM.$filterPoiBtn.classList.remove("higher");
+      DOM.$layerManagerBtn.classList.remove("higher");
+      DOM.$backTopLeftBtn.classList.add("d-none");
+      break;
     case "offlineMaps":
       DOM.$search.classList.remove("d-none");
       DOM.$filterPoiBtn.classList.remove("d-none");