forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
3 years ago
10 changed files with 306 additions and 353 deletions
-
23src/App.js
-
71src/app/api/Websockets/SocketClient.js
-
4src/app/api/Websockets/webSocketClient.js
-
21src/app/components/MapModal.js
-
6src/app/hooks/useFiltering.js
-
163src/app/hooks/useFormsAswers.js
-
77src/app/hooks/usePluviometricStation.js
-
4src/app/screens/AccountScreen.js
-
8src/app/screens/MapFeedScreen.js
-
138src/app/screens/PluviometerRegisterScreen.js
@ -1,71 +0,0 @@ |
|||
import { useEffect, useState } from "react"; |
|||
import { useFiltering } from "../../hooks/useFiltering"; |
|||
|
|||
function createSocketObject(data, validos, response) { |
|||
//console.log("criando valuidos");
|
|||
var socketObject = { |
|||
name: data.name, |
|||
socket: response, |
|||
}; |
|||
validos.push(socketObject); |
|||
// console.log(validos);
|
|||
} |
|||
|
|||
function isRequestedValue(item, renderOptions) { |
|||
if ( |
|||
(item.name == "pluviometer" && renderOptions.citzen.pluviometer) || |
|||
(item.name == "automaticPluviometer" && |
|||
renderOptions.oficial.automaticPluviometer) || |
|||
(item.name == "rain" && renderOptions.citzen.rain) || |
|||
(item.name == "riverFlood" && renderOptions.citzen.riverFlood) || |
|||
(item.name == "floodZones" && renderOptions.citzen.floodRisk) || |
|||
(item.name == "susceptibilityAreas" && |
|||
renderOptions.oficial.susceptibilityAreas) |
|||
) { |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
function verify_existingSockets(formType, renderOptions, validos) { |
|||
if (formType.response == null && isRequestedValue(formType, renderOptions)) { |
|||
//console.log("Criou socket: " + formType.name);
|
|||
const socket = new WebSocket( |
|||
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + |
|||
formType.endpoint |
|||
); |
|||
formType.socketUrl = socket; |
|||
createSocketObject(formType, validos, socket); |
|||
return socket; |
|||
} else { |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
export default function SocketClient(dataOptionObject, focusChanged) { |
|||
const [data, setData] = useState(useFiltering().forms); |
|||
var validos = []; |
|||
const socket = verify_existingSockets(data[1], dataOptionObject, validos); |
|||
const [dados, setDado] = useState(); |
|||
|
|||
|
|||
useEffect(() => { |
|||
console.log(dados); |
|||
// data.map((e) => verify_existingSockets(e, dataOptionObject, validos));
|
|||
if (socket && dados != 'undefined') { |
|||
console.log("ESTÁ PASSANDO AQUI!!"); |
|||
data[1].socketUrl.onmessage = ({ data }) => { |
|||
// data[1].response = data
|
|||
setDado(data); |
|||
// console.log("pegou espostas");
|
|||
}; |
|||
} else { |
|||
setDado(null); |
|||
} |
|||
|
|||
//console.log(dados);
|
|||
}, [dataOptionObject, focusChanged]); |
|||
return dados; |
|||
//
|
|||
//console.log("data socket client: "+ JSON.stringify(data));
|
|||
// return data.response;
|
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
const webSocketClient = |
|||
"ws://wpd.brazilsouth.cloudapp.azure.com:9090/hot/formsanswers?"; |
|||
|
|||
export default webSocketClient; |
|||
@ -1,163 +0,0 @@ |
|||
import React, { useEffect, useState } from "react"; |
|||
import * as Location from "expo-location"; |
|||
import SocketClient from "../api/Websockets/SocketClient"; |
|||
import assets from "../config/assets"; |
|||
import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel"; |
|||
import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel"; |
|||
|
|||
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_pin", "rain_1_5_pin", "rain_2_5_pin", "rain_3_5_pin"].map((key) => { |
|||
return assets.rainLevel[key]; |
|||
}), |
|||
}; |
|||
const custom_assets_pin = { |
|||
pluviometer: assets.pluviometer_pin, |
|||
officialPluviometer: assets.officialPluviometer_pin, |
|||
floodZones: { |
|||
passable: PinTransitavel, |
|||
not_passable: PinIntransitavel, |
|||
}, |
|||
riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map( |
|||
(key) => { |
|||
return assets.riverLevel[key]; |
|||
} |
|||
), |
|||
rainLevel: [ |
|||
"rain_0_5_pin", |
|||
"rain_1_5_pin", |
|||
"rain_2_5_pin", |
|||
"rain_3_5_pin", |
|||
].map((key) => { |
|||
return assets.rainLevel[key]; |
|||
}), |
|||
}; |
|||
|
|||
function getImage(name, situation) { |
|||
if (name == "automaticPluviometer") { |
|||
return custom_assets_pin.pluviometer; |
|||
} |
|||
|
|||
if (name == "pluviometer") { |
|||
return custom_assets_pin.pluviometer; |
|||
} |
|||
|
|||
if (name == "rain") { |
|||
if (situation == "sem chuva") { |
|||
return custom_assets_pin.rainLevel[0]; |
|||
} else if (situation == "chuva fraca") { |
|||
return custom_assets_pin.rainLevel[1]; |
|||
} else if (situation == "chuva moderada") { |
|||
return custom_assets_pin.rainLevel[2]; |
|||
} else if (situation == "chuva forte") { |
|||
return custom_assets_pin.rainLevel[3]; |
|||
} |
|||
return custom_assets_pin.rainLevel[3]; |
|||
} |
|||
|
|||
if (name == "riverFlood") { |
|||
if (situation == "baixo") { |
|||
return custom_assets_pin.riverLevel[0]; |
|||
} else if (situation == "normal") { |
|||
return custom_assets_pin.riverLevel[1]; |
|||
} else if (situation == "alto") { |
|||
return custom_assets_pin.riverLevel[2]; |
|||
} else if (situation == "inundar") { |
|||
return custom_assets_pin.riverLevel[3]; |
|||
} |
|||
return custom_assets_pin.riverLevel[0]; |
|||
} |
|||
if (name == "floodZones") { |
|||
if (situation == "transitavel") { |
|||
return custom_assets_pin.floodZones.passable; |
|||
} else { |
|||
return custom_assets_pin.floodZones.not_passable; |
|||
} |
|||
} |
|||
} |
|||
|
|||
function buildPolygonsObject(markers, response, name) { |
|||
var coordinate = []; |
|||
var formsanswersgeom = response.formsanswersgeom; |
|||
const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0]; |
|||
var n = Object.keys(arrayCoordinates).length; |
|||
|
|||
// console.log(arrayCoordinates);
|
|||
|
|||
for (let i = 0; i < n; i++) { |
|||
var lat = arrayCoordinates[i][1]; |
|||
var lon = arrayCoordinates[i][0]; |
|||
coordinate.push([lat, lon]); |
|||
} |
|||
// console.log(coordinate);
|
|||
var polygonObject = { |
|||
ID: response.formsanswersid, |
|||
name: name, |
|||
title: "Titulo", //response.fieldsanswerssituation
|
|||
address: "Endereço", //response.fieldsanswerseventaddress,
|
|||
coordinate: { coordinate }, |
|||
date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
|
|||
description: "comentário", //response.fielsanswercomment,
|
|||
logo: custom_assets.pluviometer, |
|||
pictures: null, |
|||
image: "", //getMarkerImage(answer.name),
|
|||
}; |
|||
|
|||
markers.set(polygonObject.ID, polygonObject); |
|||
} |
|||
|
|||
function buildMarkerObject(markers, response, name) { |
|||
//console.log(JSON.parse(response).responseData);
|
|||
const resposta = JSON.parse(response).responseData.array_to_json[1].formsanswersgeom; |
|||
// console.log("\n\nresposta "+ (resposta.formsanswersid));
|
|||
const formsanswersgeom = JSON.parse(resposta).coordinates; |
|||
// console.log("\n\n ====================================\n"+JSON.stringify(formsanswersgeom));
|
|||
|
|||
var markerObject = { |
|||
ID: 3168,//response.formsanswersid,
|
|||
name: name, |
|||
title: "Titulo", //response.fieldsanswerssituation
|
|||
address: "Endereço", //response.fieldsanswerseventaddress,
|
|||
coordinate: { |
|||
latitude: formsanswersgeom[1], |
|||
longitude:formsanswersgeom[0], |
|||
}, |
|||
date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
|
|||
description: "comentário", //response.fielsanswercomment,
|
|||
logo: custom_assets.pluviometer, |
|||
pictures: null, |
|||
image: getImage(name, "situação"), //getMarkerImage(answer.name),
|
|||
}; |
|||
|
|||
markers.set(markerObject.ID, markerObject); |
|||
|
|||
} |
|||
|
|||
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, markers.name) : |
|||
buildMarkerObject(markers.markers, data, markers.name)); |
|||
} |
|||
} |
|||
|
|||
const getFormsAnswers = (dataOptionObject, focusChanged) => { |
|||
var markers = { markers: new Map() }; |
|||
const answers = SocketClient(dataOptionObject, focusChanged); |
|||
|
|||
//answers.forEach((r) =>
|
|||
if (answers) { |
|||
// console.log("\n\nAnswers: " + answers);
|
|||
verifyResponse(markers, answers); //buildMarkerObject(markers.markers, r));
|
|||
// return answers;
|
|||
} |
|||
return markers; |
|||
}; |
|||
|
|||
export { getFormsAnswers }; |
|||
@ -0,0 +1,77 @@ |
|||
import { useState } from "react"; |
|||
import getFieldsAnswers from "../api/RequestFieldsAnswers/getFieldsAnswers"; |
|||
import webSocketClient from "../api/Websockets/webSocketClient"; |
|||
|
|||
async function getPluvStation_data(id) { |
|||
const result = await getFieldsAnswers.fieldsAnswers(null, id); |
|||
if (result.data) { |
|||
return result; |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
function assemblePluvStationObject(pluvData) { |
|||
var date = null; |
|||
var time = null; |
|||
var address = null; |
|||
var institutionType = null; |
|||
var institutionName = null; |
|||
|
|||
pluvData.array_to_json.forEach(function (field) { |
|||
if (field.fieldname == "eventaddress") { |
|||
address = field.fieldsanswersvalue; |
|||
} else if (field.fieldname == "eventdate") { |
|||
date = field.fieldsanswersvalue; |
|||
} else if (field.fieldname == "eventtime") { |
|||
time = field.fieldsanswersvalue; |
|||
} else if (field.fieldname == "institutename") { |
|||
institutionName = field.fieldsanswersvalue; |
|||
} else if (field.fieldname == "institutetype") { |
|||
institutionType = field.institutionType; |
|||
} |
|||
}); |
|||
|
|||
return { |
|||
regiterDate: date + " | " + time, |
|||
address: address, |
|||
institutionType: institutionType, |
|||
institutionName: institutionName, |
|||
coordinates: { |
|||
lat: pluvData.formsanswerslatitude, |
|||
long: pluvData.formsanswerslongitude, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
async function getPluviometerStation(userId, setPluviometerStation) { |
|||
const endpoint = |
|||
webSocketClient + `type=PLUVIOMETER_REGISTRATION&user=${userId}`; |
|||
const socketObject = new WebSocket(endpoint); |
|||
|
|||
socketObject.onmessage = async ({ data }) => { |
|||
const dataObject = JSON.parse(data); |
|||
if (dataObject?.success) { |
|||
pluvStation_id = dataObject.responseData.array_to_json[0].formsanswersid; |
|||
pluvStation_data = await getPluvStation_data(pluvStation_id); |
|||
const pluvObject = assemblePluvStationObject( |
|||
pluvStation_data.data.responseData.array_to_json[0] |
|||
); |
|||
setPluviometerStation(pluvObject); |
|||
} else { |
|||
setPluviometerStation(false); |
|||
} |
|||
}; |
|||
|
|||
socketObject.onerror = (e) => { |
|||
console.log(e.message); |
|||
setPluviometerStation(null); |
|||
}; |
|||
|
|||
socketObject.close(); |
|||
|
|||
socketObject.onclose = () => { |
|||
console.log("FECHOU"); |
|||
}; |
|||
} |
|||
|
|||
export default getPluviometerStation; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue