Browse Source

creating navigation to pluviometer register screen

master
analuizaff 4 years ago
parent
commit
a8c28e95b3
  1. 25
      src/app/navigation/AccountNavigator.js
  2. 40
      src/app/screens/AccountScreen.js
  3. 26
      src/app/screens/PluviometerRegisterScreen.js

25
src/app/navigation/AccountNavigator.js

@ -1,11 +1,13 @@
import React from "react"; import React from "react";
import { createStackNavigator } from "@react-navigation/stack"; import { createStackNavigator } from "@react-navigation/stack";
import AccountScreen from "../screens/AccountScreen"; import AccountScreen from "../screens/AccountScreen";
import PluviometerRegisterScreen from '../screens/PluviometerRegisterScreen';
import MapFormScreen from "../screens/MapFormScreen";
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const AccountNavigator = () => ( const AccountNavigator = () => (
<Stack.Navigator>
<Stack.Navigator initialRouteName="Perfil">
<Stack.Screen <Stack.Screen
name="Perfil" name="Perfil"
component={AccountScreen} component={AccountScreen}
@ -16,6 +18,27 @@ const AccountNavigator = () => (
}, },
}} }}
/> />
<Stack.Screen
name="PluviometerRegister"
component={PluviometerRegisterScreen}
options={{
title: "PluviometerRegister",
headerStyle: {
backgroundColor: "white",
},
}}
/>
<Stack.Screen
name="FormMap"
component={MapFormScreen}
options={{
title: "Voltar",
headerStyle: {
backgroundColor: "white",
},
}}
/>
</Stack.Navigator> </Stack.Navigator>
); );

40
src/app/screens/AccountScreen.js

@ -1,11 +1,20 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Text, Button } from "react-native";
import { Text, Button, Image, View } from "react-native";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import InDevelopment from "../components/InDevelopment"; import InDevelopment from "../components/InDevelopment";
import { AuthContext } from "../auth/context"; import { AuthContext } from "../auth/context";
import authStorage from "../auth/storage"; import authStorage from "../auth/storage";
import { TouchableOpacity } from "react-native-gesture-handler";
import assets from "../config/assets";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import colors from "../config/colors";
function handleLogOut(setUser) { function handleLogOut(setUser) {
setUser(null); setUser(null);
authStorage.removeToken(); authStorage.removeToken();
} }
@ -13,21 +22,48 @@ function handleLogOut(setUser) {
function AccountScreen(props) { function AccountScreen(props) {
const { user, setUser } = useContext(AuthContext); const { user, setUser } = useContext(AuthContext);
const dims = scaleDimsFromWidth(93, 106, 35);
return ( return (
<Screen <Screen
style={{ style={{
padding: 10, padding: 10,
fleex: 1,
}} }}
> >
<Text>{user.name}</Text> <Text>{user.name}</Text>
<Text>{user.email}</Text> <Text>{user.email}</Text>
<TouchableOpacity onPress={()=> props.navigation.navigate("PluviometerRegister")}>
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignContent: "center",
paddingTop: 40
}}>
<Image
style={{ width: 28 }}
resizeMode="contain"
source={require("../assets/pluviometer/pluviometro.png")}
/>
<View style={{ justifyContent: "center" }}>
<Text style={{
fontSize: dimensions.text.default,
fontWeight: "bold"
}}>
Cadastrar Pluviômetro
</Text>
</View>
</View>
</TouchableOpacity>
<View style={{ paddingTop: 40 }}>
<Button <Button
style={{ paddingTop: 10 }}
title="Logout" title="Logout"
onPress={() => { onPress={() => {
handleLogOut(setUser); handleLogOut(setUser);
}} }}
/> />
</View>
{/* <InDevelopment /> */} {/* <InDevelopment /> */}
</Screen> </Screen>

26
src/app/screens/PluviometerRegisterScreen.js

@ -13,6 +13,7 @@ import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker"; import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext"; import { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker"; import SchoolPicker from "../components/SchoolPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
@ -59,24 +60,34 @@ function PluviometerRegisterScreen(props) {
<View style={{ flex: 0.10 }}> <View style={{ flex: 0.10 }}>
<Text style={styles.title}>Cadastro do Pluviômetro</Text> <Text style={styles.title}>Cadastro do Pluviômetro</Text>
</View> </View>
{/* Escola: */} {/* Escola: */}
<View style={{ flex: 0.30 }}>
<View style={{ flex: 0.25, marginTop: 5}}>
<Text style={styles.label}>Escola: </Text> <Text style={styles.label}>Escola: </Text>
<SchoolPicker <SchoolPicker
itemSelected={(value) => setSchool(value)} /> itemSelected={(value) => setSchool(value)} />
</View> </View>
<View style={{
flex: 0.60, flexDirection: "column"
}}>
<ScrollView contentContainerStyle={{
flexGrow: 1
}}>
<View style={{ <View style={{
flex: 0.60, flexDirection: "column",
flex: 1,
flexDirection: "column",
justifyContent: "space-between" justifyContent: "space-between"
}}> }}>
<ScrollView contentContainerStyle={{ flexGrow: 1,flexDirection: "column",
justifyContent: "space-between" }}>
{/*Local do pluvioômetro:*/} {/*Local do pluvioômetro:*/}
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<Text style={styles.label}>Endereço do pluviômetro: </Text> <Text style={styles.label}>Endereço do pluviômetro: </Text>
<FormLocationPicker subtitle="Defina o endereço do pluviômetro" /> <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
</View> </View>
</TouchableOpacity>
</View>
{/*Data de cadastro:*/} {/*Data de cadastro:*/}
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
@ -84,7 +95,7 @@ function PluviometerRegisterScreen(props) {
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",
color: colors.lightBlue, marginBottom: 10
color: colors.lightBlue,
}}>Data do cadastro: </Text> }}>Data do cadastro: </Text>
<FormDatePicker <FormDatePicker
disabled={true} disabled={true}
@ -99,9 +110,10 @@ function PluviometerRegisterScreen(props) {
/> />
</View> </View>
<View style={{ flex: 0.10, marginTop:15 }}>
<View style={{ flex: 0.05, marginTop: 15 }}>
<SubmitButton title="Cadastrar" alignContent="flex-end" /> <SubmitButton title="Cadastrar" alignContent="flex-end" />
</View> </View>
</View>
</ScrollView> </ScrollView>
</View> </View>
</View> </View>

Loading…
Cancel
Save