feat(osm-poi): use notes API and new form for user anomaly (#116)

.env.example

@@ -1,5 +1,6 @@
 GPF_key=mykey
 signalement_url=toto
+osm_bearer_token=toto
 client_id_admin=toto
 client_secret_admin=tutu
 client_id_user=toto

.github/workflows/android-deploy.yml

@@ -18,6 +18,7 @@ jobs:
         run: |
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
+          echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/ios-deploy.yml

@@ -23,6 +23,7 @@ jobs:
         run: |
           echo "GPF_key=${{ secrets.GPF_key }}" > .env
           echo "signalement_url=${{ secrets.SIGNALEMENT_URL }}" >> .env
+          echo "osm_bearer_token=${{ secrets.OSM_BEARER_TOKEN }}" >> .env
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

src/css/signalement.css

@@ -8,6 +8,17 @@
   color: var(--dark-green);
   text-decoration: underline;
 }
+
+#signalementOSMWindow a {
+  font-size: 15px;
+  margin-top: 20px;
+  display: block;
+}
+
+#signalementOsmDone > .signalementText {
+  font-size: 15px;
+}
+
 #signalementOSMWindow a::after,
 #signalementWindow a::after {
   content: "";

src/html/tabs/signalementOSMWindow.html

@@ -1,11 +1,28 @@
 <div class="d-none" id="signalementOSMWindow">
-  <div>
+  <div id="signalementOsmMain">
     <p class="signalementTitle">Donnée OpenStreetMap</p>
     <p class="signalementText">
-      Cette donnée provient d’OpenStreetMap. L’application vous permettra bientôt de faire un signalement.
+      Cette donnée provient d’OpenStreetMap. Le forumlaire ci-dessous permet de créer un signalement (note) auprès de la communauté, identifié comme provenant de l'application Cartes IGN.
     </p>
+    <form class="signalementForm">
+      <div class="dsign-form-element">
+        <input type="text" id="signalement-osm-title" name="signalement-title" class="signalement-input-text" placeholder=" " title="Titre du signalement" required="">
+        <label class="dsign-form-label">Titre</label>
+      </div>
+      <div class="textarea-label">Donnez un titre à votre signalement</div>
+      <div class="dsign-form-element">
+        <textarea id="signalement-osm-description" name="signalement-description" class="signalement-textarea" title="Description" required="" placeholder=" "></textarea>
+        <label class="dsign-form-label">Description</label>
+      </div>
+      <div class="textarea-label">Explicitez votre signalement de façon la plus détaillée possible</div>
+      <div class="signalement-submit">Valider</div>
+    </form>
+  </div>
+  <div id="signalementOsmDone" class="d-none">
     <p class="signalementText">
-      <a href="https://www.openstreetmap.org/note/new#map=19/48.69975/2.60581" target="_blank" title="Contribuer à OpenStreetMap" id="osmNoteLink">Écrire une note sur OpenStreetMap</a>
+      Votre signalement a bien été créé dans la communauté OSM. Pour le retrouver, cliquez sur le lien suivant.
     </p>
+    <a id="osmNoteUrl" href="https://www.openstreetmap.org/note/1" target="_blank" title="Lien vers mon signalement OpenStreetMap">Mon signalement dans OpenStreetMap</a>
   </div>
+
 </div>

src/html/tabs/signalementWindow.html

@@ -13,7 +13,7 @@
     <form class="signalementForm">
       <p class="signalementTitle">Saisir un signalement</p>
       <div class="dsign-form-element">
-        <input type="text" id="signalement-title" name="signalement-title" class="signalement-input-text" placeholder=" " title="Nom du signalement" required="">
+        <input type="text" id="signalement-title" name="signalement-title" class="signalement-input-text" placeholder=" " title="Titre du signalement" required="">
         <label class="dsign-form-label">Titre</label>
       </div>
       <div class="textarea-label">Donnez un titre à votre signalement</div>

src/js/position.js

