Merge branch 'main' of https://github.com/IGSD-UoW/WPD-MobileApp into main

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 };

src/app/components/MapModal.js

@@ -214,6 +214,7 @@ function MapModal({showModal, setShowModal, markers}) {
   if (currentMarker != undefined && showModal != null) {
   return (
     <SelfClosingModal
+      style={{ position: "absolute" }}
       animationType="slide"
       transparent={true}
       showModal={showModal}

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,
+};

src/app/components/map/OpenStreetMap.js

@@ -1,17 +1,17 @@
 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";
 
-
 function bindEventsToListeners(
   event,
   clickListener,
@@ -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})
-
-  markersList &&
-    mapRef &&
-    notEmpy(markersList) &&
-    markersList.forEach((val, _) => {
-      insertMarker(mapRef, val.ID, val.coordinate, val.image);
+  const markersList = MapMarkerList({
+    markers: markers,
+    renderOptions: dataOptionsToShow,
   });
+  // console.log(markersList)
+
+  // 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 (
     <View flex={1}>
@@ -108,14 +111,15 @@ export default function OpenStreetMap({
           <MapModal
             showModal={markerListener}
             setShowModal={setMarkerListener}
-          markers={markersList}
+            markers={markers.markers}
           />
 
           <MapDataMenu
             dataOptionsToShow={dataOptionsToShow}
-          setDataOptionsToShow={setDataOptionsToShow}/>
-
-      </View>)}
+            setDataOptionsToShow={setDataOptionsToShow}
+          />
+        </View>
+      )}
     </View>
   );
 }

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"];

src/app/navigation/AppNavigator.js

@@ -22,20 +22,6 @@ const AppNavigator = () => (
         ),
       }}
     />
-    <Tab.Screen
-      name="Previsão"
-      component={ForecastNavigator}
-      options={{
-        tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons
-            name="check-circle"
-            color={color}
-            size={size}
-          />
-        ),
-      }}
-    />
-
     <Tab.Screen
       name="SharingData"
       component={SharingDataOptionsNavigator}
@@ -59,29 +45,43 @@ const AppNavigator = () => (
         ),
       })}
     />
-
     <Tab.Screen
-      name="Notificação"
-      component={MessagesNavigator}
+      name="Previsão"
+      component={ForecastNavigator}
       options={{
         tabBarIcon: ({ color, size }) => (
           <MaterialCommunityIcons
-            name="bell"
+            name="check-circle"
             color={color}
             size={size}
           />
         ),
       }}
     />
-    <Tab.Screen
-      name="Perfil"
-      component={AccountNavigator}
-      options={{
-        tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="account" color={color} size={size} />
-        ),
-      }}
-    />
+
+    {/* <Tab.Screen */}
+    {/*   name="Notificação" */}
+    {/*   component={MessagesNavigator} */}
+    {/*   options={{ */}
+    {/*     tabBarIcon: ({ color, size }) => ( */}
+    {/*       <MaterialCommunityIcons */}
+    {/*         name="bell" */}
+    {/*         color={color} */}
+    {/*         size={size} */}
+    {/*       /> */}
+    {/*     ), */}
+    {/*   }} */}
+    {/* /> */}
+
+    {/* <Tab.Screen */}
+    {/*   name="Perfil" */}
+    {/*   component={AccountNavigator} */}
+    {/*   options={{ */}
+    {/*     tabBarIcon: ({ color, size }) => ( */}
+    {/*       <MaterialCommunityIcons name="account" color={color} size={size} /> */}
+    {/*     ), */}
+    {/*   }} */}
+    {/* /> */}
   </Tab.Navigator>
 );
 

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,

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 (

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);

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 (
     <Screen>
       <InDevelopment />

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%" };
 

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",