From f26c1d7a84843029cea97da0fbbf767cb467c76e Mon Sep 17 00:00:00 2001 From: analuizaff Date: Sun, 5 Sep 2021 17:55:35 -0300 Subject: [PATCH 1/4] Starting to replace local database with API data --- package-lock.json | 3 ++ src/app/components/MapMarkerList.js | 5 ++- src/app/components/map/LeafLetMap.js | 2 +- src/app/components/map/OpenStreetMap.js | 15 +------ src/app/hooks/useFiltering.js | 59 +++++++++++++++++++++++++ src/app/hooks/useFormsAswers.js | 46 +++++++++++++++++++ 6 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 package-lock.json create mode 100644 src/app/hooks/useFiltering.js create mode 100644 src/app/hooks/useFormsAswers.js diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..48e341a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index 4d7d36c..c3d3665 100644 --- a/src/app/components/MapMarkerList.js +++ b/src/app/components/MapMarkerList.js @@ -4,14 +4,15 @@ function isRequestedValue(item, renderOptions) { (item.name == "officialPluviometer" && renderOptions.oficial.automaticPluviometer) || (item.name == "rain" && renderOptions.citzen.rain) || - (item.name == "river" && renderOptions.citzen.riverFlood) || - (item.name == "flood" && renderOptions.citzen.floodRisk) + (item.name == "riverFlood" && renderOptions.citzen.riverFlood) || + (item.name == "floodZones" && renderOptions.citzen.floodRisk) ); } function MapMarkerList({ markers, renderOptions }) { if (!markers) return null; + return [...markers.markers].filter(([_, item]) => { return isRequestedValue(item, renderOptions); }); diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index d43b0f5..5f3d3fc 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -79,7 +79,7 @@ async function insertMarker(mapRef, ID, coordinate, icon) { // Check if there is no other marker with same ID already in map if (!(${ID} in markers)) { // Creates marker object - markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}}); + markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], { ID: ${ID}}); // Add marker to map and bind callback event to its function markers[${ID}].addTo(map).on('click', onPopupClick); diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index e48143e..7174ccc 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -41,21 +41,10 @@ export default function OpenStreetMap({ markers, clickListener, moveEndListener, + dataOptionsToShow, + setDataOptionsToShow, isForm = false, }) { - const [dataOptionsToShow, setDataOptionsToShow] = useState({ - oficial: { - automaticPluviometer: false, - susceptibilityAreas: false, - }, - citzen: { - floodRisk: true, - pluviometer: true, - rain: false, - floodZones: true, - riverFlood: true, - }, - }); const [mapRef, setMapRef] = useState(null); const webviewContent = html_content; diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js new file mode 100644 index 0000000..144bf22 --- /dev/null +++ b/src/app/hooks/useFiltering.js @@ -0,0 +1,59 @@ +function useFiltering() { + const filters = { + "citizen": + [ + { + name: "floodZones", + endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3", + response: null, + + }, { + name: "rain", + endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1", + response: null, + }, + { + name: "riverFlood", + endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1", + response: null, + }, + { + name: "pluviometer", + endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1", + response: null, + } + ], + "oficial": + [ + { + name: "susceptibilityAreas", + endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1", + response: null, + }, + { + name: "automaticPluviometer", + endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1", + response: null, + } + ] + } + + return filters; +} + +const endPoint_susceptibilityAreas = () => { + return "type=FLOODZONES_OFFICIAL" + + "&lat=-9.98132" + + "&lon=-67.81544" + + "&buffer=5000" + + "&limit=1" +} + +const endPoint_automaticPluviometer = () => { + return "type=PLUVIOMETERS_OFFICIAL" + + "&lat=-9.98132" + + "&lon=-67.81544" + + "&buffer=5000" + + "&limit=1" +} +export { endPoint_susceptibilityAreas, endPoint_automaticPluviometer, useFiltering }; diff --git a/src/app/hooks/useFormsAswers.js b/src/app/hooks/useFormsAswers.js new file mode 100644 index 0000000..e65e67d --- /dev/null +++ b/src/app/hooks/useFormsAswers.js @@ -0,0 +1,46 @@ +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"; + +function buildMarkersArray(markers, answer) { + if (answer.response) { + const response = JSON.parse(answer.response).responseData.array_to_json[0]; + var markerObject = { + ID: response.formsanswersid, + name: answer.name, + address: "",//response.fieldsanswerseventaddress, + coordinate: { + latitude: response.formsanswerslatitude, + longitude: response.formsanswerslongitude, + }, + date: response.fias[0].fieldsanswersdtfilling, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime, + description: "", //response.fielsanswercomment, + image: "",//getMarkerImage(answer.name), + title: "", //response.fieldsanswerssituation + } + markers.set(markerObject.ID, markerObject); + } + +} + +const getFormsAnswers = (dataOptionObject) => { + var markers = { markers: new Map() }; + const answers = (SocketClient(dataOptionObject)); + answers.citizen.forEach((r) => buildMarkersArray(markers.markers, r)); + + console.log(markers); + + return markers; + +} + + + + + + + +export { getFormsAnswers }; From 0f81d482d1e5dd3314da1b9cdf6090e9b1f7df7a Mon Sep 17 00:00:00 2001 From: analuizaff Date: Mon, 6 Sep 2021 18:41:02 -0300 Subject: [PATCH 2/4] create socket only for requested data through the menu --- src/app/api/Websockets/SocketClient.js | 45 ++++++++++++++++++++++++++ src/app/hooks/useFormsAswers.js | 4 +-- src/app/screens/MapFeedScreen.js | 26 +++++++++++++-- 3 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 src/app/api/Websockets/SocketClient.js diff --git a/src/app/api/Websockets/SocketClient.js b/src/app/api/Websockets/SocketClient.js new file mode 100644 index 0000000..cc791de --- /dev/null +++ b/src/app/api/Websockets/SocketClient.js @@ -0,0 +1,45 @@ +import { useEffect, useState } from 'react'; +import { useFiltering } from '../../hooks/useFiltering'; + +function isRequestedValue(item, renderOptions) { + if ( + (item.name == "pluviometer" && renderOptions.citzen.pluviometer) || + (item.name == "officialPluviometer" && renderOptions.oficial.automaticPluviometer) || + (item.name == "rain" && renderOptions.citzen.rain) || + (item.name == "riverFlood" && renderOptions.citzen.riverFlood) || + (item.name == "floodZones" && renderOptions.citzen.floodRisk) + ) { + return true; + + } +} + +function verify_existingSockets(formType, renderOptions) { + if (formType.response == null && isRequestedValue(formType, renderOptions)) { + console.log("Resposta é null"); + const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint); + + socket.onmessage = ({ data }) => { + formType.response = data; + } + } + else { + console.log("\nresposta preenchida"); + } +} + + +export default function SocketClient(dataOptionObject, focusChanged) { + const [data, setData] = useState(useFiltering()); + + + useEffect(() => { + data.citizen.map((e) => verify_existingSockets(e, dataOptionObject)); + data.oficial.map((e) => verify_existingSockets(e, dataOptionObject)); + + }, [dataOptionObject, focusChanged]); + + return data; +}; + + diff --git a/src/app/hooks/useFormsAswers.js b/src/app/hooks/useFormsAswers.js index e65e67d..c677f87 100644 --- a/src/app/hooks/useFormsAswers.js +++ b/src/app/hooks/useFormsAswers.js @@ -26,13 +26,11 @@ function buildMarkersArray(markers, answer) { } -const getFormsAnswers = (dataOptionObject) => { +const getFormsAnswers = (dataOptionObject, focusChanged) => { var markers = { markers: new Map() }; const answers = (SocketClient(dataOptionObject)); answers.citizen.forEach((r) => buildMarkersArray(markers.markers, r)); - console.log(markers); - return markers; } diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index c9c9679..1bccccf 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -6,13 +6,33 @@ import { MapMarkerList } from "../components/MapMarkerList"; import formsApi from "../api/getforms"; import useMarkers from "../hooks/selectFromDB"; import HeaderBarMenu from "../components/HeaderBarMenu"; +import { getFormsAnswers } from "../hooks/useFormsAswers"; +import SocketClient from "../api/Websockets/SocketClient"; export default function MapFeedScreen(props) { HeaderBarMenu(props.navigation); const focusChanged = attachFocusToQuery(); - const [error, setError] = useState(false); - const markers = useMarkers(focusChanged); + //const [error, setError] = useState(false); + const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado) +// console.log(markersdb); + + const [dataOptionsToShow, setDataOptionsToShow] = useState({ + oficial: { + automaticPluviometer: true, + susceptibilityAreas: false, + }, + citzen: { + floodRisk: true, + pluviometer: true, + rain: true, + floodZones: true, + riverFlood: true, + }, + }); + const markers = getFormsAnswers(dataOptionsToShow, focusChanged); + //console.log(markers); + // useEffect(() => { // loadForms(); @@ -34,6 +54,8 @@ export default function MapFeedScreen(props) { ); From 3ea24504f3ee2892ab8ee34f84bc2d3f97b0808b Mon Sep 17 00:00:00 2001 From: analuizaff Date: Tue, 7 Sep 2021 16:02:43 -0300 Subject: [PATCH 3/4] adding polygons from official floodzones --- src/app/api/Websockets/SocketClient.js | 16 ++-- src/app/components/MapMarkerList.js | 5 +- src/app/components/map/LeafLetMap.js | 19 ++++- src/app/components/map/Map.html | 1 + src/app/components/map/OpenStreetMap.js | 16 +++- src/app/hooks/useFiltering.js | 86 +++++++++------------- src/app/hooks/useFormsAswers.js | 98 ++++++++++++++++++++----- src/app/screens/MapFeedScreen.js | 11 ++- 8 files changed, 159 insertions(+), 93 deletions(-) diff --git a/src/app/api/Websockets/SocketClient.js b/src/app/api/Websockets/SocketClient.js index cc791de..ae10469 100644 --- a/src/app/api/Websockets/SocketClient.js +++ b/src/app/api/Websockets/SocketClient.js @@ -4,10 +4,12 @@ import { useFiltering } from '../../hooks/useFiltering'; function isRequestedValue(item, renderOptions) { if ( (item.name == "pluviometer" && renderOptions.citzen.pluviometer) || - (item.name == "officialPluviometer" && renderOptions.oficial.automaticPluviometer) || + /*(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 == "floodZones" && renderOptions.citzen.floodRisk) || + (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas) ) { return true; @@ -16,26 +18,24 @@ function isRequestedValue(item, renderOptions) { function verify_existingSockets(formType, renderOptions) { if (formType.response == null && isRequestedValue(formType, renderOptions)) { - console.log("Resposta é null"); + // console.log("Resposta é null"); const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint); socket.onmessage = ({ data }) => { formType.response = data; } } - else { + /* else { console.log("\nresposta preenchida"); - } + }*/ } export default function SocketClient(dataOptionObject, focusChanged) { const [data, setData] = useState(useFiltering()); - useEffect(() => { - data.citizen.map((e) => verify_existingSockets(e, dataOptionObject)); - data.oficial.map((e) => verify_existingSockets(e, dataOptionObject)); + data.forms.map((e) => verify_existingSockets(e, dataOptionObject)); }, [dataOptionObject, focusChanged]); diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index c3d3665..55f8566 100644 --- a/src/app/components/MapMarkerList.js +++ b/src/app/components/MapMarkerList.js @@ -1,11 +1,12 @@ function isRequestedValue(item, renderOptions) { return ( (item.name == "pluviometer" && renderOptions.citzen.pluviometer) || - (item.name == "officialPluviometer" && + (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 == "floodZones" && renderOptions.citzen.floodRisk) || + (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas) ); } diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 5f3d3fc..1046e13 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -75,21 +75,34 @@ async function insertMarker(mapRef, ID, coordinate, icon) { html: \`${icon}\`, iconSize: 70 }); - // Check if there is no other marker with same ID already in map if (!(${ID} in markers)) { // Creates marker object - markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], { ID: ${ID}}); - + markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}}); // Add marker to map and bind callback event to its function markers[${ID}].addTo(map).on('click', onPopupClick); }`); } +async function insertPolygon(mapRef, ID, coordinate) { + // console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate)); + var coordinates = JSON.stringify(coordinate.coordinate); + // console.log(ID); + mapRef.injectJavaScript(` + polygons = (L.polygon(${coordinates}, { ID: ${ID}})); + + polygons.addTo(map); + `); + /* mapRef.injectJavaScript(` + + var polygon = L.polygon(${coordinates}).addTo(map); + `);*/ +} export { loadHTMLFile, handleEvent, insertMarker, + insertPolygon, goToRegion, setViewCode, deleteAllMarkers, diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html index 7d1d8eb..5017ae0 100644 --- a/src/app/components/map/Map.html +++ b/src/app/components/map/Map.html @@ -51,6 +51,7 @@