Browse Source

Inverting logic in DataMenu and starting to apply filters in map

master
GabrielTrettel 3 years ago
parent
commit
ae5e1959f1
  1. 65
      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

65
src/app/components/MapDataMenu.js

@ -219,10 +219,10 @@ function ListDataOptions(
height: 36,
justifyContent: "center",
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>
</TouchableOpacity>
</View>
@ -243,10 +243,7 @@ function DataOriginOptions({
flexDirection: "column",
}}
>
<ScrollView
height={270}
automaticallyAdjustContentInsets={true}
>
<ScrollView height={270} automaticallyAdjustContentInsets={true}>
<View>
{dataOptions[dataOriginToShow].map((option) =>
ListDataOptions(
@ -262,26 +259,15 @@ function DataOriginOptions({
);
}
function DataMenuBody({ setShowModal }) {
function DataMenuBody({
setShowModal,
dataOptionsToShow,
setDataOptionsToShow,
}) {
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 (
<View
backgroundColor={colors.grayBG}
>
<View backgroundColor={colors.grayBG}>
<DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector
dataOriginToShow={dataOriginToShow}
@ -289,49 +275,52 @@ function DataMenuBody({ setShowModal }) {
/>
<DataOriginOptions
dataOptionsToShow={dataOptionsToShow}
dataOriginToShow={dataOriginToShow}
setDataOptionsToShow={setDataOptionsToShow}
dataOriginToShow={dataOriginToShow}
/>
</View>
);
}
function ModalOpenBtn({setShowModal}) {
function ModalOpenBtn({ setShowModal }) {
return (
<TouchableOpacity
onPress={() => setShowModal()}
>
<TouchableOpacity onPress={() => setShowModal()}>
<View
style={{
width: "100%",
height: 48,
backgroundColor: colors.primary,
justifyContent: "center",
alignItems: "center"
}}>
alignItems: "center",
}}
>
<Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text>
</View>
</TouchableOpacity>
);
}
export default function MapDataMenu(props) {
export default function MapDataMenu({
dataOptionsToShow,
setDataOptionsToShow,
}) {
const [showModal, setShowModal] = useState(null);
return (
<View
>
<ModalOpenBtn
setShowModal={() => setShowModal(true)}/>
<View>
<ModalOpenBtn setShowModal={() => setShowModal(true)} />
<SelfClosingModal
style={{position:"absolute"}}
style={{ position: "absolute" }}
animationType="slide"
transparent={true}
showModal={showModal}
setShowModal={setShowModal}
>
<DataMenuBody setShowModal={setShowModal} />
<DataMenuBody
setShowModal={setShowModal}
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
</SelfClosingModal>
</View>
);

3
src/app/components/MapMarkerList.js

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

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

@ -9,6 +9,7 @@ import {
import MapModal from "../MapModal";
import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu";
import {MapMarkerList} from "../MapMarkerList";
function bindEventsToListeners(
@ -37,16 +38,35 @@ function notEmpy(lista) {
}
export default function OpenStreetMap({
markersList,
markers,
clickListener,
moveEndListener,
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 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) &&
@ -90,7 +110,11 @@ export default function OpenStreetMap({
setShowModal={setMarkerListener}
markers={markersList}
/>
<MapDataMenu/>
<MapDataMenu
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}/>
</View>)}
</View>
);

4
src/app/screens/MapFeedScreen.js

@ -4,10 +4,12 @@ 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";
export default function MapFeedScreen() {
const focusChanged = attachFocusToQuery();
const [error, setError] = useState(false);
const markers = useMarkers(focusChanged);
// useEffect(() => {
// loadForms();
@ -27,7 +29,7 @@ export default function MapFeedScreen() {
return (
<View style={styles.container}>
<OpenStreetMap
markersList={MapMarkerList({ reload: focusChanged, renderRain: true })}
markers={markers}
centerUserLocation={true}
/>
</View>

Loading…
Cancel
Save