forked from cemaden-educacao/WPD-MobileApp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.5 KiB
99 lines
2.5 KiB
import React, { useEffect, useContext, useState } from "react";
|
|
import { StyleSheet, View } from "react-native";
|
|
import OpenStreetMap from "../components/map/OpenStreetMap";
|
|
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";
|
|
import { getFormsAnswers } from "../hooks/useFormsAswers";
|
|
import SocketClient from "../api/Websockets/SocketClient";
|
|
import { useFiltering } from "../hooks/useFiltering";
|
|
import useSocketMarkers from "../hooks/useSocketMarkers";
|
|
|
|
export default function MapFeedScreen(props) {
|
|
HeaderBarMenu(props.navigation);
|
|
|
|
const focusChanged = attachFocusToQuery();
|
|
//const [error, setError] = useState(false);
|
|
//const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
|
|
|
|
const [dataOptionsToShow, setDataOptionsToShow] = useState({
|
|
oficial: {
|
|
automaticPluviometer: false,
|
|
susceptibilityAreas: false,
|
|
},
|
|
citzen: {
|
|
floodRisk: false,
|
|
pluviometer: false,
|
|
rain: true,
|
|
floodZones: false,
|
|
riverFlood: false,
|
|
},
|
|
});
|
|
|
|
const markers = useSocketMarkers();
|
|
// console.log(markers);
|
|
|
|
// useEffect(() => {
|
|
// loadForms();
|
|
// }, []);
|
|
|
|
// const loadForms = async () => {
|
|
// const response = await formsApi.getForms();
|
|
// console.log(response);
|
|
// if (!response.ok) {
|
|
// console.log("resposta não ok!");
|
|
// return setError(true);
|
|
// }
|
|
// setError(false);
|
|
// }
|
|
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<OpenStreetMap
|
|
markers={markers}
|
|
centerUserLocation={true}
|
|
dataOptionsToShow={dataOptionsToShow}
|
|
setDataOptionsToShow={setDataOptionsToShow}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#FFF",
|
|
},
|
|
callback: {
|
|
position: "absolute",
|
|
bottom: 30,
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "gray",
|
|
width: "80%",
|
|
padding: 10,
|
|
},
|
|
btn: {
|
|
width: "80%",
|
|
position: "absolute",
|
|
top: 30,
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
alignItems: "center",
|
|
alignSelf: "center",
|
|
},
|
|
btns: {
|
|
backgroundColor: "dodgerblue",
|
|
borderRadius: 10,
|
|
width: 100,
|
|
padding: 10,
|
|
margin: 4,
|
|
alignItems: "center",
|
|
},
|
|
txt: {
|
|
color: "white",
|
|
},
|
|
});
|