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. 199
      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";
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 };

199
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;

1
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) {

26
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 (
<View
style={{
@ -179,7 +181,7 @@ function moreInfo(props) {
>
{!hasData ? (
<Text style={{ ...styles.text, alignSelf: "center" }}>
Nenhum dado disponível
Não dados para este pluviômetro
</Text>
) : (
<PluviometerGraphics
@ -197,6 +199,7 @@ function componentBody(props) {
const pictures = JSON.parse(props.pictures);
const date = props.date ? props.date : "implementando...";
const address = props.address ? props.address : "Erro ao carregar endereço";
const user = props.user ? props.user : "Usuário ativo";
return (
<View style={styles.bodyRow}>
@ -204,9 +207,11 @@ function componentBody(props) {
<View style={styles.bodyInfo}>
{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>
);
@ -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),

18
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 (
<View
style={{
padding: 10,
paddingHorizontal: 10,
flex: 1,
alignItems: "center",
flexDirection: "column",
}}
>
<LineChart
verticalLabelRotation={20}
data={figure_config(labels, values)}
width={screenWidth}
height={chartHeight}
chartConfig={chartConfig}
withVerticalLines={false}
yAxisSuffix="mm"
hidePointsAtIndex={verifyNullData(values)}
/>
<Text style={{ textAlign: "center" }}>Data</Text>
</View>

2
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,
},
],
},

6
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`
),
},
{

2
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,

Loading…
Cancel
Save