Merge pull request #280 from hotosm/feat/add-user-in-approved-prediction

Feature : User info on approved predictions
hotosm · Sep 26, 2024 · 3a8bec2 · 3a8bec2
2 parents 3d628d1 + c2d2260
commit 3a8bec2
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 12 deletions.
diff --git a/backend/core/models.py b/backend/core/models.py
@@ -145,3 +145,6 @@ class ApprovedPredictions(models.Model):
         srid=4326
     )  ## Making this geometry field to support point/line prediction later on
     approved_at = models.DateTimeField(auto_now_add=True)
+    approved_by = models.ForeignKey(
+        OsmUser, to_field="osm_id", on_delete=models.CASCADE
+    )
diff --git a/backend/core/views.py b/backend/core/views.py
@@ -307,6 +307,7 @@ class ApprovedPredictionsViewSet(viewsets.ModelViewSet):
     def create(self, request, *args, **kwargs):
         training_id = request.data.get("training")
         geom = request.data.get("geom")
+        request.data["approved_by"] = self.request.user.osm_id
 
         existing_approved_feature = ApprovedPredictions.objects.filter(
             training=training_id, geom=geom

diff --git a/frontend/src/components/Layout/Start/Prediction/EditableGeoJSON.js b/frontend/src/components/Layout/Start/Prediction/EditableGeoJSON.js
@@ -67,7 +67,7 @@ function tile2boundingbox(xtile, ytile, zoom) {
 
 function getFeatureStyle(feature) {
   let color = "";
-  if (feature.properties.action === "ACCEPT") {
+  if (feature.properties.action === "FEEDBACK") {
     color = "blue";
   } else if (feature.properties.action === "INITIAL") {
     color = "red";
@@ -95,7 +95,7 @@ const EditableGeoJSON = ({
   modelId,
   trainingId,
   sourceImagery,
-  refestchFeeedback,
+  refetchFeedback,
   onAcceptFeature,
 }) => {
   const onPMCreate = (event) => {
@@ -165,14 +165,50 @@ const EditableGeoJSON = ({
       };
       const res = await axios.post(`/feedback/`, body, { headers });
       console.log("res ", res);
-      refestchFeeedback();
+      refetchFeedback();
     } catch (error) {
       console.log("Error in submitting feedback", error);
     } finally {
     }
   };
   const { mutate: mutateSubmitFeedback } = useMutation(submitFeedback);
 
+  const submitAcceptedPrediction = async (layer) => {
+    const newAOI = {
+      id: Math.random(),
+      latlngs: layer.getLatLngs()[0],
+    };
+    const points = JSON.stringify(
+      converToGeoPolygon([newAOI])[0][0].reduce(
+        (p, c, i) => p + c[1] + " " + c[0] + ",",
+        ""
+      )
+    ).slice(1, -2);
+
+    const polygon = "SRID=4326;POLYGON((" + points + "))";
+    try {
+      const body = {
+        config: {},
+        geom: polygon,
+        training: trainingId,
+      };
+
+      const headers = {
+        "access-token": accessToken,
+      };
+
+      const res = await axios.post(`/approved-prediction/`, body, { headers });
+      console.log("res ", res);
+      refetchFeedback();
+    } catch (error) {
+      console.log("Error in submitting accepted prediction", error);
+    } finally {
+    }
+  };
+  const { mutate: mutatesubmitAcceptedPrediction } = useMutation(
+    submitAcceptedPrediction
+  );
+
   const onEachFeature = (feature, layer) => {
     // layer.on({
     //   "pm:update": (event) => {
@@ -246,8 +282,8 @@ const EditableGeoJSON = ({
       </p>
       <span>Comments:<span/><input type="text" id="comments" name="comments" />
       <br/>
-        <button id="rightButton" class="feedback-button" type="submit">Submit feedback</button>
-        <button id="josmButton" class="feedback-button" type="submit">&#128077; Accept</button>
+        <button id="submitFeedback" class="feedback-button" type="submit">Submit feedback</button>
+        <button id="acceptFeedback" class="feedback-button" type="submit">&#128077; Accept</button>
       </div>
       `;
         const popup = L.popup()
@@ -256,23 +292,25 @@ const EditableGeoJSON = ({
           .openOn(e.target._map);
         const popupElement = popup.getElement();
         popupElement
-          .querySelector("#rightButton")
+          .querySelector("#submitFeedback")
           .addEventListener("click", () => {
-            feature.properties.action = "ACCEPT";
+            feature.properties.action = "FEEDBACK";
             onAcceptFeature(feature);
             console.log("popup layer ", layer);
             // handle submitting feedback
             mutateSubmitFeedback(layer);
+
             popup.close();
           });
 
         popupElement
-          .querySelector("#josmButton")
+          .querySelector("#acceptFeedback")
           .addEventListener("click", () => {
             feature.properties.action = "JOSM";
             // console.log("popup layer ", layer);
             // handle submitting feedback
             // mutateSubmitFeedback(layer);
+            mutatesubmitAcceptedPrediction(layer);
             setRender(Math.random());
             popup.close();
           });

diff --git a/frontend/src/components/Layout/Start/Prediction/Prediction.js b/frontend/src/components/Layout/Start/Prediction/Prediction.js
@@ -240,16 +240,16 @@ const Prediction = () => {
     if (acceptedFeatures.length === 0) {
       return;
     }
-  
+
     const content = JSON.stringify(acceptedFeatures);
     const blob = new Blob([content], { type: "application/json" });
     const url = URL.createObjectURL(blob);
-  
+
     const link = document.createElement("a");
     link.href = url;
     link.download = "accepted_predictions.geojson";
     link.click();
-  
+
     URL.revokeObjectURL(url);
   };
 
@@ -584,7 +584,7 @@ const Prediction = () => {
                   // setModifiedCount={setModifiedCount}
                   // setDeletedCount={setDeletedCount}
                   tileBoundaryLayer={tileBoundaryLayer}
-                  refestchFeeedback={() => {
+                  refetchFeedback={() => {
                     refetchFeedback();
                   }}
                   onAcceptFeature={handleAcceptFeature}