forked from cemaden-educacao/WPD-MobileApp
analuizaff
3 years ago
8 changed files with 366 additions and 124 deletions
-
72src/app/api/Websockets/SocketClient.js
-
9src/app/components/MapMarkerList.js
-
13src/app/components/map/OpenStreetMap.js
-
1src/app/config/globals.js
-
45src/app/hooks/useFiltering.js
-
64src/app/hooks/useFormsAswers.js
-
183src/app/hooks/useSocketMarkers.js
-
17src/app/screens/MapFeedScreen.js
@ -1,6 +1,7 @@ |
|||
// FIXME: convert this to Context kkkkkkk
|
|||
global.userDataBase = undefined; |
|||
global.location = undefined; |
|||
global.formsSockets = undefined; |
|||
//Endereço do evento
|
|||
//global.eventAddress = " ";
|
|||
//global.eventCoordinates = undefined;
|
|||
@ -0,0 +1,183 @@ |
|||
import { useState, useEffect, useReducer, useContext } from "react"; |
|||
|
|||
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", "rain_1_5", "rain_2_5", "rain_3_5"].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]; |
|||
}), |
|||
}; |
|||
const initialState = { markers: new Map() }; |
|||
|
|||
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(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),
|
|||
}; |
|||
|
|||
return polygonObject; |
|||
} |
|||
|
|||
function buildMarkerObject(response, name) { |
|||
const r = JSON.parse(response); |
|||
const resposta = r.formsanswersgeom; |
|||
const formsanswersgeom = JSON.parse(resposta).coordinates; |
|||
|
|||
return { |
|||
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),
|
|||
}; |
|||
} |
|||
|
|||
function verifyResponse(response, name) { |
|||
var markers = []; |
|||
|
|||
if (response) { |
|||
const answer = JSON.parse(response); |
|||
if (answer.success == true) { |
|||
const formAnswer = answer.responseData.array_to_json; |
|||
|
|||
answer.responseData.array_to_json.forEach( |
|||
(r) => |
|||
r.formcode == "FLOODZONES_OFFICIAL" |
|||
? markers.push(buildPolygonsObject(r, name)) |
|||
: markers.push(buildMarkerObject(JSON.stringify(r), name)) |
|||
); |
|||
} |
|||
} |
|||
//console.log("\n--------------------------------------------\n"+JSON.stringify(markers)+"\n--------------------------------------------\n");
|
|||
return markers; |
|||
} |
|||
|
|||
function getFormsAnswers(socketObject, dispatch) { |
|||
//console.log("\n\n-------------\n"+(socketObject.name +" : " + socketObject.socketUrl.readyState));
|
|||
//const []
|
|||
useEffect(() => { |
|||
socketObject.socketUrl.onmessage = ({ data }) => { |
|||
// console.log(data)
|
|||
dispatch({ increment: verifyResponse(data, socketObject.name) }); |
|||
}; |
|||
}, []); |
|||
} |
|||
|
|||
function reducer(state = initialState, action) { |
|||
action.increment.map((val) => { |
|||
state.markers.set(val.ID, val); |
|||
}); |
|||
|
|||
return { |
|||
markers: state.markers, |
|||
}; |
|||
} |
|||
export default function useSocketMarkers() { |
|||
const [state, dispatch] = useReducer(reducer, initialState); |
|||
global.formsSockets.forEach((socket) => getFormsAnswers(socket, dispatch)); |
|||
|
|||
// console.log("\n\n========================================================== STATE:\n"+JSON.stringify(state.markers));
|
|||
|
|||
return state; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue