From 6be6eff4833a95bc3af99df50672f2f412a10306 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Fri, 15 Oct 2021 19:28:49 -0300 Subject: [PATCH 1/2] retriretrieving official pluviometer data and updating chart --- .../RequestFieldsAnswers/getFieldsAnswers.js | 5 +- src/app/components/AssembleModalObject.js | 199 +++++++++++------- src/app/components/DatePicker.js | 1 - src/app/components/MapModal.js | 26 ++- src/app/components/PluviometerGraphics.js | 18 +- .../forms/AssembleIngestionObject.js | 2 +- src/app/hooks/useFiltering.js | 6 +- src/app/hooks/useSocketMarkers.js | 2 +- 8 files changed, 168 insertions(+), 91 deletions(-) diff --git a/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js b/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js index 64f092a..0fcef1e 100644 --- a/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js +++ b/src/app/api/RequestFieldsAnswers/getFieldsAnswers.js @@ -1,7 +1,8 @@ import apiClient from "../client"; -const endpoint = "/hot/fieldsanswers?&faid="; +const endpoint = "/hot/fieldsanswers?"; -const fieldsAnswers = (id) => apiClient.get(endpoint+id); +const fieldsAnswers = (time, id) => + apiClient.get(endpoint + `time=${time}&faid=${id}`); export default { fieldsAnswers }; diff --git a/src/app/components/AssembleModalObject.js b/src/app/components/AssembleModalObject.js index aebbb0d..d07f117 100644 --- a/src/app/components/AssembleModalObject.js +++ b/src/app/components/AssembleModalObject.js @@ -1,86 +1,135 @@ -import moment from 'moment'; -import React from 'react' -import { View, Text } from 'react-native' +import moment from "moment"; +import React from "react"; +import { View, Text } from "react-native"; +import assets from "../config/assets"; + +const custom_assets = { + pluviometer: assets.pluviometer, + officialPluviometer: assets.officialPluviometer, + floodZones: assets.floodZones, + riverLevel: ["low", "normal", "high", "flooding"].map((key) => { + return assets.riverLevel[key]; + }), + rainLevel: ["rain_0_5", "rain_1_5", "rain_2_5", "rain_3_5"].map((key) => { + return assets.rainLevel[key]; + }), +}; 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 == "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]; - } + } + + 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]; } - if (name == "floodZones") { - return custom_assets.floodZones; - } + return custom_assets.riverLevel[0]; + } + if (name == "floodZones") { + return custom_assets.floodZones; + } +} + +function verifyMeasureDates(labels, measureDate) { + if (labels == null || !labels.find((f) => f == measureDate)) { + labels.push(measureDate); } +} const AssembleModalObject = (response, name) => { + var situation = null; + var user = null; + var address = null; + var date = null; + var time = null; + var comments = null; + var pictures = null; + var data = { + values: [], + labels: [], + }; + + if (JSON.parse(response)) { 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; - } - }); + + if (name == "automaticPluviometer") { + (situation = "PLUVIÔMETRO"), + r[0].array_to_json.forEach(function (f) { + if (f.fieldname == "medicao") { + verifyMeasureDates( + data.labels, + moment(f.fieldsanswersdtfilling).format("DD/MM") + ); //data.labels.push(moment(f.fieldsanswersdtfilling).format("DD/MM/YYYY")); + data.values.push( + f.fieldsanswersvalue ? parseFloat(f.fieldsanswersvalue) : null + ); + } + if (f.fieldname == "siglarede") { + user = f.fieldsanswersvalue; + } + if (f.fieldname == "nome") { + address = f.fieldsanswersvalue; + } + }); + + } else { + 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, - }; -} + } + return { + name: name, + title: situation, + user: user, + address: address, + date: date + " | " + time, + description: comments, + logo: getLogo(name, situation), + pictures: pictures, + data: data, + }; +}; -export default AssembleModalObject +export default AssembleModalObject; diff --git a/src/app/components/DatePicker.js b/src/app/components/DatePicker.js index 5c2dff7..21a78b6 100644 --- a/src/app/components/DatePicker.js +++ b/src/app/components/DatePicker.js @@ -42,7 +42,6 @@ export default function DatePicker(props) { }; const androidOnChange = (e, selectedDate) => { - console.log("selectedDate: " + selectedDate + " " + mode); setShow(false); if (selectedDate) { diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js index 7d1e2da..570f874 100644 --- a/src/app/components/MapModal.js +++ b/src/app/components/MapModal.js @@ -9,6 +9,7 @@ import { Svg, Image as ImageSvg } from "react-native-svg"; import PluviometerGraphics from "./PluviometerGraphics"; import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers"; import AssembleModalObject from "./AssembleModalObject"; +import moment from "moment"; const chartHeight = screen_height * 0.3; @@ -170,6 +171,7 @@ function reviews(props) { function moreInfo(props) { const hasData = props.data.values.length > 0; + return ( {!hasData ? ( - Nenhum dado disponível + Não há dados para este pluviômetro ) : ( @@ -204,9 +207,11 @@ function componentBody(props) { {iconTextRow({ name: "map-marker", description: address })} - {iconTextRow({ name: "calendar", description: date })} - {iconTextRow({ name: "account", description: "Usuário ativo" })} - {iconImageRow({ name: "camera", pic: pictures })} + {!isPluviometer(props.name) && + iconTextRow({ name: "calendar", description: date })} + {iconTextRow({ name: "account", description: user })} + {props.name != "automaticPluviometer" && + iconImageRow({ name: "camera", pic: pictures })} ); @@ -228,15 +233,24 @@ function userMessage(marker) { } function isPluviometer(name) { - return name === "pluviometer" || name === "officialPluviometer"; + return name === "pluviometer" || name === "automaticPluviometer"; } function MapModal({ showModal, setShowModal, markers }) { const [currentMarker, setCurrentMarker] = useState(undefined); + var timeFilter = null; const getAnswers = async (id, name) => { - const result = await getFieldsAnswers.fieldsAnswers(id); + if (isPluviometer(name)) { + const initialDate = moment().format("YYYY-MM-DD"); + const finalDate = moment().subtract(5, "days").format("YYYY-MM-DD"); + + timeFilter = finalDate + "/" + initialDate; + } + + const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id); if (result.data) { + console.log(timeFilter); setCurrentMarker( AssembleModalObject( JSON.stringify(result.data.responseData.array_to_json), diff --git a/src/app/components/PluviometerGraphics.js b/src/app/components/PluviometerGraphics.js index 3a978a3..fabb27a 100644 --- a/src/app/components/PluviometerGraphics.js +++ b/src/app/components/PluviometerGraphics.js @@ -17,6 +17,7 @@ function figure_config(labels, values) { data: values, color: () => colors.gold, strokeWidth: 2, + }, ], @@ -24,6 +25,19 @@ function figure_config(labels, values) { }; } +const verifyNullData = (values) => { + var indexArray = []; + var i = 0; + + for (i; i < values.length; i++) { + if (values[i] == null) { + indexArray.push(i); + } + } + + return indexArray; +}; + const chartConfig = { backgroundGradientFrom: 0, backgroundGradientFromOpacity: 0, @@ -41,19 +55,21 @@ function PluviometerGraphics({ chartHeight, labels, values }) { return ( Data diff --git a/src/app/components/forms/AssembleIngestionObject.js b/src/app/components/forms/AssembleIngestionObject.js index 5f4873d..c4afacc 100644 --- a/src/app/components/forms/AssembleIngestionObject.js +++ b/src/app/components/forms/AssembleIngestionObject.js @@ -25,7 +25,7 @@ const AssembleIngestionObject = ( fieldsanswerseventaddress: address, fieldsanswerseventdate: moment(date).format("DD-MM-YYYY"), fieldsanswerseventtime: moment(time).format("HH:mm"), - fieldsanswerscomment: description, + fieldsanswerscomments: description, }, ], }, diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js index 087a68e..6bd0ef5 100644 --- a/src/app/hooks/useFiltering.js +++ b/src/app/hooks/useFiltering.js @@ -2,9 +2,7 @@ import moment from "moment"; function useFiltering(location) { const initialDate = moment().format("YYYY-MM-DDTHH:mm:ss"); - console.log("Inicio: "+ initialDate+"\n"); const finalDate = moment().subtract(1, "days").format("YYYY-MM-DDTHH:mm:ss"); - console.log("Fim "+finalDate); const filters = [ { @@ -25,14 +23,14 @@ function useFiltering(location) { name: "riverFlood", socketUrl: new WebSocket( "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" + - `type=RIVERFLOOD_FORM&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5` + `type=RIVERFLOOD_FORM&time=${finalDate}/${initialDate}&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5` ), }, { name: "pluviometer", socketUrl: new WebSocket( "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" + - `type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5` + `type=PLUVIOMETER_REGISTRATION&time=${finalDate}/${initialDate}&lat=${location.lat}&lon=${location.long}&buffer=50000&limit=5` ), }, { diff --git a/src/app/hooks/useSocketMarkers.js b/src/app/hooks/useSocketMarkers.js index 7fd8540..9b951bc 100644 --- a/src/app/hooks/useSocketMarkers.js +++ b/src/app/hooks/useSocketMarkers.js @@ -17,7 +17,7 @@ const custom_assets = { const custom_assets_pin = { pluviometer: assets.pluviometer_pin, - officialPluviometer: assets.officialPluviometer_pin, + officialPluviometer: assets.pluviometer_pin,//assets.officialPluviometer_pin, floodZones: { passable: PinTransitavel, not_passable: PinIntransitavel, From 43d93d33ac280b6156320ba2da2b99c9bf4fc37a Mon Sep 17 00:00:00 2001 From: analuizaff Date: Wed, 20 Oct 2021 12:26:19 -0300 Subject: [PATCH 2/2] correcting error: couldn't select 'ALTO' on river flood form --- src/app/screens/RiverFloodSharingDataScreen.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/screens/RiverFloodSharingDataScreen.js b/src/app/screens/RiverFloodSharingDataScreen.js index 1585028..0368adf 100644 --- a/src/app/screens/RiverFloodSharingDataScreen.js +++ b/src/app/screens/RiverFloodSharingDataScreen.js @@ -121,6 +121,7 @@ function RiverFloodSharingDataScreen(props) { { + setRiverScale(2); setRiverSituation("ALTO"); }} SvgImage={assets.riverLevel.High}