From 9481b2bf8c9f93ae7c78f9b77d6dce6257f1c8ab Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Fri, 27 Aug 2021 17:50:35 -0300 Subject: [PATCH 1/4] Attaching filter rules to markers appearing/disappearing on map Strategy: Remove all markers before attaching new ones (already selected the ones the user wants to see) --- src/app/components/MapMarkerList.js | 49 +++++------------ src/app/components/map/LeafLetMap.js | 24 +++++++-- src/app/components/map/OpenStreetMap.js | 70 +++++++++++++------------ src/app/hooks/selectFromDB.js | 3 +- 4 files changed, 69 insertions(+), 77 deletions(-) diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index f2d3862..4d7d36c 100644 --- a/src/app/components/MapMarkerList.js +++ b/src/app/components/MapMarkerList.js @@ -1,45 +1,20 @@ -import useMarkers from "../hooks/selectFromDB"; - -function isRequestedValue( - item, - renderRain, - renderFlood, - renderRiver, - renderPluviometer, - renderOfficialPluviometer -) { +function isRequestedValue(item, renderOptions) { return ( - (item.name == "pluviometer" && renderPluviometer) || - (item.name == "officialPluviometer") & renderOfficialPluviometer || - (item.name == "rain" && renderRain) || - (item.name == "river" && renderRiver) || - (item.name == "flood" && renderFlood) + (item.name == "pluviometer" && renderOptions.citzen.pluviometer) || + (item.name == "officialPluviometer" && + renderOptions.oficial.automaticPluviometer) || + (item.name == "rain" && renderOptions.citzen.rain) || + (item.name == "river" && renderOptions.citzen.riverFlood) || + (item.name == "flood" && renderOptions.citzen.floodRisk) ); } -function MapMarkerList({ - markers, - renderRain = true, - renderFlood = true, - renderRiver = true, - renderPluviometer = true, - renderOfficialPluviometer = true, -}) { - - // FIXME: Resolve this later!!! - return markers.markers; +function MapMarkerList({ markers, renderOptions }) { + if (!markers) return null; - // return [...markers.markers].filter(([k, item]) => { - // isRequestedValue( - // item, - // renderRain, - // renderFlood, - // renderRiver, - // renderPluviometer, - // renderOfficialPluviometer - // ) - // } - // ); + return [...markers.markers].filter(([_, item]) => { + return isRequestedValue(item, renderOptions); + }); } export { MapMarkerList }; diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index f89a4fd..d43b0f5 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -59,6 +59,15 @@ function handleEvent(event) { return code_to_function[payload.code](payload); } +function deleteAllMarkers(mapRef) { + mapRef.injectJavaScript(` + for (const [key, value] of Object.entries(markers)) { + map.removeLayer(value); + } + markers = {}; + `); +} + async function insertMarker(mapRef, ID, coordinate, icon) { mapRef.injectJavaScript(` var customIcon = L.divIcon({ @@ -70,13 +79,18 @@ 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}], {icon: customIcon, ID: ${ID}}); - // Add marker to map and bing callback event to its function + // Add marker to map and bind callback event to its function markers[${ID}].addTo(map).on('click', onPopupClick); }`); } -export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode }; +export { + loadHTMLFile, + handleEvent, + insertMarker, + goToRegion, + setViewCode, + deleteAllMarkers, +}; diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 5ac9e01..6bf0d21 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -1,16 +1,16 @@ import React, { useState, useEffect } from "react"; -import { View, StyleSheet, Text } from "react-native"; +import { View } from "react-native"; import WebView from "react-native-webview"; import { setViewCode, handleEvent, insertMarker, + deleteAllMarkers, } from "./LeafLetMap"; import MapModal from "../MapModal"; import html_content from "./Map.js"; import MapDataMenu from "../MapDataMenu"; -import {MapMarkerList} from "../MapMarkerList"; - +import { MapMarkerList } from "../MapMarkerList"; function bindEventsToListeners( event, @@ -34,14 +34,14 @@ function bindEventsToListeners( } function notEmpy(lista) { - return lista && lista.size > 0; + return lista && lista.length > 0; } export default function OpenStreetMap({ markers, clickListener, moveEndListener, - isForm=false + isForm = false, }) { const [dataOptionsToShow, setDataOptionsToShow] = useState({ oficial: { @@ -49,7 +49,7 @@ export default function OpenStreetMap({ susceptibilityAreas: false, }, citzen: { - floodRisk: false, + floodRisk: true, pluviometer: true, rain: false, floodZones: true, @@ -57,31 +57,34 @@ export default function OpenStreetMap({ }, }); - - console.log(dataOptionsToShow) - const [mapRef, setMapRef] = useState(null); const webviewContent = html_content; const [markerListener, setMarkerListener] = useState(null); const viewFunction = setViewCode(global.location.lat, global.location.long); - const markersList = MapMarkerList({markers: markers, renderRain: true}) + const markersList = MapMarkerList({ + markers: markers, + renderOptions: dataOptionsToShow, + }); + // console.log(markersList) - markersList && - mapRef && - notEmpy(markersList) && - markersList.forEach((val, _) => { - insertMarker(mapRef, val.ID, val.coordinate, val.image); - }); + // markersList && + // mapRef && + // notEmpy(markersList) && + // markersList.forEach((val, _) => { + // // console.log(val); + // insertMarker(mapRef, val.ID, val.coordinate, val.image); + // }); useEffect(() => { - markersList && - mapRef && - notEmpy(markersList) && - markersList.forEach((val, _) => { - insertMarker(mapRef, val.ID, val.coordinate, val.image); + if (markersList && mapRef && notEmpy(markersList)) { + deleteAllMarkers(mapRef); + + markersList.forEach((val, k) => { + insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image); }); - }, [markersList]) + } + }, [markersList, dataOptionsToShow]); return ( @@ -104,18 +107,19 @@ export default function OpenStreetMap({ /> )} {!isForm && ( - - + + - - - )} + + + )} ); } diff --git a/src/app/hooks/selectFromDB.js b/src/app/hooks/selectFromDB.js index 05ecaf9..76d3750 100644 --- a/src/app/hooks/selectFromDB.js +++ b/src/app/hooks/selectFromDB.js @@ -99,11 +99,10 @@ function parseFloodZones(row) { } function parseRiverLevel(row) { - console.log("IDDD " + row["Id"]); if (!is_valid(row["Id"], "river")) { return null; } - console.log(JSON.stringify(row)); + // console.log(JSON.stringify(row)); // displacement += offset; const riverLevel = ["baixo", "normal", "alto", "transbordando"]; const riverIdx = row["RiverIdx"]; From 03cbcefbacc28e23b9ccaee103e33f9fb9668f62 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Fri, 27 Aug 2021 18:00:44 -0300 Subject: [PATCH 2/4] Fixing padding bug in MapModal. --- src/app/components/MapModal.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js index 087fd27..689c150 100644 --- a/src/app/components/MapModal.js +++ b/src/app/components/MapModal.js @@ -214,6 +214,7 @@ function MapModal({showModal, setShowModal, markers}) { if (currentMarker != undefined && showModal != null) { return ( Date: Fri, 27 Aug 2021 18:17:33 -0300 Subject: [PATCH 3/4] Adding profile screen navigator in header bar --- src/app/screens/ForecastScreen.js | 2 ++ src/app/screens/MapFeedScreen.js | 5 ++++- src/app/screens/MessagesScreen.js | 2 ++ src/app/screens/SharingDataScreen.js | 2 ++ src/package.json | 2 +- 5 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js index 4eed66d..b697af1 100644 --- a/src/app/screens/ForecastScreen.js +++ b/src/app/screens/ForecastScreen.js @@ -7,6 +7,7 @@ import getWeatherForecast from "../api/weather_forecast"; import assets from "../config/assets"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; import Swipeable from "react-native-gesture-handler/Swipeable"; +import HeaderBarMenu from "../components/HeaderBarMenu"; function forecastDay(day, setDay) { return ( @@ -297,6 +298,7 @@ function renderErrorScreen() { } function ForecastScreen(props) { + HeaderBarMenu(props.navigation); const forecast = getWeatherForecast(); return ( diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 60ce4e5..c9c9679 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -5,8 +5,11 @@ import attachFocusToQuery from "../hooks/useFocus"; import { MapMarkerList } from "../components/MapMarkerList"; import formsApi from "../api/getforms"; import useMarkers from "../hooks/selectFromDB"; +import HeaderBarMenu from "../components/HeaderBarMenu"; + +export default function MapFeedScreen(props) { + HeaderBarMenu(props.navigation); -export default function MapFeedScreen() { const focusChanged = attachFocusToQuery(); const [error, setError] = useState(false); const markers = useMarkers(focusChanged); diff --git a/src/app/screens/MessagesScreen.js b/src/app/screens/MessagesScreen.js index 8a773b1..4c94268 100644 --- a/src/app/screens/MessagesScreen.js +++ b/src/app/screens/MessagesScreen.js @@ -1,8 +1,10 @@ import React from "react"; import Screen from "../components/Screen"; import InDevelopment from "../components/InDevelopment"; +import HeaderBarMenu from "../components/HeaderBarMenu"; function MessageScreen(props) { + HeaderBarMenu(props.navigation); return ( diff --git a/src/app/screens/SharingDataScreen.js b/src/app/screens/SharingDataScreen.js index 294df99..2c5b134 100644 --- a/src/app/screens/SharingDataScreen.js +++ b/src/app/screens/SharingDataScreen.js @@ -5,9 +5,11 @@ import { TouchableOpacity, ScrollView } from "react-native"; import assets from "../config/assets"; import { scaleDimsFromWidth, dimensions } from "../config/dimensions"; import SvgLabeledButton from "../components/SvgLabeledButton"; +import HeaderBarMenu from "../components/HeaderBarMenu"; //1/3 function SharingDataScreen({ navigation }) { + HeaderBarMenu(navigation); const dims = scaleDimsFromWidth(93, 106, 35); // const dims = { width: "100%", height: "100%" }; diff --git a/src/package.json b/src/package.json index 33bed79..bde29e5 100644 --- a/src/package.json +++ b/src/package.json @@ -59,7 +59,7 @@ "react-native-web": "~0.13.12", "react-native-webview": "10.7.0", "react-navigation": "^4.4.3", - "react-navigation-header-buttons": "^7.0.1", + "react-navigation-header-buttons": "^7.0.2", "react-navigation-tabs": "^2.10.1", "rn-checkbox-list": "^0.4.0", "searchable-flatlist": "0.0.4", From 46b97f1237e00332b508abb042da3882914de76d Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Fri, 27 Aug 2021 18:20:39 -0300 Subject: [PATCH 4/4] Removing "Perfil" and "Messages screens from app navigator" --- src/app/navigation/AppNavigator.js | 62 +++++++++++++------------- src/app/navigation/NewListingButton.js | 1 + 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/app/navigation/AppNavigator.js b/src/app/navigation/AppNavigator.js index 75df1ff..0a77ec9 100644 --- a/src/app/navigation/AppNavigator.js +++ b/src/app/navigation/AppNavigator.js @@ -22,30 +22,16 @@ const AppNavigator = () => ( ), }} /> - ( - - ), - }} - /> - ({ - tabBarButton: () => ( + tabBarButton: () => ( - navigation.navigate("SharingData",{ - screen:"Voltar", - initial: false, + navigation.navigate("SharingData", { + screen: "Voltar", + initial: false, }) } /> @@ -59,29 +45,43 @@ const AppNavigator = () => ( ), })} /> - ( ), }} /> - ( - - ), - }} - /> + + {/* ( */} + {/* */} + {/* ), */} + {/* }} */} + {/* /> */} + + {/* ( */} + {/* */} + {/* ), */} + {/* }} */} + {/* /> */} ); diff --git a/src/app/navigation/NewListingButton.js b/src/app/navigation/NewListingButton.js index cc15b9d..f980c65 100644 --- a/src/app/navigation/NewListingButton.js +++ b/src/app/navigation/NewListingButton.js @@ -22,6 +22,7 @@ const styles = StyleSheet.create({ container: { alignItems: "center", backgroundColor: colors.primary, + marginHorizontal: 60, borderColor: colors.white, borderRadius: 50, borderWidth: 0,