cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

Data menu modal principal logic implemented

master
GabrielTrettel 3 years ago
parent
190f948981
commit
faa189cd97
7 changed files with 198 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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 (
<Shadow
@ -67,7 +75,6 @@ function DataOriginSelector() {
<Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.choicesBtn, { backgroundColor: bgToUse("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 }) {
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 (
<View
style={{
@ -94,7 +258,15 @@ function DataMenuBody({ setShowModal }) {
}}
>
<DataMenuHeader setShowModal={setShowModal} />
<DataOriginSelector />
<DataOriginSelector
dataOriginToShow={dataOriginToShow}
setDataOriginToShow={setDataOriginToShow}
/>
<DataOriginOptions
dataOptionsToShow={dataOptionsToShow}
dataOriginToShow={dataOriginToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
</View>
);
}
@ -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,

3
src/app/config/colors.js
View File

@ -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",

Write Preview
Loading…
Cancel
Save