Browse Source

Merge branch 'main' of github.com:IGSD-UoW/WPD-MobileApp

master
GabrielTrettel 3 years ago
parent
commit
646fd87550
  1. 4
      src/app/api/Websockets/dataClient.js
  2. 4
      src/app/api/auth.js
  3. 136
      src/app/components/AssembleModalObject.js
  4. 57
      src/app/components/MapModal.js
  5. 11
      src/app/components/PluviometerGraphics.js
  6. 17
      src/app/components/forms/AssembleIngestionObject.js
  7. 29
      src/app/hooks/usePluviometerData.js
  8. 1
      src/app/hooks/useSocketMarkers.js
  9. 53
      src/app/screens/MapFeedScreen.js
  10. 6
      src/app/screens/SharingDataScreen.js

4
src/app/api/Websockets/dataClient.js

@ -0,0 +1,4 @@
const dataClient =
"ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/data?";
export default dataClient;

4
src/app/api/auth.js

@ -59,8 +59,8 @@ async function userPersonalData() {
async function userActivation(code) {
const { username } = await authStorage.getUser();
const authToken = await authStorage.getToken()
console.log("TOKEN ACTIVATE: "+authToken);
console.log("USER NAME: " + username);
// console.log("TOKEN ACTIVATE: "+authToken);
// console.log("USER NAME: " + username);
const localClient = create({
baseURL: "http://wpd.brazilsouth.cloudapp.azure.com:8080/users",

136
src/app/components/AssembleModalObject.js

@ -1,8 +1,9 @@
import moment from "moment";
import React from "react";
import { View, Text } from "react-native";
import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
import assets from "../config/assets";
//---1/3: melhorar código
const custom_assets = {
pluviometer: assets.PluviometerIcon,
officialPluviometer: assets.OfficialPluviometer,
@ -59,14 +60,72 @@ function getLogo(name, situation) {
}
}
function verifyMeasureDates(labels, measureDate) {
function verifymeasureDates(labels, measureDate, day) {
// console.log(measureDate);
if (labels == null || !labels.find((f) => f == measureDate)) {
labels.push(measureDate);
day.label = measureDate;
return true;
}
return false;
}
const getCurrentPluviometer = (pluvForm, userId, data, datapluv) => {
//console.log("\nuserid: "+ userId + "\n\n");
//console.log(pluvForm);
var day = { label: null, values: [] };
var measureDate = null;
if (pluvForm.formsanswersuserinformer == userId) {
pluvForm.array_to_json.find((field) => {
if (field.fieldname == "date") {
measureDate = moment(field.fieldsanswersvalue, "DD-MM-YYYY").format(
"DD/MM"
);
//data.labels.push(moment(f.fieldsanswersdtfilling).format("DD/MM/YYYY"));
}
});
pluvForm.array_to_json.find((field) => {
if (field.fieldname == "rainamount") {
if (verifymeasureDates(data.labels, measureDate, day)) {
day.values.push(
field.fieldsanswersvalue
? parseFloat(field.fieldsanswersvalue)
: null
);
datapluv.push(day);
} else {
datapluv.forEach((d) => {
if (d.label === measureDate) {
d.values.push(
field.fieldsanswersvalue
? parseFloat(field.fieldsanswersvalue)
: null
);
}
});
}
}
});
return pluvForm;
}
};
async function getPluviometerStatio_informations(id) {
const result = await getFieldsAnswers.fieldsAnswers(null, id);
if (result.data) {
return result.data.responseData.array_to_json[0].array_to_json;
}
return null;
}
const AssembleModalObject = (response, name) => {
//console.log(response);
const AssembleModalObject = async (response, name, userId, formId) => {
var situation = null;
var user = null;
var institution = null;
@ -76,10 +135,11 @@ const AssembleModalObject = (response, name) => {
var comments = null;
var pictures = null;
var data = {
values: [],
labels: [],
};
var datapluv = [];
if (JSON.parse(response).array_to_json) {
const r = JSON.parse(response).array_to_json;
@ -88,15 +148,32 @@ const AssembleModalObject = (response, name) => {
if (name == "automaticPluviometer") {
(situation = "PLUVIÔMETRO"),
r[0].array_to_json.forEach(function (f) {
var day = { label: null, values: [] };
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(
var measureDate = moment(
f.fieldsanswersdtfilling,
"YYYY-MM-DDTHH:mm:ss"
).format("DD/MM");
if (verifymeasureDates(data.labels, measureDate, day)) {
day.values.push(
f.fieldsanswersvalue ? parseFloat(f.fieldsanswersvalue) : null
);
day.label = measureDate;
datapluv.push(day);
} else {
datapluv.forEach((d) => {
if (d.label == measureDate) {
d.values.push(
f.fieldsanswersvalue
? parseFloat(f.fieldsanswersvalue)
: null
);
}
});
}
}
if (f.fieldname == "siglarede") {
institution = f.fieldsanswersvalue;
}
@ -104,9 +181,44 @@ const AssembleModalObject = (response, name) => {
address = f.fieldsanswersvalue;
}
});
if (datapluv) {
datapluv.sort(function (dataPluv, dataPluvB) {
return dataPluv.label.localeCompare(dataPluvB.label);
});
}
// console.log(datapluv);
} else if (name == "pluviometer") {
situation = "PLUVIÔMETRO";
//buscar todos os PLUVIOMETERS_FORMS REPORTADOS PELO USUÁRIO DOS ULTIMOS 5 DIAS
r[r.length - 1].array_to_json.forEach(function (f) {
if (f.fieldname == "comments") {
comments = f.fieldsanswersvalue;
}
});
const pluv_sation = await getPluviometerStatio_informations(formId);
if (pluv_sation) {
pluv_sation.forEach((field) => {
if (field.fieldname == "institutename") {
institution =
field.fieldsanswersvalue != "None"
? field.fieldsanswersvalue
: "Não há vínculo institucional";
} else if (field.fieldname == "eventaddress") {
address = field.fieldsanswersvalue;
}
});
}
const currentPluv = JSON.parse(response).array_to_json.filter(
(pluvForm) => getCurrentPluviometer(pluvForm, userId, data, datapluv)
);
if (datapluv) {
datapluv.sort(function (dataPluv, dataPluvB) {
return dataPluv.label.localeCompare(dataPluvB.label);
});
}
} else {
if (r[0].array_to_json) {
user = r[0].formsanswersuserinformer;
@ -141,7 +253,7 @@ const AssembleModalObject = (response, name) => {
description: comments,
logo: getLogo(name, situation),
pictures: pictures,
data: data,
data: datapluv,
};
};

57
src/app/components/MapModal.js

@ -16,6 +16,7 @@ import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers";
import AssembleModalObject from "./AssembleModalObject";
import moment from "moment";
import SvgLabeledButton from "./SvgLabeledButton";
import getPluviometerData from "../hooks/usePluviometerData";
const chartHeight = screen_height * 0.3;
@ -197,7 +198,8 @@ function reviews(props) {
}
function moreInfo(props) {
const hasData = props.data.values.length > 0;
const hasData = props.data.length > 0;
// console.log(props.data);
return (
<View
@ -211,11 +213,7 @@ function moreInfo(props) {
Não dados para este pluviômetro
</Text>
) : (
<PluviometerGraphics
chartHeight={chartHeight}
values={props.data.values}
labels={props.data.labels}
/>
<PluviometerGraphics chartHeight={chartHeight} data={props.data} />
)}
</View>
);
@ -278,9 +276,10 @@ function isOfficialPluviometer(name) {
function MapModal({ showModal, setShowModal, markers }) {
const [currentMarker, setCurrentMarker] = useState(undefined);
const [pluviometerData, setPluviometerData] = useState(undefined);
var timeFilter = null;
const getAnswers = async (id, name) => {
const getAnswers = async (id, name, coordinates, user) => {
if (isOfficialPluviometer(name)) {
const initialDate = moment().format("YYYY-MM-DD");
const finalDate = moment().subtract(5, "days").format("YYYY-MM-DD");
@ -288,18 +287,50 @@ function MapModal({ showModal, setShowModal, markers }) {
timeFilter = finalDate + "/" + initialDate;
// console.log(timeFilter);
}
const result = await getFieldsAnswers.fieldsAnswers(timeFilter, id);
if (result.data && showModal && currentMarker == undefined) {
setCurrentMarker(
AssembleModalObject(JSON.stringify(result.data.responseData), name)
if (currentMarker == undefined) {
if (name == "pluviometer") {
getPluviometerData(coordinates, setPluviometerData);
const result = pluviometerData;
// console.log(result);
if (result && showModal && currentMarker == undefined) {
AssembleModalObject(
JSON.stringify(result.responseData),
name,
user,
id
).then((marker) => {
setCurrentMarker(marker);
});
// console.log(id);
}
} else {
const result = await getFieldsAnswers.fieldsAnswers(
timeFilter,
id,
user
);
if (result.data && showModal && currentMarker == undefined) {
AssembleModalObject(
JSON.stringify(result.data.responseData),
name,
user,
id
).then((marker) => {
setCurrentMarker(marker);
});
}
}
}
};
if (markers && showModal != null && markers.has(showModal)) {
//currentMarker = markers.get(showModal);
getAnswers(showModal, markers.get(showModal).name);
getAnswers(
showModal,
markers.get(showModal).name,
markers.get(showModal).coordinate,
markers.get(showModal).user
);
}
if (showModal != null) {

11
src/app/components/PluviometerGraphics.js

@ -17,7 +17,6 @@ function figure_config(labels, values) {
data: values,
color: () => colors.gold,
strokeWidth: 2,
},
],
@ -51,7 +50,15 @@ const chartConfig = {
},
};
function PluviometerGraphics({ chartHeight, labels, values }) {
function PluviometerGraphics({ chartHeight, data }) {
var labels = [];
var values = [];
data.forEach((day) => {
labels.push(day.label);
day.values.forEach((value) => {
values.push(value);
});
});
return (
<View
style={{

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

@ -47,20 +47,27 @@ const AssembleIngestionPluviometer = async ({
responseData: {
array_to_json: [
{
formcode: "PLUVIOMETERS_FORM",
formcode: "PLUVIOMETER_FORM",
formsanswersuserinformer: user.username,
fias: [
fieldsanswerslongitude: user.pluviometer.coordinates["long"],
fieldsanswerslatitude: user.pluviometer.coordinates["lat"],
fields: [
{
fieldsanswersdate: moment(date).format("DD-MM-YYYY"),
fieldsanswersrainamount: pluviometer,
fieldsanswerssituation: null,
fieldsanswerseventaddress: user.pluviometer.address,
fieldsanswerseventdate: moment(date).format("DD-MM-YYYY"),
fieldsanswerseventtime: moment(time).format("HH:mm"),
fielsanswercomment: description,
fieldsanswersrainamount: pluviometer,
fieldsanswerscomments: description,
},
],
},
],
},
};
const a = await sendFormAnswer(pluviometerObject);
return a;
};
async function AssembleIngestionPluvRegistration(

29
src/app/hooks/usePluviometerData.js

@ -0,0 +1,29 @@
import moment from "moment";
import { useState } from "react";
import dataClient from "../api/Websockets/dataClient";
function getPluviometerData(geoLocation, setPluviometerData) {
const initialDate = moment().format("YYYY-MM-DDTHH:mm:ss");
const finalDate = moment().subtract(5, "days").format("YYYY-MM-DDTHH:mm:ss");
const time = finalDate +"/"+initialDate;
const endpoint =
dataClient +
`type=PLUVIOMETER_FORM&time=${time}&lat=${geoLocation.latitude}&lon=${geoLocation.longitude}&buffer=1`;
const socketObject = new WebSocket(endpoint);
socketObject.onmessage = ({ data }) => {
if (data != undefined) {
const dataObject = JSON.parse(data);
// console.log(dataObject.responseData);
if (dataObject?.success) {
setPluviometerData(dataObject);
}
} else {
setPluviometerData(null);
}
socketObject.close();
};
}
export default getPluviometerData;

1
src/app/hooks/useSocketMarkers.js

@ -133,6 +133,7 @@ function buildMarkerObject(response, name) {
latitude: formsanswersgeom[1],
longitude: formsanswersgeom[0],
},
user: r.formsanswersuserinformer,
image: getImage(name, situation ? situation.fieldsanswersvalue : null),
};
}

53
src/app/screens/MapFeedScreen.js

@ -5,33 +5,6 @@ import attachFocusToQuery from "../hooks/useFocus";
import HeaderBarMenu from "../components/HeaderBarMenu";
import useSocketMarkers from "../hooks/useSocketMarkers";
import LoadingMarkersModal from "../components/LoadingMarkersModal";
import colors from "../config/colors";
import {dimensions} from "../config/dimensions";
import { MaterialCommunityIcons } from "@expo/vector-icons";
function NoLocationProvided() {
return (
<View
style={{
flex: 1,
alignItems: "center",
alignSelf: "center",
alignContent: "center",
alignItems: "center",
justifyContent: "center",
}}
>
<MaterialCommunityIcons
name="earth-off"
size={58}
color={colors.primary}
alignSelf="center"
/>
<Text style={styles.txtHeader}>Localização não fornecida{"\n"}</Text>
<Text style={styles.txtStyle}>Para utilizar as funcionalidades do mapa é preciso ativar a localização</Text>
</View>
);
}
export default function MapFeedScreen(props) {
HeaderBarMenu(props.navigation);
@ -51,8 +24,11 @@ export default function MapFeedScreen(props) {
});
const markers = useSocketMarkers();
// console.log("============= qtd markers " + markers.markers.size + " ================" )
return global.location ? (
// console.log("location: " + JSON.stringify(global.location))
return (
(global.location) ? (
<View style={styles.container}>
<OpenStreetMap
markers={markers}
@ -60,10 +36,14 @@ export default function MapFeedScreen(props) {
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
<LoadingMarkersModal show={markers.markers.size <= 0} />
<LoadingMarkersModal
show={markers.markers.size <= 0}/>
</View>
):(
<NoLocationProvided />
<View>
<Text>Apresentar um erro no futuro</Text>
</View>
)
);
}
@ -72,17 +52,4 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: "#FFF",
},
txtHeader: {
color: colors.primary,
fontSize: dimensions.text.header,
fontWeight: "bold",
textAlign: "center",
paddingTop: 12,
paddingBottom: 20,
},
txtStyle: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "center",
},
});

6
src/app/screens/SharingDataScreen.js

@ -13,8 +13,12 @@ function SharingDataScreen({ navigation }) {
const [showLog, setShowLog] = useState(false);
const isRegistered = authContext.user?.username != null;
const pluviometer = authContext.user?.pluviometer;
console.log(pluviometer)
const currentUser = authContext.user;
return (
<View style={styles.container}>
<ConfirmationModal
@ -66,7 +70,7 @@ function SharingDataScreen({ navigation }) {
label={"DIÁRIO DO\nPLUVIÔMETRO"}
onPress={() => navigation.navigate("PluviometerSharingData", { user: currentUser })}
SvgImage={assets.PluviometricDataIcon}
active={isRegistered}
active={isRegistered && pluviometer}
inactiveOnPress={() => setShowLog(true)}
/>

Loading…
Cancel
Save