Browse Source

Data menu modal principal logic implemented

master
GabrielTrettel 3 years ago
parent
commit
faa189cd97
  1. 1
      src/app/assets/dataMenu/aguaRio.svg
  2. 1
      src/app/assets/dataMenu/alagamento.svg
  3. 1
      src/app/assets/dataMenu/chuva.svg
  4. 1
      src/app/assets/dataMenu/pluviometroArtesanal.svg
  5. 1
      src/app/assets/dataMenu/pluviometroOficial.svg
  6. 195
      src/app/components/MapDataMenu.js
  7. 3
      src/app/config/colors.js

1
src/app/assets/dataMenu/aguaRio.svg
File diff suppressed because it is too large
View File

1
src/app/assets/dataMenu/alagamento.svg
File diff suppressed because it is too large
View File

1
src/app/assets/dataMenu/chuva.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="f817185d-370e-4e96-a1e6-422cebaa6c80" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="f31556a3-2e8c-4c6d-b9ee-ad9bb4bcd49d" data-name="Camada 1"><path d="M133.24,76a21.77,21.77,0,0,1-21.76,21.77H40.53A21.77,21.77,0,0,1,28.35,57.94a3.58,3.58,0,0,0,1.22-4.51,20.16,20.16,0,0,1-2-8.83,20.53,20.53,0,0,1,20.5-20.51,20.23,20.23,0,0,1,9.07,2.11A3.58,3.58,0,0,0,61,25.75,34.11,34.11,0,0,1,116.76,52.1v.13a3.58,3.58,0,0,0,2.33,3.35A21.87,21.87,0,0,1,133.24,76Z" fill="#3b7097" opacity="0.2"/><path d="M34.76,75.64a25.34,25.34,0,0,1,7.43-17.93,25.62,25.62,0,0,1,3.74-3.08A24.1,24.1,0,0,1,57.3,22.49c.47-.23.94-.44,1.43-.63A24.1,24.1,0,0,0,28,54.63,25.35,25.35,0,0,0,42.22,101H56.11l.06-.31A25.37,25.37,0,0,1,34.76,75.64Z" fill="#fff"/><path d="M140.4,76v0a28.91,28.91,0,0,1-28.92,28.9H40.53A28.92,28.92,0,0,1,20.08,55.53c.6-.6,1.24-1.18,1.9-1.74A27.67,27.67,0,0,1,48.07,16.94a27.26,27.26,0,0,1,10.14,1.92,41.26,41.26,0,0,1,65.64,31A29.07,29.07,0,0,1,140.4,76ZM126.87,91.37A21.61,21.61,0,0,0,133.24,76a21.87,21.87,0,0,0-14.15-20.4,3.58,3.58,0,0,1-2.33-3.35V52.1A34.11,34.11,0,0,0,61,25.75a3.58,3.58,0,0,1-3.86.45,20.23,20.23,0,0,0-9.07-2.11A20.53,20.53,0,0,0,27.57,44.6a20.16,20.16,0,0,0,2,8.83,3.58,3.58,0,0,1-1.22,4.51A21.77,21.77,0,0,0,40.53,97.75h71A21.62,21.62,0,0,0,126.87,91.37Z" fill="#3b7097"/><path d="M120.07,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63,0,0a3.58,3.58,0,0,1-5-5.08l3.62-3.63,0,0A3.58,3.58,0,0,1,120.07,113.05Z" fill="#3b7097"/><path d="M105.2,131a3.57,3.57,0,0,1-1,3.48l-3.62,3.62,0,0a3.58,3.58,0,1,1-5-5.08l3.62-3.62a3.58,3.58,0,0,1,6,1.58Z" fill="#3b7097"/><path d="M97.58,113.05a3.58,3.58,0,0,1,0,5.06L94,121.74a3.58,3.58,0,0,1-5.06-5.06l3.63-3.63A3.58,3.58,0,0,1,97.58,113.05Z" fill="#3b7097"/><path d="M81.77,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62a3.57,3.57,0,1,1-5-5.06l3.62-3.62A3.57,3.57,0,0,1,81.77,129.38Z" fill="#3b7097"/><path d="M75.12,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,75.12,113.05Z" fill="#3b7097"/><path d="M59.3,129.38a3.57,3.57,0,0,1,0,5.06l-3.62,3.62A3.58,3.58,0,0,1,50.62,133l3.62-3.62A3.57,3.57,0,0,1,59.3,129.38Z" fill="#3b7097"/><path d="M52.65,113.05a3.57,3.57,0,0,1,0,5.06L49,121.74l-.05,0a3.57,3.57,0,1,1-5-5.1l3.63-3.63A3.58,3.58,0,0,1,52.65,113.05Z" fill="#3b7097"/><path d="M36.84,129.38a3.57,3.57,0,0,1,0,5.06l-3.63,3.62A3.57,3.57,0,1,1,28.16,133l3.62-3.62A3.57,3.57,0,0,1,36.84,129.38Z" fill="#3b7097"/><path d="M30.19,113.05a3.58,3.58,0,0,1,0,5.06l-3.62,3.63a3.58,3.58,0,1,1-5.06-5.06l3.62-3.63A3.59,3.59,0,0,1,30.19,113.05Z" fill="#3b7097"/></g></svg>

