Browse Source

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

master
analuizaff 3 years ago
parent
commit
9392faf025
  1. 61
      src/app/components/MapDataMenu.js
  2. 3
      src/app/components/MapMarkerList.js
  3. 28
      src/app/components/map/OpenStreetMap.js
  4. 4
      src/app/screens/MapFeedScreen.js

61
src/app/components/MapDataMenu.js

@ -219,10 +219,10 @@ function ListDataOptions(
height: 36, height: 36,
justifyContent: "center", justifyContent: "center",
borderRadius: 6, borderRadius: 6,
backgroundColor: item ? colors.activated : colors.notActivated,
backgroundColor: !item ? colors.activated : colors.notActivated,
}} }}
> >
<Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
<Text style={styles.text}>{!item ? "ADICIONAR" : "REMOVER"}</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -243,10 +243,7 @@ function DataOriginOptions({
flexDirection: "column", flexDirection: "column",
}} }}
> >
<ScrollView
height={270}
automaticallyAdjustContentInsets={true}
>
<ScrollView height={270} automaticallyAdjustContentInsets={true}>
<View> <View>
{dataOptions[dataOriginToShow].map((option) => {dataOptions[dataOriginToShow].map((option) =>
ListDataOptions( ListDataOptions(
@ -262,26 +259,15 @@ function DataOriginOptions({
); );
} }
function DataMenuBody({ setShowModal }) {
function DataMenuBody({
setShowModal,
dataOptionsToShow,
setDataOptionsToShow,
}) {
const [dataOriginToShow, setDataOriginToShow] = useState("oficial"); const [dataOriginToShow, setDataOriginToShow] = useState("oficial");
const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: {
automaticPluviometer: false,
susceptibilityAreas: false,
},
citzen: {
floodRisk: false,
pluviometer: true,
rain: false,
floodZones: true,
riverFlood: true,
},
});
return ( return (
<View
backgroundColor={colors.grayBG}
>
<View backgroundColor={colors.grayBG}>
<DataMenuHeader setShowModal={setShowModal} /> <DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector <DataOriginSelector
dataOriginToShow={dataOriginToShow} dataOriginToShow={dataOriginToShow}
@ -289,8 +275,8 @@ function DataMenuBody({ setShowModal }) {
/> />
<DataOriginOptions <DataOriginOptions
dataOptionsToShow={dataOptionsToShow} dataOptionsToShow={dataOptionsToShow}
dataOriginToShow={dataOriginToShow}
setDataOptionsToShow={setDataOptionsToShow} setDataOptionsToShow={setDataOptionsToShow}
dataOriginToShow={dataOriginToShow}
/> />
</View> </View>
); );
@ -298,31 +284,30 @@ function DataMenuBody({ setShowModal }) {
function ModalOpenBtn({ setShowModal }) { function ModalOpenBtn({ setShowModal }) {
return ( return (
<TouchableOpacity
onPress={() => setShowModal()}
>
<TouchableOpacity onPress={() => setShowModal()}>
<View <View
style={{ style={{
width: "100%", width: "100%",
height: 48, height: 48,
backgroundColor: colors.primary, backgroundColor: colors.primary,
justifyContent: "center", justifyContent: "center",
alignItems: "center"
}}>
alignItems: "center",
}}
>
<Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text> <Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
export default function MapDataMenu(props) {
export default function MapDataMenu({
dataOptionsToShow,
setDataOptionsToShow,
}) {
const [showModal, setShowModal] = useState(null); const [showModal, setShowModal] = useState(null);
return ( return (
<View
>
<ModalOpenBtn
setShowModal={() => setShowModal(true)}/>
<View>
<ModalOpenBtn setShowModal={() => setShowModal(true)} />
<SelfClosingModal <SelfClosingModal
style={{ position: "absolute" }} style={{ position: "absolute" }}
@ -331,7 +316,11 @@ export default function MapDataMenu(props) {
showModal={showModal} showModal={showModal}
setShowModal={setShowModal} setShowModal={setShowModal}
> >
<DataMenuBody setShowModal={setShowModal} />
<DataMenuBody
setShowModal={setShowModal}
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
</SelfClosingModal> </SelfClosingModal>
</View> </View>
); );

3
src/app/components/MapMarkerList.js

@ -18,14 +18,13 @@ function isRequestedValue(
} }
function MapMarkerList({ function MapMarkerList({
reload = null,
markers,
renderRain = true, renderRain = true,
renderFlood = true, renderFlood = true,
renderRiver = true, renderRiver = true,
renderPluviometer = true, renderPluviometer = true,
renderOfficialPluviometer = true, renderOfficialPluviometer = true,
}) { }) {
const markers = useMarkers(reload);
// FIXME: Resolve this later!!! // FIXME: Resolve this later!!!
return markers.markers; return markers.markers;

28
src/app/components/map/OpenStreetMap.js

@ -9,6 +9,7 @@ import {
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import html_content from "./Map.js"; import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu"; import MapDataMenu from "../MapDataMenu";
import {MapMarkerList} from "../MapMarkerList";
function bindEventsToListeners( function bindEventsToListeners(
@ -37,16 +38,35 @@ function notEmpy(lista) {
} }
export default function OpenStreetMap({ export default function OpenStreetMap({
markersList,
markers,
clickListener, clickListener,
moveEndListener, moveEndListener,
isForm=false isForm=false
}) { }) {
const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: {
automaticPluviometer: false,
susceptibilityAreas: false,
},
citzen: {
floodRisk: false,
pluviometer: true,
rain: false,
floodZones: true,
riverFlood: true,
},
});
console.log(dataOptionsToShow)
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
const [markerListener, setMarkerListener] = useState(null); const [markerListener, setMarkerListener] = useState(null);
const viewFunction = setViewCode(global.location.lat, global.location.long); const viewFunction = setViewCode(global.location.lat, global.location.long);
const markersList = MapMarkerList({markers: markers, renderRain: true})
markersList && markersList &&
mapRef && mapRef &&
notEmpy(markersList) && notEmpy(markersList) &&
@ -90,7 +110,11 @@ export default function OpenStreetMap({
setShowModal={setMarkerListener} setShowModal={setMarkerListener}
markers={markersList} markers={markersList}
/> />
<MapDataMenu/>
<MapDataMenu
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}/>
</View>)} </View>)}
</View> </View>
); );

4
src/app/screens/MapFeedScreen.js

@ -4,10 +4,12 @@ import OpenStreetMap from "../components/map/OpenStreetMap";
import attachFocusToQuery from "../hooks/useFocus"; import attachFocusToQuery from "../hooks/useFocus";
import { MapMarkerList } from "../components/MapMarkerList"; import { MapMarkerList } from "../components/MapMarkerList";
import formsApi from "../api/getforms"; import formsApi from "../api/getforms";
import useMarkers from "../hooks/selectFromDB";
export default function MapFeedScreen() { export default function MapFeedScreen() {
const focusChanged = attachFocusToQuery(); const focusChanged = attachFocusToQuery();
const [error, setError] = useState(false); const [error, setError] = useState(false);
const markers = useMarkers(focusChanged);
// useEffect(() => { // useEffect(() => {
// loadForms(); // loadForms();
@ -27,7 +29,7 @@ export default function MapFeedScreen() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
markersList={MapMarkerList({ reload: focusChanged, renderRain: true })}
markers={markers}
centerUserLocation={true} centerUserLocation={true}
/> />
</View> </View>

Loading…
Cancel
Save