fix(myaccount): better object id handling

Author: azarz

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

@@ -27,6 +27,7 @@ import Sortable from "sortablejs";
 import { kml, gpx } from "@tmcw/togeojson";
 import { DOMParser } from "@xmldom/xmldom";
 import GeoJsonToGpx from "@dwayneparton/geojson-to-gpx";
+import { v4 as uuidv4 } from "uuid";
 
 import LineSlice from "@turf/line-slice";
 import CleanCoords from "@turf/clean-coords";
@@ -80,76 +81,98 @@ class MyAccount {
 
     // itinéraires
     this.routes = [];
+    this.routesOrder = [];
 
     // points de repère
     this.landmarks = [];
+    this.landmarksOrder = [];
     this.compareLandmarks = [];
+    this.compareLandmarksOrder = [];
 
     // cartes téléchargées
     this.offlineMaps = [];
 
     this.#addSourcesAndLayers();
 
-    // Identifiant unique pour les itinéraires
-    this.lastRouteId = 0;
-    this.lastLandmarkId = 0;
-    this.lastCompareLandmarkId = 0;
-
-    // chargement des enregistrements stockés en local
-    let fileStoragePromise = fileStorage.list().then( (files) => {
-      files.forEach( (file) => {
-        if (file.id.startsWith("route-")) {
-          this.routes.push(file.data);
-        } else if (file.id.startsWith("landmark-")) {
-          this.landmarks.push(file.data);
-        } else if (file.id.startsWith("comparelandmark-")) {
-          this.compareLandmarks.push(file.data);
-        }
-      });
-      this.#updateSources();
-    });
-
     // REMOVEME : rétrocompatibilité des entités enregistrées : migration de préférences à fichier local (post-3.3.35)
     // récupération des itinéraires enregistrés en local
     let promiseRoutes = Preferences.get( { key: "savedRoutes"} ).then( (resp) => {
       if (resp.value) {
         var localRoutes = JSON.parse(resp.value);
-        this.routes = this.routes.concat(localRoutes.filter( route => !route.type));
-        this.#updateSources();
         localRoutes.forEach( (route) => {
           fileStorage.save(route, `route-${route.id}`);
         });
         Preferences.remove({ key: "savedRoutes" });
+        this.#updateRoutesOrder();
       }
     });
 
     // récupération des points de repère enregistrés en local
     let promiseLandmarks = Preferences.get( { key: "savedLandmarks"} ).then( (resp) => {
       if (resp.value) {
         var localLandmarks = JSON.parse(resp.value);
-        this.landmarks = this.landmarks.concat(localLandmarks);
-        this.#updateSources();
         localLandmarks.forEach( (landmark) => {
           fileStorage.save(landmark, `landmark-${landmark.id}`);
         });
         Preferences.remove({ key: "savedLandmarks" });
+        this.#updateLandmarksOrder();
       }
     });
 
     // récupération des points de repère comparer enregistrés en local
     let promiseCompareLandmarks = Preferences.get( { key: "savedCompareLandmarks"} ).then( (resp) => {
       if (resp.value) {
         var localCompareLandmarks = JSON.parse(resp.value);
-        this.compareLandmarks = this.compareLandmarks.concat(localCompareLandmarks);
-        this.#updateSources();
         localCompareLandmarks.forEach( (compareLandmark) => {
           fileStorage.save(compareLandmark, `comparelandmark-${compareLandmark.id}`);
         });
         Preferences.remove({ key: "savedCompareLandmarks" });
+        this.#updateCompareLandmarksOrder();
       }
     });
     // END REMOVEME
 
+    let fileStoragePromise;
+    let routeOrderStoragePromise;
+    let landmarkOrderStoragePromise;
+    let compareLandmarkOrderStoragePromise;
+
+    // REMOVEME
+    Promise.all([promiseCompareLandmarks, promiseLandmarks, promiseRoutes]).then( () => {
+    // END REMOVEME
+      // chargement des enregistrements stockés en local
+      fileStoragePromise = fileStorage.list().then( (files) => {
+        files.forEach( (file) => {
+          if (file.id.startsWith("route-")) {
+            this.routes.push(file.data);
+          } else if (file.id.startsWith("landmark-")) {
+            this.landmarks.push(file.data);
+          } else if (file.id.startsWith("comparelandmark-")) {
+            this.compareLandmarks.push(file.data);
+          }
+        });
+      });
+
+      // chargement de l'ordre des routes, landmarks et compareLandmarks
+      routeOrderStoragePromise = Preferences.get( { key: "myaccount_routes_order"} ).then( (resp) => {
+        if (resp.value) {
+          this.routesOrder = JSON.parse(resp.value);
+        }
+      });
+      landmarkOrderStoragePromise = Preferences.get( { key: "myaccount_landmarks_order"} ).then( (resp) => {
+        if (resp.value) {
+          this.landmarksOrder = JSON.parse(resp.value);
+        }
+      });
+      compareLandmarkOrderStoragePromise = Preferences.get( { key: "myaccount_comparelandmarks_order"} ).then( (resp) => {
+        if (resp.value) {
+          this.compareLandmarksOrder = JSON.parse(resp.value);
+        }
+      });
+    // REMOVEME
+    });
+    // END REMOVEME
+
     this.map.loadImage(LandmarkIconSaved).then((image) => {
       this.map.addImage("landmark-icon-saved", image.data);
     });
@@ -176,23 +199,16 @@ class MyAccount {
     });
 
     // récupération des infos et rendu graphique
