requesting formsfieldsanswers on marker click - yet not working for pluviometer

src/app/api/RequestFieldsAnswers/getFieldsAnswers.js

@@ -0,0 +1,7 @@
+import apiClient from "../client";
+
+const endpoint = "/hot/fieldsanswers?&faid=";
+
+const fieldsAnswers = (id) => apiClient.get(endpoint+id);
+
+export default { fieldsAnswers };

src/app/components/AssembleModalObject.js

@@ -0,0 +1,86 @@
+import moment from 'moment';
+import React from 'react'
+import { View, Text } from 'react-native'
+
+function getLogo(name, situation) {
+    if (name == "automaticPluviometer") {
+      return custom_assets.officialPluviometer;
+    }
+  
+    if (name == "pluviometer") {
+      return custom_assets.pluviometer;
+    }
+  
+    if (name == "rain") {
+      if (situation == "sem chuva") {
+        return custom_assets.rainLevel[0];
+      } else if (situation == "chuva fraca") {
+        return custom_assets.rainLevel[1];
+      } else if (situation == "chuva moderada") {
+        return custom_assets.rainLevel[2];
+      } else if (situation == "chuva forte") {
+        return custom_assets.rainLevel[3];
+      } else {
+        return custom_assets.rainLevel[3];
+      }
+    }
+  
+    if (name == "riverFlood") {
+      if (situation == "baixo") {
+        return custom_assets.riverLevel[0];
+      } else if (situation == "normal") {
+        return custom_assets.riverLevel[1];
+      } else if (situation == "alto") {
+        return custom_assets.riverLevel[2];
+      } else if (situation == "inundar") {
+        return custom_assets.riverLevel[3];
+      }
+      return custom_assets.riverLevel[0];
+    }
+    if (name == "floodZones") {
+      return custom_assets.floodZones;
+    }
+  }
+
+const AssembleModalObject = (response, name) => {
+    const r = JSON.parse(response);
+  
+    var situation = null;
+    var address = null;
+    var date = null;
+    var time = null;
+    var comments = null;
+    var pictures = null;
+  
+    if (r[0].array_to_json) {
+      r[0].array_to_json.forEach(function (f) {
+        if (f.fieldname == "situation") {
+          situation = f.fieldsanswersvalue;
+        }
+        if (f.fieldname == "eventaddress") {
+          address = f.fieldsanswersvalue;
+        }
+        if (f.fieldname == "eventdate") {
+          date = f.fieldsanswersvalue;
+        }
+        if (f.fieldname == "eventtime") {
+          time = f.fieldsanswersvalue;
+        }
+        if (f.fieldname == "comments") {
+          comments = f.fieldsanswersvalue;
+        }
+      });
+    }
+  
+    return {
+      "name": name,
+      "title": situation,
+      "address": address,
+      "date": date + " | " + time,
+      "description": comments,
+      "logo": getLogo(),
+      "pictures": pictures,
+    };
+}
+
+export default AssembleModalObject

src/app/components/MapModal.js

@@ -7,6 +7,8 @@ import { showMessage } from "react-native-flash-message";
 import { dimensions, screen_height } from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
 import PluviometerGraphics from "./PluviometerGraphics";
+import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
+import AssembleModalObject from "./AssembleModalObject";
 
 const chartHeight = screen_height * 0.3;
 
@@ -230,10 +232,23 @@ function isPluviometer(name) {
 }
 
 function MapModal({ showModal, setShowModal, markers }) {
-  var currentMarker = undefined;
+  const [currentMarker, setCurrentMarker] = useState(undefined);
+
+  const getAnswers = async (id, name) => {
+    const result = await getFieldsAnswers.fieldsAnswers(id);
+    if (result.data) {
+      setCurrentMarker(
+        AssembleModalObject(
+          JSON.stringify(result.data.responseData.array_to_json),
+          name
+        )
+      );
+    }
+  };
 
   if (markers && showModal != null && markers.has(showModal)) {
-    currentMarker = markers.get(showModal);
+    //currentMarker = markers.get(showModal);
+    getAnswers(showModal, markers.get(showModal).name);
   }
 
   if (currentMarker != undefined && showModal != null) {

src/app/components/map/OpenStreetMap.js

@@ -91,6 +91,7 @@ export default function OpenStreetMap({
           javaScriptEnabled={true}
           source={{ html: webviewContent }}
           injectedJavaScript={viewFunction}
+          
         />
       )}
       {!isForm && (

src/app/hooks/useFormsAswers.js

@@ -142,8 +142,8 @@ function verifyResponse(markers, data) {
   // console.log(data.response);
   if (data) {
     // const response = JSON.parse(data).responseData.array_to_json;
-    //  response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, "rain") :
-    buildMarkerObject(markers.markers, data, "rain");
+    response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, markers.name) :
+    buildMarkerObject(markers.markers, data, markers.name));
   }
 }
 

src/app/hooks/useSocketMarkers.js

@@ -159,7 +159,7 @@ function buildPolygonsObject(response, name) {
       logo: custom_assets.pluviometer,
       pictures: null,
       image: "", //getMarkerImage(answer.name),
-    };;
+    };
   }
 }
 
@@ -169,29 +169,12 @@ function buildMarkerObject(response, name) {
   const formsanswersgeom = JSON.parse(resposta).coordinates;
 
   var situation = null;
-  var address = null;
-  var date = null;
-  var time = null;
-  var comments = null;
-  var pictures = null;
 
   if (r.fias) {
     r.fias.forEach(function (f) {
       if (f.fieldname == "situation") {
         situation = f.fieldsanswersvalue;
       }
-      if (f.fieldname == "eventaddress") {
-        address = f.fieldsanswersvalue;
-      }
-      if (f.fieldname == "eventdate") {
-        date = f.fieldsanswersvalue;
-      }
-      if (f.fieldname == "eventtime") {
-        time = f.fieldsanswersvalue;
-      }
-      if (f.fieldname == "comments") {
-        comments = f.fieldsanswersvalue;
-      }
     });
   }
 
@@ -199,15 +182,10 @@ function buildMarkerObject(response, name) {
     ID: r.formsanswersid,
     name: name,
     title: situation,
-    address: address,
     coordinate: {
       latitude: formsanswersgeom[1],
       longitude: formsanswersgeom[0],
     },
-    date: date + " | " + time,
-    description: comments,
-    logo: getLogo(),
-    pictures: pictures,
     image: getImage(name, situation),
   };
 }