Browse Source

retriretrieving official pluviometer data and updating chart

master
analuizaff 3 years ago
parent
commit
6be6eff483
  1. 5
      src/app/api/RequestFieldsAnswers/getFieldsAnswers.js
  2. 79
      src/app/components/AssembleModalObject.js
  3. 1
      src/app/components/DatePicker.js
  4. 26
      src/app/components/MapModal.js
  5. 18
      src/app/components/PluviometerGraphics.js
  6. 2
      src/app/components/forms/AssembleIngestionObject.js
  7. 6
      src/app/hooks/useFiltering.js
  8. 2
      src/app/hooks/useSocketMarkers.js

5
src/app/api/RequestFieldsAnswers/getFieldsAnswers.js

@ -1,7 +1,8 @@
import apiClient from "../client"; 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 }; export default { fieldsAnswers };

79
src/app/components/AssembleModalObject.js

@ -1,6 +1,19 @@
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) { function getLogo(name, situation) {
if (name == "automaticPluviometer") { if (name == "automaticPluviometer") {
@ -40,18 +53,51 @@ function getLogo(name, situation) {
if (name == "floodZones") { if (name == "floodZones") {
return custom_assets.floodZones; return custom_assets.floodZones;
} }
}
function verifyMeasureDates(labels, measureDate) {
if (labels == null || !labels.find((f) => f == measureDate)) {
labels.push(measureDate);
} }
}
const AssembleModalObject = (response, name) => { const AssembleModalObject = (response, name) => {
const r = JSON.parse(response);
var situation = null; var situation = null;
var user = null;
var address = null; var address = null;
var date = null; var date = null;
var time = null; var time = null;
var comments = null; var comments = null;
var pictures = null; var pictures = null;
var data = {
values: [],
labels: [],
};
if (JSON.parse(response)) {
const r = JSON.parse(response);
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) { if (r[0].array_to_json) {
r[0].array_to_json.forEach(function (f) { r[0].array_to_json.forEach(function (f) {
if (f.fieldname == "situation") { if (f.fieldname == "situation") {
@ -71,16 +117,19 @@ const AssembleModalObject = (response, name) => {
} }
}); });
} }
}
}
return { return {
"name": name,
"title": situation,
"address": address,
"date": date + " | " + time,
"description": comments,
"logo": getLogo(),
"pictures": pictures,
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;

1
src/app/components/DatePicker.js

@ -42,7 +42,6 @@ export default function DatePicker(props) {
}; };
const androidOnChange = (e, selectedDate) => { const androidOnChange = (e, selectedDate) => {
console.log("selectedDate: " + selectedDate + " " + mode);
setShow(false); setShow(false);
if (selectedDate) { if (selectedDate) {

26
src/app/components/MapModal.js

@ -9,6 +9,7 @@ import { Svg, Image as ImageSvg } from "react-native-svg";
import PluviometerGraphics from "./PluviometerGraphics"; import PluviometerGraphics from "./PluviometerGraphics";
import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers"; import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
import AssembleModalObject from "./AssembleModalObject"; import AssembleModalObject from "./AssembleModalObject";
import moment from "moment";
const chartHeight = screen_height * 0.3; const chartHeight = screen_height * 0.3;
@ -170,6 +171,7 @@ function reviews(props) {
function moreInfo(props) { function moreInfo(props) {
const hasData = props.data.values.length > 0; const hasData = props.data.values.length > 0;
return ( return (
<View <View
style={{ style={{
@ -179,7 +181,7 @@ function moreInfo(props) {
> >
{!hasData ? ( {!hasData ? (
<Text style={{ ...styles.text, alignSelf: "center" }}> <Text style={{ ...styles.text, alignSelf: "center" }}>
Nenhum dado disponível
Não dados para este pluviômetro
</Text> </Text>
) : ( ) : (
<PluviometerGraphics <PluviometerGraphics
@ -197,6 +199,7 @@ function componentBody(props) {
const pictures = JSON.parse(props.pictures); const pictures = JSON.parse(props.pictures);
const date = props.date ? props.date : "implementando..."; const date = props.date ? props.date : "implementando...";
const address = props.address ? props.address : "Erro ao carregar endereço"; const address = props.address ? props.address : "Erro ao carregar endereço";
const user = props.user ? props.user : "Usuário ativo";
return ( return (
<View style={styles.bodyRow}> <View style={styles.bodyRow}>
@ -204,9 +207,11 @@ function componentBody(props) {
<View style={styles.bodyInfo}> <View style={styles.bodyInfo}>
{iconTextRow({ name: "map-marker", description: address })} {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 })}
</View> </View>
</View> </View>
); );
@ -228,15 +233,24 @@ function userMessage(marker) {
} }
function isPluviometer(name) { function isPluviometer(name) {
return name === "pluviometer" || name === "officialPluviometer";
return name === "pluviometer" || name === "automaticPluviometer";
} }
function MapModal({ showModal, setShowModal, markers }) { function MapModal({ showModal, setShowModal, markers }) {
const [currentMarker, setCurrentMarker] = useState(undefined); const [currentMarker, setCurrentMarker] = useState(undefined);
var timeFilter = null;
const getAnswers = async (id, name) => { 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) { if (result.data) {
console.log(timeFilter);
setCurrentMarker( setCurrentMarker(
AssembleModalObject( AssembleModalObject(
JSON.stringify(result.data.responseData.array_to_json), JSON.stringify(result.data.responseData.array_to_json),

18
src/app/components/PluviometerGraphics.js

@ -17,6 +17,7 @@ function figure_config(labels, values) {
data: values, data: values,
color: () => colors.gold, color: () => colors.gold,
strokeWidth: 2, 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 = { const chartConfig = {
backgroundGradientFrom: 0, backgroundGradientFrom: 0,
backgroundGradientFromOpacity: 0, backgroundGradientFromOpacity: 0,
@ -41,19 +55,21 @@ function PluviometerGraphics({ chartHeight, labels, values }) {
return ( return (
<View <View
style={{ style={{
padding: 10,
paddingHorizontal: 10,
flex: 1, flex: 1,
alignItems: "center", alignItems: "center",
flexDirection: "column", flexDirection: "column",
}} }}
> >
<LineChart <LineChart
verticalLabelRotation={20}
data={figure_config(labels, values)} data={figure_config(labels, values)}
width={screenWidth} width={screenWidth}
height={chartHeight} height={chartHeight}
chartConfig={chartConfig} chartConfig={chartConfig}
withVerticalLines={false} withVerticalLines={false}
yAxisSuffix="mm" yAxisSuffix="mm"
hidePointsAtIndex={verifyNullData(values)}
/> />
<Text style={{ textAlign: "center" }}>Data</Text> <Text style={{ textAlign: "center" }}>Data</Text>
</View> </View>

2
src/app/components/forms/AssembleIngestionObject.js

@ -25,7 +25,7 @@ const AssembleIngestionObject = (
fieldsanswerseventaddress: address, fieldsanswerseventaddress: address,
fieldsanswerseventdate: moment(date).format("DD-MM-YYYY"), fieldsanswerseventdate: moment(date).format("DD-MM-YYYY"),
fieldsanswerseventtime: moment(time).format("HH:mm"), fieldsanswerseventtime: moment(time).format("HH:mm"),
fieldsanswerscomment: description,
fieldsanswerscomments: description,
}, },
], ],
}, },

6
src/app/hooks/useFiltering.js

@ -2,9 +2,7 @@ import moment from "moment";
function useFiltering(location) { function useFiltering(location) {
const initialDate = moment().format("YYYY-MM-DDTHH:mm:ss"); 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"); const finalDate = moment().subtract(1, "days").format("YYYY-MM-DDTHH:mm:ss");
console.log("Fim "+finalDate);
const filters = [ const filters = [
{ {
@ -25,14 +23,14 @@ function useFiltering(location) {
name: "riverFlood", name: "riverFlood",
socketUrl: new WebSocket( socketUrl: new WebSocket(
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" + "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", name: "pluviometer",
socketUrl: new WebSocket( socketUrl: new WebSocket(
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/formsanswers?" + "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`
), ),
}, },
{ {

2
src/app/hooks/useSocketMarkers.js

@ -17,7 +17,7 @@ const custom_assets = {
const custom_assets_pin = { const custom_assets_pin = {
pluviometer: assets.pluviometer_pin, pluviometer: assets.pluviometer_pin,
officialPluviometer: assets.officialPluviometer_pin,
officialPluviometer: assets.pluviometer_pin,//assets.officialPluviometer_pin,
floodZones: { floodZones: {
passable: PinTransitavel, passable: PinTransitavel,
not_passable: PinIntransitavel, not_passable: PinIntransitavel,

Loading…
Cancel
Save