From f26c1d7a84843029cea97da0fbbf767cb467c76e Mon Sep 17 00:00:00 2001 From: analuizaff Date: Sun, 5 Sep 2021 17:55:35 -0300 Subject: [PATCH] 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 };