Browse Source

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

master
analuizaff 3 years ago
parent
commit
99412a99d4
  1. 49
      src/app/components/MapMarkerList.js
  2. 1
      src/app/components/MapModal.js
  3. 24
      src/app/components/map/LeafLetMap.js
  4. 54
      src/app/components/map/OpenStreetMap.js
  5. 3
      src/app/hooks/selectFromDB.js
  6. 54
      src/app/navigation/AppNavigator.js
  7. 1
      src/app/navigation/NewListingButton.js
  8. 2
      src/app/screens/ForecastScreen.js
  9. 5
      src/app/screens/MapFeedScreen.js
  10. 2
      src/app/screens/MessagesScreen.js
  11. 2
      src/app/screens/SharingDataScreen.js
  12. 2
      src/package.json

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

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

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

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

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

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

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

2
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 (

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

2
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 />

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

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

Loading…
Cancel
Save