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

Merge branch 'main' of https://github.com/IGSD-UoW/WPD-MobileApp into main

master
analuizaff 3 years ago
parent
d07f92a9da 97ff70f402
commit
6c906b244c
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. 203
      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>

203
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
@ -55,7 +63,7 @@ function DataOriginSelector() {
}}
>
<TouchableOpacity
style={[styles.choicesBtn, {backgroundColor: bgToUse("oficial")}]}
style={[styles.choicesBtn, { backgroundColor: bgToUse("oficial") }]}
onPress={() => setDataOriginToShow("oficial")}
>
<MaterialIcons
@ -64,12 +72,11 @@ function DataOriginSelector() {
color={colors.white}
alignItems="center"
/>
<Text style={[styles.text, {marginLeft: 12}]}>OFICIAL</Text>
<Text style={[styles.text, { marginLeft: 12 }]}>OFICIAL</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.choicesBtn, {backgroundColor: bgToUse("citzen")}]}
style={[styles.choicesBtn, { backgroundColor: bgToUse("citzen") }]}
onPress={() => setDataOriginToShow("citzen")}
>
<FontAwesome5
@ -78,14 +85,171 @@ function DataOriginSelector() {
color={colors.white}
alignItems="center"
/>
<Text style={[styles.text, {marginLeft: 12}]}>CIDADÃO</Text>
<Text style={[styles.text, { marginLeft: 12 }]}>CIDADÃO</Text>
</TouchableOpacity>
</View>
</Shadow>
);
}
// 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