diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js index d1d4d4a..684b858 100644 --- a/src/app/components/MapDataMenu.js +++ b/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, }} > - {item ? "ADICIONAR" : "REMOVER"} + {!item ? "ADICIONAR" : "REMOVER"} @@ -243,45 +243,31 @@ function DataOriginOptions({ flexDirection: "column", }} > - + - {dataOptions[dataOriginToShow].map((option) => - ListDataOptions( - dataOptionsToShow, - dataOriginToShow, - setDataOptionsToShow, - option - ) - )} - + {dataOptions[dataOriginToShow].map((option) => + ListDataOptions( + dataOptionsToShow, + dataOriginToShow, + setDataOptionsToShow, + option + ) + )} + ); } -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 ( - + ); } -function ModalOpenBtn({setShowModal}) { +function ModalOpenBtn({ setShowModal }) { return ( - setShowModal()} - > + setShowModal()}> + alignItems: "center", + }} + > VISUALIZAR DADOS NO MAPA - + ); } -export default function MapDataMenu(props) { +export default function MapDataMenu({ + dataOptionsToShow, + setDataOptionsToShow, +}) { const [showModal, setShowModal] = useState(null); return ( - - - setShowModal(true)}/> + + setShowModal(true)} /> - + ); diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index 21a0cc0..f2d3862 100644 --- a/src/app/components/MapMarkerList.js +++ b/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; diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index d3af333..5ac9e01 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/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} /> - + + + )} ); diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 8948347..60ce4e5 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/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 (