diff --git a/src/app/assets/dataMenu/aguaRio.svg b/src/app/assets/dataMenu/aguaRio.svg
new file mode 100644
index 0000000..0661538
--- /dev/null
+++ b/src/app/assets/dataMenu/aguaRio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/assets/dataMenu/alagamento.svg b/src/app/assets/dataMenu/alagamento.svg
new file mode 100644
index 0000000..0196166
--- /dev/null
+++ b/src/app/assets/dataMenu/alagamento.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/assets/dataMenu/chuva.svg b/src/app/assets/dataMenu/chuva.svg
new file mode 100644
index 0000000..a9816d1
--- /dev/null
+++ b/src/app/assets/dataMenu/chuva.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/assets/dataMenu/pluviometroArtesanal.svg b/src/app/assets/dataMenu/pluviometroArtesanal.svg
new file mode 100644
index 0000000..33f9df4
--- /dev/null
+++ b/src/app/assets/dataMenu/pluviometroArtesanal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/assets/dataMenu/pluviometroOficial.svg b/src/app/assets/dataMenu/pluviometroOficial.svg
new file mode 100644
index 0000000..61924c9
--- /dev/null
+++ b/src/app/assets/dataMenu/pluviometroOficial.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js
index 787e61f..b927217 100644
--- a/src/app/components/MapDataMenu.js
+++ b/src/app/components/MapDataMenu.js
@@ -1,12 +1,20 @@
import React, { useState } from "react";
-
-import { View, StyleSheet, Text, Button, TouchableOpacity } from "react-native";
+import { dimensions, screen_width } from "../config/dimensions";
+import {
+ View,
+ StyleSheet,
+ Text,
+ Button,
+ TouchableOpacity,
+ ScrollView,
+} from "react-native";
import SelfClosingModal from "./SelfClosingModal";
import colors from "../config/colors";
-import { FontAwesome5 } from '@expo/vector-icons';
+import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Shadow } from "react-native-shadow-2";
+import assets from "../config/assets";
function DataMenuHeader({ setShowModal }) {
return (
@@ -32,9 +40,9 @@ function DataMenuHeader({ setShowModal }) {
);
}
-function DataOriginSelector() {
- const [dataOriginToShow, setDataOriginToShow] = useState("oficial")
- const bgToUse = (selected) => dataOriginToShow == selected ? colors.secondary : colors.gray;
+function DataOriginSelector({ dataOriginToShow, setDataOriginToShow }) {
+ const bgToUse = (selected) =>
+ dataOriginToShow == selected ? colors.secondary : colors.gray;
return (
setDataOriginToShow("oficial")}
>
- OFICIAL
+ OFICIAL
-
setDataOriginToShow("citzen")}
>
- CIDADÃO
+ CIDADÃO
);
}
+// FIXME: Change icon values in the future
+const dataOptions = {
+ oficial: [
+ {
+ name: "Área de suscetibilidade",
+ code: "susceptibilityAreas",
+ source: "CPRM",
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ {
+ name: "Pluviômetro automático",
+ code: "automaticPluviometer",
+ source: "Cemaden",
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ ],
+ citzen: [
+ {
+ name: "Risco de inundação",
+ code: "floodRisk",
+ source: null,
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ {
+ name: "Pluviômetro artesanal",
+ code: "pluviometer",
+ source: null,
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ {
+ name: "Intensidade de chuva",
+ code: "rain",
+ source: null,
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ {
+ name: "Área de alagamento",
+ code: "floodZones",
+ source: null,
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ {
+ name: "Água do rio",
+ code: "riverFlood",
+ source: null,
+ icon: assets.floodZones.FloodZonesIcon,
+ },
+ ],
+};
+
+function Border() {
+ return (
+
+ );
+}
+
+function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
+ const item = dataOptionsToShow[dataOriginToShow][option.code];
+ const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]: {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
+
+
+ return (
+
+
+
+
+
+ {option.name}
+ {option.source && (
+
+ Fonte: {option.source}
+
+ )}
+
+
+
+ {setDataOptionsToShow(dataOptionObject)}}
+ >
+
+
+ {item ? "ADICIONAR" : "REMOVER"}
+
+
+
+
+
+
+ );
+}
+
+function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
+ return (
+
+
+ {dataOptions[dataOriginToShow].map((option) =>
+ ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
+ )}
+
+
+ );
+}
+
function DataMenuBody({ setShowModal }) {
+ 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,
+ },
+ });
+ console.log(dataOptionsToShow)
return (
-
+
+
);
}
@@ -128,7 +300,12 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
alignItems: "center",
justifyContent: "flex-start",
- flexDirection: "row"
+ flexDirection: "row",
+ },
+ itensText: {
+ color: colors.black,
+ fontWeight: "500",
+ fontSize: 16,
},
text: {
color: colors.white,
diff --git a/src/app/config/colors.js b/src/app/config/colors.js
index bda41f4..fb66d36 100644
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@@ -7,8 +7,11 @@ export default {
light: "#f8f4f4",
dark: "#0c0c0c",
danger: "#ff5252",
+ notActivated: "rgba(201, 69, 54, 0.87)",
+ activated: "rgba(26, 138, 17, 0.63)",
lightGray: "#C4C4C4",
gray: "#999999",
+ subText: "#8B8C8C",
lightestGray: "#F0F0F0",
lightBlue: "#1976D2",
gold: "#ffd700",