diff --git a/src/app/api/Websockets/SocketClient.js b/src/app/api/Websockets/SocketClient.js index 469eaf7..143edce 100644 --- a/src/app/api/Websockets/SocketClient.js +++ b/src/app/api/Websockets/SocketClient.js @@ -1,5 +1,15 @@ -import { useEffect, useState } from 'react'; -import { useFiltering } from '../../hooks/useFiltering'; +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 ( @@ -7,39 +17,55 @@ function isRequestedValue(item, renderOptions) { (item.name == "automaticPluviometer" && renderOptions.oficial.automaticPluviometer) || (item.name == "rain" && renderOptions.citzen.rain) || - (item.name == "riverFlood" && renderOptions.citzen.riverFlood ) || + (item.name == "riverFlood" && renderOptions.citzen.riverFlood) || (item.name == "floodZones" && renderOptions.citzen.floodRisk) || - (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas) + (item.name == "susceptibilityAreas" && + renderOptions.oficial.susceptibilityAreas) ) { return true; - } } -function verify_existingSockets(formType, renderOptions) { +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); - - socket.onmessage = ({ data }) => { - formType.response = data; - } + //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; } - /* else { - console.log("\nresposta preenchida"); - }*/ } +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(); -export default function SocketClient(dataOptionObject, focusChanged, data) { - - - // useEffect(() => { - data.map((e) => verify_existingSockets(e, dataOptionObject)); - -// }, []); - console.log("data socket client: "+ JSON.stringify(data)); - return data; -}; + 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; +} diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index aaf036e..0c76fe6 100644 --- a/src/app/components/MapMarkerList.js +++ b/src/app/components/MapMarkerList.js @@ -15,13 +15,10 @@ function isRequestedValue(item, renderOptions) { function MapMarkerList({ markers, renderOptions }) { if (!markers) return null; - const [selectedMarkers, _] = useState(new Map()); - markers.markers.forEach((item,key) => { - if (isRequestedValue(item, renderOptions)) - selectedMarkers.set(key, item); - }) - - return selectedMarkers + + return [...markers.markers].filter(([_, item]) => { + return isRequestedValue(item, renderOptions); + }); } export { MapMarkerList }; diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 462d469..3fe3ffd 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -65,21 +65,24 @@ export default function OpenStreetMap({ // insertMarker(mapRef, val.ID, val.coordinate, val.image); // }); - useEffect(() => { - if (markersList && mapRef) { - deleteAllMarkers(mapRef); + useEffect(() => {if (markersList && mapRef) { + deleteAllMarkers(mapRef); + // console.log("MARKERLIST: "+ markersList); + + notEmpy(markersList) && + markersList.forEach((val, k) => { + // console.log(val[1].name); + if (val[1].name == "susceptibilityAreas") { + // console.log("floodzones") + insertPolygon(mapRef, val[1].ID, val[1].coordinate); + } + else { + insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image); + } + }); + } +}, [markersList, dataOptionsToShow]); - notEmpy(markersList) && - markersList.forEach((val, k) => { - if (val.name == "susceptibilityAreas") { - insertPolygon(mapRef, val.ID, val.coordinate); - } - else { - insertMarker(mapRef, val.ID, val.coordinate, val.image); - } - }); - } - }, [markersList, dataOptionsToShow]); return ( diff --git a/src/app/config/globals.js b/src/app/config/globals.js index fdaca6a..4fef4fc 100644 --- a/src/app/config/globals.js +++ b/src/app/config/globals.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; diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js index 96b0f11..68ada2d 100644 --- a/src/app/hooks/useFiltering.js +++ b/src/app/hooks/useFiltering.js @@ -1,41 +1,56 @@ -function useFiltering() { - const filters = { - "forms": [ - { - name: "floodZones", - endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, +function useFiltering(location) { + const filters = [ + { + name: "floodZones", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=FLOODZONES_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5` + ), + response: null, + }, + { + name: "rain", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=RAIN_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5` + ), + response: null, + }, + { + name: "riverFlood", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=RIVERFLOOD_FORM&-9.9740&lon=-67.8098&buffer=5000&limit=5` + ), + response: null, + }, + { + name: "pluviometer", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5` + ), + response: null, + }, + { + name: "susceptibilityAreas", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=FLOODZONES_FORM&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5` + ), + response: null, + }, + { + name: "automaticPluviometer", + socketUrl: new WebSocket( + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + + `type=PLUVIOMETERS_OFFICIAL&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5` + ), + response: null, + }, + ]; - }, { - name: "rain", - endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, - }, - { - name: "riverFlood", - endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, - }, - { - name: "pluviometer", - endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, - }, - { - name: "susceptibilityAreas", - endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, - }, - { - name: "automaticPluviometer", - endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5", - response: null, - } - ] - - } - - return filters; + return filters; } export { useFiltering }; diff --git a/src/app/hooks/useFormsAswers.js b/src/app/hooks/useFormsAswers.js index 8d77684..0058745 100644 --- a/src/app/hooks/useFormsAswers.js +++ b/src/app/hooks/useFormsAswers.js @@ -1,11 +1,21 @@ import React, { useEffect, useState } from "react"; -import * as Location from 'expo-location'; +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", "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, @@ -74,47 +84,55 @@ function getImage(name, situation) { function buildPolygonsObject(markers, response, name) { var coordinate = []; var formsanswersgeom = response.formsanswersgeom; - const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]); + const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0]; var n = Object.keys(arrayCoordinates).length; - // console.log(arrayCoordinates); + // 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); + // console.log(coordinate); var polygonObject = { ID: response.formsanswersid, name: name, - title: "Titulo", //response.fieldsanswerssituation - address: "Endereço",//response.fieldsanswerseventaddress, + title: "Titulo", //response.fieldsanswerssituation + address: "Endereço", //response.fieldsanswerseventaddress, coordinate: { coordinate }, - date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime, + date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime, description: "comentário", //response.fielsanswercomment, - image: "",//getMarkerImage(answer.name), - } + logo: custom_assets.pluviometer, + pictures: null, + image: "", //getMarkerImage(answer.name), + }; markers.set(polygonObject.ID, polygonObject); } function buildMarkerObject(markers, response, name) { - const formsanswersgeom = JSON.parse(response.formsanswersgeom)["coordinates"]; + //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: response.formsanswersid, + ID: 3168,//response.formsanswersid, name: name, title: "Titulo", //response.fieldsanswerssituation - address: "Endereço",//response.fieldsanswerseventaddress, + address: "Endereço", //response.fieldsanswerseventaddress, coordinate: { latitude: formsanswersgeom[1], - longitude: formsanswersgeom[0], + longitude:formsanswersgeom[0], }, date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime, description: "comentário", //response.fielsanswercomment, - image: getImage(name, "situação"),//getMarkerImage(answer.name), - } + logo: custom_assets.pluviometer, + pictures: null, + image: getImage(name, "situação"), //getMarkerImage(answer.name), + }; markers.set(markerObject.ID, markerObject); @@ -122,30 +140,24 @@ function buildMarkerObject(markers, response, name) { function verifyResponse(markers, data) { // console.log(data.response); - if (data.response != null) { - const response = JSON.parse(data.response).responseData.array_to_json; - response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, data.name) : buildMarkerObject(markers.markers, r, data.name)); - + if (data) { + // const response = JSON.parse(data).responseData.array_to_json; + // response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, "rain") : + buildMarkerObject(markers.markers, data, "rain"); } - } -const getFormsAnswers = (dataOptionObject, focusChanged, data) => { +const getFormsAnswers = (dataOptionObject, focusChanged) => { var markers = { markers: new Map() }; - const answers = SocketClient(dataOptionObject, focusChanged, data); - - // console.log("\n\nAnswers: " + JSON.stringify(answers)); + const answers = SocketClient(dataOptionObject, focusChanged); - answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r)); - // console.log("\n\nMarkers: " + JSON.stringify(markers)); + //answers.forEach((r) => + if (answers) { + // console.log("\n\nAnswers: " + answers); + verifyResponse(markers, answers); //buildMarkerObject(markers.markers, r)); + // return answers; + } return markers; - -} - - - - - - +}; export { getFormsAnswers }; diff --git a/src/app/hooks/useSocketMarkers.js b/src/app/hooks/useSocketMarkers.js new file mode 100644 index 0000000..525762b --- /dev/null +++ b/src/app/hooks/useSocketMarkers.js @@ -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; +} diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index d27a048..58b156e 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -9,6 +9,7 @@ import HeaderBarMenu from "../components/HeaderBarMenu"; import { getFormsAnswers } from "../hooks/useFormsAswers"; import SocketClient from "../api/Websockets/SocketClient"; import { useFiltering } from "../hooks/useFiltering"; +import useSocketMarkers from "../hooks/useSocketMarkers"; export default function MapFeedScreen(props) { HeaderBarMenu(props.navigation); @@ -16,7 +17,7 @@ export default function MapFeedScreen(props) { const focusChanged = attachFocusToQuery(); //const [error, setError] = useState(false); const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado) - const [data, _] = useState(useFiltering().forms); + //console.log(markersdb); const [dataOptionsToShow, setDataOptionsToShow] = useState({ @@ -32,11 +33,15 @@ export default function MapFeedScreen(props) { riverFlood: false, }, }); - const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data)); - useEffect(() => { - setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data)); - }, [dataOptionsToShow, focusChanged]); - console.log(markers); + + const markers = useSocketMarkers(); + console.log("\n\n============================================Markers:\n "+JSON.stringify(markers)); + //console.log(markers); + //const markers = getFormsAnswers(dataOptionsToShow, focusChanged); + // useEffect(() => { + // setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data)); + // }, [dataOptionsToShow, focusChanged]); + //console.log(markers); // useEffect(() => {