@@ -289,7 +289,8 @@ class Position {
         // ouverture du panneau Signalement
         if (this.options.openSignalCbk) {
           if (type === "osm") {
-            Globals.signalementOSM.setLocation(coordinates);
+            Globals.signalementOSM.data.poiName = this.#getTrueHeader().split("\n")[0];
+            Globals.signalementOSM.data.location = coordinates;
             this.options.openSignalOSMCbk();
           } else {
             this.options.openSignalCbk();

src/js/signalement-osm.js

@@ -6,8 +6,12 @@
 
 import Globals from "./globals";
 
+import { Toast } from "@capacitor/toast";
+
+import LoadingWhite from "../css/assets/loading-white.svg";
+
 /**
- * Permet d'effectuer un signalement d'anomalie sur les données
+ * Permet de créer une Note OpenStreetMap depuis un POI OSM
  */
 class SignalementOSM {
   /**
@@ -20,17 +24,127 @@ class SignalementOSM {
     this.options = options || {
     };
 
+    this.target = this.options.target || document.getElementById("signalementOSMWindow");
+
     // carte
     this.map = map;
+    this.dom = {
+      title: null,
+      description: null,
+      submitButton: null,
+    };
     this.data = {
+      title: null,
+      description: null,
       location: null,
+      poiName: null,
     };
+
+    this.url = this.options.url || "https://api.openstreetmap.org/api/0.6/notes.json";
+    this.#render();
+    this.#listeners();
     return this;
   }
 
-  setLocation(location) {
-    this.data.location = location;
-    document.getElementById("osmNoteLink").href = `https://www.openstreetmap.org/note/new#map=19/${location.lat}/${location.lon}`;
+  /**
+   * Récupération du dom
+   */
+  #render() {
+    if (!this.target) {
+      console.warn();
+      return;
+    }
+    this.dom = {
+      title: this.target.querySelector("#signalement-osm-title"),
+      description: this.target.querySelector("#signalement-osm-description"),
+      submitButton: this.target.querySelector(".signalement-submit"),
+    };
+  }
+
+  /**
+   * Ajout des listeners
+   */
+  #listeners() {
+    this.dom.submitButton.addEventListener("click", () => {
+      this.data = {
+        title: this.dom.title.value,
+        description: this.dom.description.value,
+        location: this.data.location,
+        poiName: this.data.poiName,
+      };
+      if (!this.data.title || !this.data.description) {
+        Toast.show({
+          text: "Merci de remplir tous les champs du formulaire",
+          duration: "long",
+          position: "bottom"
+        });
+        return;
+      }
+      if (!this.data.location) {
+        Toast.show({
+          text: "Le signalement ne peut se faire qu'à partir d'un lieu",
+          duration: "long",
+          position: "bottom"
+        });
+        console.warn("Signalement sans lieu !");
+        return;
+      }
+      this.dom.submitButton.style.pointerEvents = "none";
+      this.dom.submitButton.style.backgroundImage = "url(" + LoadingWhite + ")";
+      this.dom.submitButton.style.color = "#0000";
+      this.#send().then( (response) => {
+        this.target.querySelector("#osmNoteUrl").href = `https://www.openstreetmap.org/note/${response.properties.id}`;
+        this.target.querySelector("#signalementOsmMain").classList.add("d-none");
+        this.target.querySelector("#signalementOsmDone").classList.remove("d-none");
+        this.dom.submitButton.style.removeProperty("pointer-events");
+        this.dom.submitButton.style.removeProperty("background-image");
+        this.dom.submitButton.style.removeProperty("color");
+      }).catch( () => {
+        this.target.querySelector("#signalementOsmMain").classList.add("d-none");
+        this.target.querySelector("#signalementOsmDone").classList.remove("d-none");
+        this.dom.submitButton.style.removeProperty("pointer-events");
+        this.dom.submitButton.style.removeProperty("background-image");
+        this.dom.submitButton.style.removeProperty("color");
+        this.hide();
+        Toast.show({
+          text: "Une erreur s'est produite lors de la création de la note",
+          duration: "short",
+          position: "bottom"
+        });
+      });
+
+    });
+  }
+
+  /**
+   * envoi du signalement
+   * @private
+   */
+  async #send() {
+    const noteText = `Un signalement a été effectué par un utilisateur de l'application Cartes IGN :\n
+Titre : ${this.data.title}\n\n
+
+Nom ou type de POI concerné : ${this.data.poiName}\n\n
+
+Descrition :\n ${this.data.description}
+    `;
+
+    const requestBody = {
+      "lat": this.data.location.lat,
+      "lon": this.data.location.lon,
+      "text": noteText
+    };
+    const bearerToken = process.env.osm_bearer_token || "undefined";
+    const resp = await fetch(this.url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${bearerToken}`,
+      },
+      body: JSON.stringify(requestBody),
+    });
+    const json = await resp.json();
+    return json;
   }
 
   /**
@@ -54,9 +168,18 @@ class SignalementOSM {
    * @public
    */
   clear() {
+    if (this.dom.title) {
+      this.dom.title.value = "";
+      this.dom.description.value = "";
+    }
     this.data = {
+      title: null,
+      description: null,
       location: null,
+      poiName: null,
     };
+    this.target.querySelector("#signalementOsmMain").classList.remove("d-none");
+    this.target.querySelector("#signalementOsmDone").classList.add("d-none");
   }
 
 }