fix(position-landmark): contextual menu evolution

IGNF · Oct 2, 2024 · cb238c0 · cb238c0
1 parent 6c68ec6
commit cb238c0
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 34 deletions.
diff --git a/src/js/my-account/my-account-dom.js b/src/js/my-account/my-account-dom.js
@@ -399,9 +399,11 @@ let MyAccountDOM = {
 
     // Au clic sur le PR = l'afficher
     container.querySelector(`#landmark-basic-tools_ID_${landmarkId}`).addEventListener("click", () => {
-      if (!landmark.properties.visible) {
+      if (landmark.properties.visible) {
         this.toggleShowLandmark(landmark);
       }
+      container.classList.remove("invisible");
+      this.toggleShowLandmark(landmark);
     });
 
     if (!container) {

diff --git a/src/js/my-account/my-account.js b/src/js/my-account/my-account.js
@@ -585,6 +585,14 @@ class MyAccount {
     Globals.landmark.setId(landmark.id);
   }
 
+  /**
+   * Ouvre l'outil de création de point de repère pour le modifer à partir de son ID
+   * @param {Number} landmarkId
+   */
+  editLandmarkFromID(landmarkId) {
+    this.editLandmark(this.#getLandmarkFromID(landmarkId));
+  }
+
   /**
    * Partage l'itinéraire sous forme de fichier
    * @param {*} route
@@ -685,6 +693,14 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
     });
   }
 
+  /**
+   * Partage le point de repère à partir de son ID
+   * @param {Number} landmarkId
+   */
+  shareLandmarkFromID(landmarkId) {
+    this.shareLandmark(this.#getLandmarkFromID(landmarkId));
+  }
+
   /**
    * Exporte l'itinéraire sous forme d'un fichier
    * @param {*} route
@@ -795,6 +811,14 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
     });
   }
 
+  /**
+   * Exporte le point de repère à partir de son ID
+   * @param {Number} landmarkId
+   */
+  exportLandmarkFromID(landmarkId) {
+    this.exportLandmark(this.#getLandmarkFromID(landmarkId));
+  }
+
   /**
    * Affiche l'itinéraire s'il est caché, ou le cache s'il est affiché
    * @param {*} route
@@ -871,6 +895,26 @@ https://cartes-ign.ign.fr?lng=${landmark.geometry.coordinates[0]}&lat=${landmark
     return route;
   }
 
+  /**
+   * Récupère un PR via son ID
+   * @param {Number} landmarkId
+   * @returns route
+   */
+  #getLandmarkFromID(landmarkId) {
+    if (landmarkId === null) {
+      console.error("Null landmark ID");
+      return;
+    }
+    let landmark;
+    for (let i = 0; i < Globals.myaccount.landmarks.length; i++) {
+      landmark = Globals.myaccount.landmarks[i];
+      if (landmark.id === landmarkId) {
+        break;
+      }
+    }
+    return landmark;
+  }
+
   /**
    * Convertit une route telle qu'enregistrée dans le compte en geojson valide
    * @param {*} route

diff --git a/src/js/position.js b/src/js/position.js
@@ -12,6 +12,7 @@ import Globals from "./globals";
 import DomUtils from "./utils/dom-utils";
 import { Share } from "@capacitor/share";
 import { Toast } from "@capacitor/toast";
+import ActionSheet from "./action-sheet";
 
 import PopupUtils from "./utils/popup-utils";
 
@@ -155,12 +156,6 @@ class Position {
       `;
       htmlAdvanced = `
         <label id="position-landmark-show-advanced-tools" title="Plus d'outils" class="tools-layer-advanced"></label>
-        <div id="position-landmark-advanced-tools" class="tools-layer-advanced-menu">
-          <div id="position-landmark-share" class="tools-layer-share" title="Partager le point de repère">Partager</div>
-          <div id="position-landmark-edit" class="tools-layer-edit" title="Modifier le point de repère">Modifier</div>
-          <div id="position-landmark-export" class="tools-layer-export" title="Exporter le point de repère">Exporter</div>
-          <div id="position-landmark-remove" class="tools-layer-remove" title="Supprimer le point de repère'">Supprimer</div>
-        </div>
       `;
     }
 
@@ -327,33 +322,54 @@ class Position {
           landmarkId = parseInt(cl.split("-")[1]);
         }
       });
-      shadowContainer.getElementById("position-landmark-share").addEventListener("click", () => {
-        // ouverture du panneau Point de repère
-        document.getElementById(`landmark-share_ID_${landmarkId}`).click();
-      });
-      shadowContainer.getElementById("position-landmark-edit").addEventListener("click", () => {
-        closeSelf();
-        // ouverture du panneau Point de repère
-        document.getElementById(`landmark-edit_ID_${landmarkId}`).click();
-      });
-      shadowContainer.getElementById("position-landmark-export").addEventListener("click", () => {
-        // ouverture du panneau Point de repère
-        document.getElementById(`landmark-export_ID_${landmarkId}`).click();
-      });
-      let hasBeenClicked = false;
-      shadowContainer.getElementById("position-landmark-remove").addEventListener("click", () => {
-        if (!hasBeenClicked) {
-          Toast.show({
-            text: "Confirmez la suppression du point de repère",
-            duration: "short",
-            position: "bottom"
-          });
-          hasBeenClicked = true;
-        } else {
-          closeSelf();
-          Globals.myaccount.deleteLandmark(landmarkId);
-          hasBeenClicked = false;
-        }
+      shadowContainer.getElementById("position-landmark-show-advanced-tools").addEventListener("click", () => {
+        ActionSheet.show({
+          options: [
+            {
+              class: "tools-layer-share",
+              text: "Partager",
+              value: "share",
+            },
+            {
+              class: "tools-layer-edit",
+              text: "Modifier",
+              value: "edit",
+            },
+            {
+              class: "tools-layer-export",
+              text: "Exporter",
+              value: "export",
+            },
+            {
+              class: "tools-layer-remove confirm-needed",
+              text: "Supprimer",
+              value: "delete",
+              confirmCallback: () => {
+                Toast.show({
+                  text: "Confirmez la suppression du point de repère",
+                  duration: "short",
+                  position: "bottom"
+                });
+              }
+            },
+          ],
+          timeToHide: 50,
+        }).then( (value) => {
+          if (value === "share") {
+            Globals.myaccount.shareLandmarkFromID(landmarkId);
+          }
+          if (value === "edit") {
+            closeSelf();
+            Globals.myaccount.editLandmarkFromID(landmarkId);
+          }
+          if (value === "export") {
+            Globals.myaccount.exportLandmarkFromID(landmarkId);
+          }
+          if (value === "delete") {
+            closeSelf();
+            Globals.myaccount.deleteLandmark(landmarkId);
+          }
+        });
       });
     }
     shadowContainer.querySelector(".divPositionAdressOriginInfo").addEventListener("click", this.#showAdressInfoPopup.bind(this));