Browse Source

fixing 'Dados' issues

master
analuizaff 4 years ago
parent
commit
bbf59e2fe3
  1. 11
      src/App.js
  2. 142
      src/app/components/DataMenu.js
  3. 173
      src/app/components/FloatButton.js
  4. 2
      src/app/components/MapMarkerList.js
  5. 51
      src/app/components/MenuItens.js
  6. 94
      src/app/context/MapDataContext.js

11
src/App.js

@ -14,6 +14,7 @@ import CurrentLocationProvider from "./app/context/CurrentLocationContext";
import AuthNavigator from "./app/navigation/AuthNavigator"; import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context"; import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage"; import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext";
export default function App() { export default function App() {
const [user, setUser] = useState(); const [user, setUser] = useState();
@ -41,10 +42,12 @@ export default function App() {
> >
<CurrentLocationProvider> <CurrentLocationProvider>
<EventLocationProvider> <EventLocationProvider>
<NavigationContainer theme={navigationTheme}>
{user ? <AppNavigator /> : <AuthNavigator />}
<FlashMessage position="top" />
</NavigationContainer>
<MapDataProvider>
<NavigationContainer theme={navigationTheme}>
{user ? <AppNavigator /> : <AuthNavigator />}
<FlashMessage position="top" />
</NavigationContainer>
</MapDataProvider>
</EventLocationProvider> </EventLocationProvider>
</CurrentLocationProvider> </CurrentLocationProvider>
</AuthContext.Provider> </AuthContext.Provider>

142
src/app/components/DataMenu.js

@ -1,142 +0,0 @@
import React, { Component, useRef, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, CheckBox } from "react-native";
import { FontAwesome5 } from '@expo/vector-icons';
import colors from "../config/colors";
import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from '@expo/vector-icons';
import { dimensions } from "../config/dimensions";
import { Dimensions } from "react-native";
export default class DataMenu extends Component {
constructor(props) {
super(props);
this.state = {
layers: [
{
id: 1,
name: 'Chuva',
},
{
id: 2,
name: 'Ponto de alagamento',
},
{
id: 3,
name: 'Pluviômetro artesanal',
},
{
id: 4,
name: 'Pluviômetro oficial',
},
{
id: 5,
name: 'Água no rio',
},
{
id: 6,
name: 'Área de inundação',
},
],
selectedValue: {},
}
}
toggleItem = (itemId) => {
const { selectedValue } = this.state;
const isSelected = selectedValue[itemId];
selectedValue[itemId] = !isSelected;
this.setState({
selectedValue: { ...selectedValue },
})
}
render() {
const screenHeight = Dimensions.get("window").height;
const screenWidth = Dimensions.get("window").width;
const { layers, selectedValue } = this.state;
return (
<View style={styles.container} >
<View style={{
flex: 1,
height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
paddingTop: (screenHeight > 600 ? 0 : screenHeight * 0.09)
}}>
<FlatList
data={layers}
keyExtractor={(datas) => datas.id.toString()}
renderItem={({ item }) => {
const isSelected = selectedValue[item.id];
return (
<View style={{ flexDirection: "row", flex: 1, marginTop: 15, }}>
<View style={{ flexDirection: "row", flex: 0.80 }}>
<Fontisto name="rain" color={colors.lightBlue} size={20} />
<Text style={styles.item}> {item.name} </Text>
</View>
<View
style={{ flex: 0.20, alignSelf: "flex-end", flexDirection: "row" }}>
<CheckBox
value={isSelected}
onChange={() => this.toggleItem(item.id)}
tintColors={{ true: colors.lightBlue, false: 'black' }}
/>
</View>
</View>
);
}}
extraData={[selectedValue]}
/>
<View style={styles.submit_btn}>
<TouchableOpacity onPress={() => console.log("Aplicar camadas")}>
<View style={styles.button}>
<Text style={styles.text}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
)
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignSelf: "flex-end",
backgroundColor: colors.white,
},
submit_btn: {
bottom: 0,
width: "100%",
padding: 20,
},
button: {
backgroundColor: "#1976D2",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
textAlign: "center",
},
text: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
item: {
color: colors.lightBlue,
fontSize: dimensions.text.tertiary,
fontWeight: "bold",
}
});

173
src/app/components/FloatButton.js

@ -1,4 +1,4 @@
import React, { useRef, useState } from "react";
import React, { useContext, useRef, useState } from "react";
import { import {
StyleSheet, StyleSheet,
Text, Text,
@ -6,18 +6,15 @@ import {
View, View,
Animated, Animated,
TouchableWithoutFeedback, TouchableWithoutFeedback,
Dimensions,
} from "react-native"; } from "react-native";
import { FlatList } from "react-native-gesture-handler";
import colors from "../config/colors"; import colors from "../config/colors";
import ActionButton from "react-native-action-button";
import { AntDesign, Entypo } from "@expo/vector-icons";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { FlatList } from "react-native-gesture-handler";
import { Fontisto } from "@expo/vector-icons";
import DataMenu from "./DataMenu";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Dimensions } from "react-native";
import { dimensions } from "../config/dimensions";
import { MapDataContext } from "../context/MapDataContext";
import MenuItens from "./MenuItens";
const screenWidth = Dimensions.get("window").width; const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
@ -25,7 +22,9 @@ const screenHeight = Dimensions.get("window").height;
function FloatButton(props) { function FloatButton(props) {
const animation = useRef(new Animated.Value(0)).current; const animation = useRef(new Animated.Value(0)).current;
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const context = useContext(MapDataContext);
const toggleMenu = () => { const toggleMenu = () => {
const value = open ? 0 : 1; const value = open ? 0 : 1;
@ -35,45 +34,115 @@ function FloatButton(props) {
friction: 6, friction: 6,
useNativeDriver: true, useNativeDriver: true,
}).start(); }).start();
console.log(open);
setOpen(!open); setOpen(!open);
}; };
const rotation = {
transform: [
{
rotate: animation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "0deg"],
}),
},
],
};
const menuStyle = {
transform: [
{ scale: animation },
{
translateY: animation.interpolate({
inputRange: [0, 1],
outputRange: [0, 30],
}),
},
],
/*--------------------------------------------------------MENU----------------------------------------------------- */
const [changed, setChanged] = useState(true);
const [layers, setLayers] = useState({
values:
[
{
id: 1,
name: 'Chuva',
isSelected: context.layers.values[0].isSelected,
},
{
id: 2,
name: 'Ponto de alagamento',
isSelected: context.layers.values[1].isSelected,
},
{
id: 3,
name: 'Pluviômetro artesanal',
isSelected: context.layers.values[2].isSelected,
},
{
id: 4,
name: 'Pluviômetro oficial',
isSelected: context.layers.values[3].isSelected
},
{
id: 5,
name: 'Água no rio',
isSelected: context.layers.values[4].isSelected,
},
{
id: 6,
name: 'Área de inundação',
isSelected: context.layers.values[5].isSelected,
},
]
});
const selectedItens = (item) => {
item.isSelected = !item.isSelected;
setChanged(!changed);
}
const renderItem = ({ item }) => {
const icon = item.isSelected ? "check-box" : "check-box-outline-blank";
return (
<MenuItens
item={item}
onPress={() => selectedItens(item)}
icon={icon}
/>
);
}; };
const applyLayers = () => {
context.setChanges(layers.values);
setOpen(false);
}
const DataMenu = () => {
return (
<View>
<View style={styles.Menucontainer} >
<View style={{
flex: 1,
height: screenHeight * 0.70,//solução temporária, procurar soluções pro menu se ajustar melhor ao layout
paddingTop: (screenHeight > 600 ? 0 : screenHeight * 0.09)
}}>
<FlatList
data={layers.values}
keyExtractor={(datas) => datas.id.toString()}
renderItem={renderItem}
extraData={changed}
/>
<View style={styles.submit_btn}>
<TouchableOpacity onPress={() => applyLayers()}>
<View style={styles.button}>
<Text style={styles.textBtn}>Confirmar</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
);
}
/*------------------------------------------------------------------------------------------------------------------------ */
return ( return (
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={{ <View style={{
width: (open ? screenWidth * 0.70 : 0), width: (open ? screenWidth * 0.70 : 0),
flex: 1, flex: 1,
}}> }}>
<Animated.View style={[menuStyle]}>
<DataMenu />
<Animated.View>
{DataMenu()}
</Animated.View> </Animated.View>
</View> </View>
<View style={{ margin: 35, alignSelf: "flex-end" }}> <View style={{ margin: 35, alignSelf: "flex-end" }}>
<TouchableWithoutFeedback onPress={toggleMenu}> <TouchableWithoutFeedback onPress={toggleMenu}>
<Animated.View style={[styles.button, styles.menu, rotation]}>
<Animated.View style={[styles.floatButton, styles.menu]}>
<MaterialCommunityIcons <MaterialCommunityIcons
name="layers-plus" name="layers-plus"
size={36} size={36}
@ -93,7 +162,7 @@ const styles = StyleSheet.create({
bottom: 0, bottom: 0,
right: 0, right: 0,
}, },
button: {
floatButton: {
width: 50, width: 50,
height: 50, height: 50,
borderRadius: 6, borderRadius: 6,
@ -108,6 +177,42 @@ const styles = StyleSheet.create({
menu: { menu: {
backgroundColor: colors.primary, backgroundColor: colors.primary,
}, },
Menucontainer: {
flex: 1,
flexDirection: "row",
alignSelf: "flex-end",
backgroundColor: colors.white,
},
submit_btn: {
bottom: 0,
width: "100%",
padding: 20,
},
button: {
backgroundColor: "#1976D2",
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
textAlign: "center",
},
textBtn: {
color: colors.white,
fontSize: 16,
textTransform: "uppercase",
fontWeight: "bold",
},
text: {
color: colors.lightBlue,
fontSize: 14,
fontWeight: "bold",
},
item: {
color: colors.lightBlue,
fontSize: dimensions.text.tertiary,
fontWeight: "bold",
}
}); });
export default FloatButton; export default FloatButton;

2
src/app/components/MapMarkerList.js

@ -10,6 +10,7 @@ function isRequestedValue(
renderRiver, renderRiver,
renderPluviometer renderPluviometer
) { ) {
return ( return (
(item.name == "pluviometer" && renderPluviometer) || (item.name == "pluviometer" && renderPluviometer) ||
(item.name == "rain" && renderRain) || (item.name == "rain" && renderRain) ||
@ -25,6 +26,7 @@ function MapMarkerList({
renderRiver = true, renderRiver = true,
renderPluviometer = true, renderPluviometer = true,
}) { }) {
const markers = useMarkers(reload); const markers = useMarkers(reload);
return ( return (
<> <>

51
src/app/components/MenuItens.js

@ -0,0 +1,51 @@
import React, { Component, useContext, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View, Dimensions } from "react-native";
import { FontAwesome5 } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { Ionicons } from '@expo/vector-icons';
function MenuItens({ item, onPress, icon }) {
return (
<TouchableOpacity onPress={onPress} style={[styles.item]}>
<View style={{ flexDirection: "row", flex: 1, marginTop: 12 }}>
<View style={{ flexDirection: "row", flex: 0.20 }}>
<Ionicons name="md-rainy" size={24} color={colors.lightBlue} />
</View>
<View style={{ flexDirection: "row", flex: 0.70 }}>
<Text style={[styles.text]}>{item.name}</Text>
</View>
<View
style={{ flex: 0.10, alignSelf: "flex-start", flexDirection: "row" }}>
<MaterialIcons name={icon} size={24} color={colors.lightBlue} />
</View>
</View>
</TouchableOpacity>
);
};
export default MenuItens;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignSelf: "flex-end",
backgroundColor: colors.white,
},
text: {
color: colors.lightBlue,
fontSize: 14,
fontWeight: "bold",
},
item: {
color: colors.lightBlue,
fontSize: dimensions.text.tertiary,
fontWeight: "bold",
}
});

94
src/app/context/MapDataContext.js

@ -0,0 +1,94 @@
import React, { useState, createContext } from "react"
export const MapDataContext = createContext();
// 1/3(Ana): Preciso melhorar esse código
const MapDataProvider = ({ children }) => {
const [layers, setLayers] = useState({
values:
[
{
id: 1,
name: 'Chuva',
isSelected: true,
},
{
id: 2,
name: 'Ponto de alagamento',
isSelected: true,
},
{
id: 3,
name: 'Pluviômetro artesanal',
isSelected: true,
},
{
id: 4,
name: 'Pluviômetro oficial',
isSelected: false
},
{
id: 5,
name: 'Água no rio',
isSelected: true,
},
{
id: 6,
name: 'Área de inundação',
isSelected: false,
},
]
});
//chuva
const [rain, setRain] = useState(true);
//Ponto de alagamento
const [flood, setFlood] = useState(true);
//Pluviometro artesanal
const [pluviometer, setPluviometer] = useState(true);
//Água no rio
const [river, setRiver] = useState(true);
//Pluviometro oficial
const [officialPluviometer, setOfficialPluviometer] = useState(false);
//Área de inundação
const [floodAreas, setFloodAreas] = useState(false);
//1/3: harcoding
const setChanges = (data) => {
layers.values = data;
setRain(layers.values[0].isSelected);
setFlood(layers.values[1].isSelected);
setPluviometer(layers.values[2].isSelected);
//setOfficialPluviometer(layers.values[3].isSelected);
setRiver(layers.values[4].isSelected);
//setFloodAreas(layers.values[5].isSelected);
}
return (
<MapDataContext.Provider value={{
rain,
flood,
pluviometer,
river,
officialPluviometer,
floodAreas,
layers,
setChanges,
}}>
{children}
</MapDataContext.Provider>
)
}
export default MapDataProvider;
Loading…
Cancel
Save