1
src/app/assets/dataMenu/pluviometroArtesanal.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="a038fce1-27a2-498a-bfa8-8124710f6976" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="ac559167-f77d-4c9d-a667-cdf90aebb90c" data-name="Camada 1"><rect x="61.2" y="36.69" width="27.54" height="102.74" fill="#ececec"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#3b7097"/><rect x="63.13" y="35.56" width="11.95" height="103.42" fill="#d9d9d9"/><path d="M62.53,110.68l1.09-2.05c4.32-2.66,5.51-4,9.36-1.16.34.26.68.51,1,.74l2.84,2.06c2.68,2.15,5-.31,5.72-.89l2.87-2.17a2,2,0,0,1,3.19,1.53v27.71a2,2,0,0,1-1.88,2l-22.1,1a2,2,0,0,1-2-1.88l-1-25.06A1.94,1.94,0,0,1,62.53,110.68Z" fill="#9fdfff"/><path d="M75.07,109l-1-.75c-.37-.23-.71-.48-1-.74-3.85-2.86-5-1.5-9.36,1.16l-1.09,2.05a1.94,1.94,0,0,0-.93,1.75l1,25.06a2,2,0,0,0,2,1.88l10.4-.45Z" fill="#7dd6f9"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#727272"/><path d="M42.45,10.57h65.09a0,0,0,0,1,0,0v3.17A21.71,21.71,0,0,1,85.84,35.45H64.16A21.71,21.71,0,0,1,42.45,13.73V10.57A0,0,0,0,1,42.45,10.57Z" fill="#ececec"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#3b7097"/><path d="M45,10.5H74.9a0,0,0,0,1,0,0V35.56a0,0,0,0,1,0,0h-8A21.87,21.87,0,0,1,45,13.69V10.5A0,0,0,0,1,45,10.5Z" fill="#d9d9d9"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#727272"/><rect x="58.91" y="58.81" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="72.94" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="87.07" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="101.19" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="115.32" width="19.68" height="2.05" fill="#727272"/></g></svg>

1
src/app/assets/dataMenu/pluviometroOficial.svg

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g id="f377c9e6-a8c3-4a87-aff8-7b8fd8304542" data-name="Camada 2"><rect width="150" height="150" fill="#fff"/></g><g id="a195a4b6-c3c8-4b0e-abdd-1b56fb675640" data-name="Camada 1"><rect x="61.2" y="36.69" width="27.54" height="102.74" fill="#ececec"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#3b7097"/><rect x="63.13" y="35.56" width="11.95" height="103.42" fill="#d9d9d9"/><path d="M62.53,110.68l1.09-2.05c4.32-2.66,5.51-4,9.36-1.16.34.26.68.51,1,.74l2.84,2.06c2.68,2.15,5-.31,5.72-.89l2.87-2.17a2,2,0,0,1,3.19,1.53v27.71a2,2,0,0,1-1.88,2l-22.1,1a2,2,0,0,1-2-1.88l-1-25.06A1.94,1.94,0,0,1,62.53,110.68Z" fill="#9fdfff"/><path d="M75.07,109l-1-.75c-.37-.23-.71-.48-1-.74-3.85-2.86-5-1.5-9.36,1.16l-1.09,2.05a1.94,1.94,0,0,0-.93,1.75l1,25.06a2,2,0,0,0,2,1.88l10.4-.45Z" fill="#7dd6f9"/><path d="M91.31,142H58.64V34.12H91.31Zm-27.54-5.13h22.4V39.26H63.77Z" fill="#727272"/><path d="M42.45,10.57h65.09a0,0,0,0,1,0,0v3.17A21.71,21.71,0,0,1,85.84,35.45H64.16A21.71,21.71,0,0,1,42.45,13.73V10.57a0,0,0,0,1,0,0Z" fill="#ececec"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#3b7097"/><path d="M45,10.5H74.9a0,0,0,0,1,0,0V35.56a0,0,0,0,1,0,0h-8A21.87,21.87,0,0,1,45,13.69V10.5A0,0,0,0,1,45,10.5Z" fill="#d9d9d9"/><path d="M82.91,38H67.09a27.23,27.23,0,0,1-27.2-27.2V8h70.22v2.81A27.23,27.23,0,0,1,82.91,38ZM45.14,13.13a22.1,22.1,0,0,0,22,19.75H82.91a22.1,22.1,0,0,0,22-19.75Z" fill="#727272"/><rect x="58.91" y="58.81" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="72.94" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="87.07" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="101.19" width="19.68" height="2.05" fill="#727272"/><rect x="58.91" y="115.32" width="19.68" height="2.05" fill="#727272"/><circle cx="99.74" cy="32.38" r="13.26" fill="#4086f4"/><polygon points="98.47 37.7 92.67 31.9 94.05 30.52 98.39 34.86 105.36 27.06 106.81 28.35 98.47 37.7" fill="#fff"/></g></svg>

