From f9c3472d10da93e909566df868d3b932a0da1982 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Mon, 4 Oct 2021 16:37:18 -0300 Subject: [PATCH] requesting formsfieldsanswers on marker click - yet not working for pluviometer --- .../RequestFieldsAnswers/getFieldsAnswers.js | 7 ++ src/app/components/AssembleModalObject.js | 86 +++++++++++++++++++ src/app/components/MapModal.js | 19 +++- src/app/components/map/OpenStreetMap.js | 1 + src/app/hooks/useFormsAswers.js | 4 +- src/app/hooks/useSocketMarkers.js | 24 +----- 6 files changed, 114 insertions(+), 27 deletions(-) create mode 100644 src/app/api/RequestFieldsAnswers/getFieldsAnswers.js create mode 100644 src/app/components/AssembleModalObject.js diff --git a/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js b/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js new file mode 100644 index 0000000..64f092a --- /dev/null +++ b/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 }; diff --git a/src/app/components/AssembleModalObject.js b/src/app/components/AssembleModalObject.js new file mode 100644 index 0000000..aebbb0d --- /dev/null +++ b/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 diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js index 702981c..7d1e2da 100644 --- a/src/app/components/MapModal.js +++ b/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) { diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index ec0531b..2c3ac04 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -91,6 +91,7 @@ export default function OpenStreetMap({ javaScriptEnabled={true} source={{ html: webviewContent }} injectedJavaScript={viewFunction} + /> )} {!isForm && ( diff --git a/src/app/hooks/useFormsAswers.js b/src/app/hooks/useFormsAswers.js index 0058745..8a3e17d 100644 --- a/src/app/hooks/useFormsAswers.js +++ b/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)); } } diff --git a/src/app/hooks/useSocketMarkers.js b/src/app/hooks/useSocketMarkers.js index d02bc91..0c2df5f 100644 --- a/src/app/hooks/useSocketMarkers.js +++ b/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), }; }