-    // REMOVE promiseCompareLandmarks, promiseLandmarks, promiseRoutes
-    Promise.all([this.compute(), fileStoragePromise, promiseCompareLandmarks, promiseLandmarks, promiseRoutes, Globals.offlineMaps.loadPromise]).then(() => {
-      // Ajout d'identifiant unique aux routes
-      this.routes.forEach((route) => {
-        route.id = this.lastRouteId;
-        this.lastRouteId++;
-      });
-      // Ajout d'identifiant unique aux landmarks
-      this.landmarks.forEach((landmark) => {
-        landmark.id = this.lastLandmarkId;
-        this.lastLandmarkId++;
-      });
-      // Ajout d'identifiant unique aux compareLandmarks
-      this.compareLandmarks.forEach((compareLandmark) => {
-        compareLandmark.id = this.lastCompareLandmarkId;
-        this.lastCompareLandmarkId++;
-      });
+    Promise.all([
+      this.compute(), fileStoragePromise,
+      routeOrderStoragePromise, landmarkOrderStoragePromise, compareLandmarkOrderStoragePromise,
+      Globals.offlineMaps.loadPromise,
+    ]).then(() => {
+      // Mise en ordre des routes, landmarks et compareLandmarks
+      jsUtils.sortArrayByAnotherArray(this.routes, this.routesOrder, "id");
+      jsUtils.sortArrayByAnotherArray(this.landmarks, this.landmarksOrder, "id");
+      jsUtils.sortArrayByAnotherArray(this.compareLandmarks, this.compareLandmarksOrder, "id");
+
       this.render();
       this.#listeners();
       this.#updateSources();
@@ -626,17 +642,16 @@ class MyAccount {
    * @param {*} drawRouteSaveOptions
    */
   addRoute(drawRouteSaveOptions) {
-    if (typeof drawRouteSaveOptions.id !== "undefined" && drawRouteSaveOptions.id >= 0) {
+    if (typeof drawRouteSaveOptions.id === "undefined" || drawRouteSaveOptions.id < 0) {
+      drawRouteSaveOptions.id = uuidv4();
+      this.routes.unshift(drawRouteSaveOptions);
+    } else {
       for (let i = 0; i < this.routes.length; i++) {
         if (this.routes[i].id === drawRouteSaveOptions.id){
           this.routes[i] = drawRouteSaveOptions;
           break;
         }
       }
-    } else {
-      drawRouteSaveOptions.id = this.lastRouteId;
-      this.lastRouteId++;
-      this.routes.unshift(drawRouteSaveOptions);
     }
     fileStorage.save(drawRouteSaveOptions, `route-${drawRouteSaveOptions.id}`);
     this.__updateAccountRoutesContainerDOMElement(this.routes);
@@ -669,18 +684,17 @@ class MyAccount {
    * @param {*} landmarkGeojson
    */
   addLandmark(landmarkGeojson) {
-    if (typeof landmarkGeojson.id !== "undefined" && landmarkGeojson.id >= 0) {
+    if (typeof landmarkGeojson.id === "undefined" || landmarkGeojson.id < 0) {
+      landmarkGeojson = JSON.parse(JSON.stringify(landmarkGeojson));
+      landmarkGeojson.id = uuidv4();
+      this.landmarks.unshift(landmarkGeojson);
+    } else {
       for (let i = 0; i < this.landmarks.length; i++) {
         if (this.landmarks[i].id === landmarkGeojson.id){
           this.landmarks[i] = JSON.parse(JSON.stringify(landmarkGeojson));
           break;
         }
       }
-    } else {
-      landmarkGeojson = JSON.parse(JSON.stringify(landmarkGeojson));
-      landmarkGeojson.id = this.lastLandmarkId;
-      this.lastLandmarkId++;
-      this.landmarks.unshift(landmarkGeojson);
     }
     fileStorage.save(landmarkGeojson, `landmark-${landmarkGeojson.id}`);
     this.__updateAccountLandmarksContainerDOMElement(this.landmarks);
@@ -692,18 +706,17 @@ class MyAccount {
    * @param {*} compareLandmarkGeojson
    */
   addCompareLandmark(compareLandmarkGeojson) {
-    if (typeof compareLandmarkGeojson.id !== "undefined" && compareLandmarkGeojson.id >= 0) {
+    if (typeof compareLandmarkGeojson.id === "undefined" || compareLandmarkGeojson.id < 0) {
+      compareLandmarkGeojson = JSON.parse(JSON.stringify(compareLandmarkGeojson));
+      compareLandmarkGeojson.id = uuidv4();
+      this.compareLandmarks.unshift(compareLandmarkGeojson);
+    } else {
       for (let i = 0; i < this.compareLandmarks.length; i++) {
         if (this.compareLandmarks[i].id === compareLandmarkGeojson.id){
           this.compareLandmarks[i] = JSON.parse(JSON.stringify(compareLandmarkGeojson));
           break;
         }
       }
-    } else {
-      compareLandmarkGeojson = JSON.parse(JSON.stringify(compareLandmarkGeojson));
-      compareLandmarkGeojson.id = this.lastCompareLandmarkId;
-      this.lastCompareLandmarkId++;
-      this.compareLandmarks.unshift(compareLandmarkGeojson);
     }
     fileStorage.save(compareLandmarkGeojson, `comparelandmark-${compareLandmarkGeojson.id}`);
     this.__updateAccountCompareLandmarksContainerDOMElement(this.compareLandmarks);
@@ -784,6 +797,7 @@ class MyAccount {
     const route = this.routes[oldIndex];
     this.routes.splice(oldIndex, 1);
     this.routes.splice(newIndex, 0, route);
+    this.#updateRoutesOrder();
     this.#updateSources();
   }
 
@@ -796,6 +810,7 @@ class MyAccount {
     const landmark = this.landmarks[oldIndex];
     this.landmarks.splice(oldIndex, 1);
     this.landmarks.splice(newIndex, 0, landmark);
+    this.#updateLandmarksOrder();
     this.#updateSources();
   }
 
@@ -808,6 +823,7 @@ class MyAccount {
     const compareLandmark = this.compareLandmarks[oldIndex];
     this.compareLandmarks.splice(oldIndex, 1);
     this.compareLandmarks.splice(newIndex, 0, compareLandmark);
+    this.#updateCompareLandmarksOrder();
     this.#updateSources();
   }
 
@@ -820,6 +836,36 @@ class MyAccount {
     Globals.offlineMaps.changeMapIndex(offlineMapId, oldIndex, newIndex);
   }
 
+  /**
+   * Met à jour l'ordre d'affichage des routes
+   */
+  #updateRoutesOrder() {
+    this.routesOrder = [];
+    this.routes.forEach((route) => {
+      this.routesOrder.push(route.id);
+    });
+  }
+
+  /**
+   * Met à jour l'ordre d'affichage des points de repère
+   */
+  #updateLandmarksOrder() {
+    this.landmarksOrder = [];
+    this.landmarks.forEach((landmark) => {
+      this.landmarksOrder.push(landmark.id);
+    });
+  }
+
+  /**
+   * Met à jour l'ordre d'affichage des points de repère Comparer
+   */
+  #updateCompareLandmarksOrder() {
+    this.compareLandmarksOrder = [];
+    this.compareLandmarks.forEach((compareLandmark) => {
+      this.compareLandmarksOrder.push(compareLandmark.id);
+    });
+  }
+
   /**
    * Ouvre l'outil de tracé d'itinéraire pour modifier un itinéraire
    * @param {*} route
@@ -1886,6 +1932,19 @@ ${props.text}`,
       type: "FeatureCollection",
       features: this.compareLandmarks,
     });
+
+    Preferences.set({
+      key: "myaccount_routes_order",
+      value: JSON.stringify(this.routesOrder),
+    });
+    Preferences.set({
+      key: "myaccount_landmarks_order",
+      value: JSON.stringify(this.landmarksOrder),
+    });
+    Preferences.set({
+      key: "myaccount_comparelandmarks_order",
+      value: JSON.stringify(this.compareLandmarksOrder),
+    });
   }
 
   /**

src/js/utils/js-utils.js

@@ -31,6 +31,14 @@ let jsUtils = {
     document.body.appendChild(element);
     element.click();
     document.body.removeChild(element);
+  },
+
+  sortArrayByAnotherArray(arrToSort, arrReference, property) {
+    arrToSort.sort( (a, b) => {
+      let indexA = arrReference.findIndex( item => item === a[property] );
+      let indexB = arrReference.findIndex( item => item === b[property] );
+      return indexA - indexB;
+    });
   }
 };