195
src/app/components/MapDataMenu.js

@ -1,12 +1,20 @@
import React, { useState } from "react"; 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 SelfClosingModal from "./SelfClosingModal";
import colors from "../config/colors"; import colors from "../config/colors";
import { FontAwesome5 } from '@expo/vector-icons';
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Shadow } from "react-native-shadow-2"; import { Shadow } from "react-native-shadow-2";
import assets from "../config/assets";
function DataMenuHeader({ setShowModal }) { function DataMenuHeader({ setShowModal }) {
return ( 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 ( return (
<Shadow <Shadow
@ -67,7 +75,6 @@ function DataOriginSelector() {
<Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text> <Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
style={[styles.choicesBtn, { backgroundColor: bgToUse("citzen") }]} style={[styles.choicesBtn, { backgroundColor: bgToUse("citzen") }]}
onPress={() => setDataOriginToShow("citzen")} onPress={() => setDataOriginToShow("citzen")}
@ -85,7 +92,164 @@ function DataOriginSelector() {
); );
} }
// 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 (
<View
style={{
width: 0.95 * screen_width,
alignSelf: "center",
height: 2,
borderRadius: 2,
paddingHorizontal: 16,
backgroundColor: colors.lightestGray,
}}
/>
);
}
function ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option) {
const item = dataOptionsToShow[dataOriginToShow][option.code];
const dataOptionObject = {...dataOptionsToShow, [dataOriginToShow]: {...dataOptionsToShow[dataOriginToShow], [option.code]: !item}};
return (
<View>
<View
style={{
flex: 1,
height: 76,
flexDirection: "row",
paddingTop: 16,
alignItems: "center",
paddingHorizontal: 16,
paddingBottom: 16,
}}
>
<option.icon width={34} height={24} />
<View
style={{
flex: 1,
marginLeft: 16,
alignItems: "flex-start",
}}
>
<Text style={styles.itensText}>{option.name}</Text>
{option.source && (
<Text
style={[
styles.itensText,
{ color: colors.subText, fontSize: 14 },
]}
>
Fonte: {option.source}
</Text>
)}
</View>
<TouchableOpacity
onPress={() => {setDataOptionsToShow(dataOptionObject)}}
>
<View
style={{
alignContent: "flex-end",
width: 100,
height: 36,
justifyContent: "center",
borderRadius: 6,
backgroundColor: item ? colors.activated : colors.notActivated,
}}
>
<Text style={styles.text}>
{item ? "ADICIONAR" : "REMOVER"}
</Text>
</View>
</TouchableOpacity>
</View>
<Border />
</View>
);
}
function DataOriginOptions({ dataOriginToShow, dataOptionsToShow, setDataOptionsToShow }) {
return (
<View paddingTop={8} height={"100%"}>
<ScrollView >
{dataOptions[dataOriginToShow].map((option) =>
ListDataOptions(dataOptionsToShow, dataOriginToShow, setDataOptionsToShow, option)
)}
</ScrollView>
</View>
);
}
function DataMenuBody({ setShowModal }) { 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 ( return (
<View <View
style={{ style={{
@ -94,7 +258,15 @@ function DataMenuBody({ setShowModal }) {
}} }}
> >
<DataMenuHeader setShowModal={setShowModal} /> <DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector />
<DataOriginSelector
dataOriginToShow={dataOriginToShow}
setDataOriginToShow={setDataOriginToShow}
/>
<DataOriginOptions
dataOptionsToShow={dataOptionsToShow}
dataOriginToShow={dataOriginToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
</View> </View>
); );
} }
@ -128,7 +300,12 @@ const styles = StyleSheet.create({
paddingHorizontal: 12, paddingHorizontal: 12,
alignItems: "center", alignItems: "center",
justifyContent: "flex-start", justifyContent: "flex-start",
flexDirection: "row"
flexDirection: "row",
},
itensText: {
color: colors.black,
fontWeight: "500",
fontSize: 16,
}, },
text: { text: {
color: colors.white, color: colors.white,

3
src/app/config/colors.js

@ -7,8 +7,11 @@ export default {
light: "#f8f4f4", light: "#f8f4f4",
dark: "#0c0c0c", dark: "#0c0c0c",
danger: "#ff5252", danger: "#ff5252",
notActivated: "rgba(201, 69, 54, 0.87)",
activated: "rgba(26, 138, 17, 0.63)",
lightGray: "#C4C4C4", lightGray: "#C4C4C4",
gray: "#999999", gray: "#999999",
subText: "#8B8C8C",
lightestGray: "#F0F0F0", lightestGray: "#F0F0F0",
lightBlue: "#1976D2", lightBlue: "#1976D2",
gold: "#ffd700", gold: "#ffd700",

Loading…
Cancel
Save