Browse Source

Creating pluviometer register screen

master
GabrielTrettel 3 years ago
parent
commit
56db156650
  1. 2
      src/app/api/auth.js
  2. 12
      src/app/components/forms/FormLocationPicker.js
  3. 1
      src/app/navigation/AccountNavigator.js
  4. 13
      src/app/screens/MapFormScreen.js
  5. 133
      src/app/screens/PluviometerRegisterScreen.js

2
src/app/api/auth.js

@ -9,7 +9,7 @@ function login(name, password) {
return { return {
ok: true, ok: true,
data: data:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiVXN1w6FyaW8gVGVzdGUiLCJlbWFpbCI6InVzdWFyaW9AdGVzdGUuY29tLmJyIiwiSUQiOiIxIn0.hGrMWzg3EPlmjbga4-hmcMFmkDINFAWVP9kOmebXeAM",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiVXN1w6FyaW8gVGVzdGUiLCJlbWFpbCI6InVzdWFyaW9AdGVzdGUuY29tLmJyIiwiaW5zdGl0dXRpb25OYW1lIjoiRS4gRS4gVmljZW50ZSBMZXBvcmFjZSIsImluc3RpdHV0aW9uVHlwZSI6IkVzY29sYSIsIklEIjoiMSJ9.dk-Nl5VLvAWhT_JUYREpJYYCc98s71SyHJwmwH55ZS4",
}; };
} }

12
src/app/components/forms/FormLocationPicker.js

@ -12,11 +12,12 @@ function FormLocationPicker({ subtitle }) {
return ( return (
<View style={styles.location}> <View style={styles.location}>
<View style={styles.mapIcon}> <View style={styles.mapIcon}>
<MaterialIcons <MaterialIcons
name="location-on" name="location-on"
size={30}
color={colors.primary}
size={20}
color="white"
/> />
</View> </View>
@ -32,6 +33,7 @@ function FormLocationPicker({ subtitle }) {
{subtitle ? subtitle : "Defina o local no mapa"} {subtitle ? subtitle : "Defina o local no mapa"}
</Text> </Text>
</View> </View>
</View> </View>
); );
} }
@ -41,14 +43,18 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
alignContent: "space-around", alignContent: "space-around",
justifyContent: "flex-start", justifyContent: "flex-start",
marginTop: 24,
}, },
adressText: { adressText: {
height: "100%", height: "100%",
paddingLeft: 12,
paddingLeft: 16,
}, },
mapIcon: { mapIcon: {
backgroundColor: colors.primary,
width: 40,
height: 40,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderRadius: 5, borderRadius: 5,

1
src/app/navigation/AccountNavigator.js

@ -76,6 +76,7 @@ const AccountNavigator = () => (
<Stack.Screen <Stack.Screen
name="FormMap" name="FormMap"
component={MapFormScreen} component={MapFormScreen}
initialParams={{ setLocationAddr: null }}
options={{ options={{
title: "Voltar", title: "Voltar",
headerStyle: { headerStyle: {

13
src/app/screens/MapFormScreen.js

@ -24,14 +24,21 @@ const MapFormScreen = (props) => {
var number = address[0].name == null ? "" : ", " + address[0].name; var number = address[0].name == null ? "" : ", " + address[0].name;
var district = var district =
address[0].district == null ? "" : "\n" + address[0].district; address[0].district == null ? "" : "\n" + address[0].district;
context.saveNewLocation(street + number + district, coordenadas);
return street + number + district;
} else { } else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation("Erro ao carregar endereço", coordenadas);
return "Erro ao carregar endereço";
} }
}; };
const setLocation = () => { const setLocation = () => {
getAddress(moveEndListener);
getAddress(moveEndListener).then((addr) => {
if (props.route.params && props.route.params.setLocationAddr)
props.route.params.setLocationAddr(addr);
else
context.saveNewLocation(addr, moveEndListener);
});
props.navigation.goBack(null); props.navigation.goBack(null);
}; };

133
src/app/screens/PluviometerRegisterScreen.js

@ -1,41 +1,98 @@
import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
import React, { useState, useContext } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet, Text, View } from "react-native";
import { Form, SubmitButton } from "../components/forms"; import { Form, SubmitButton } from "../components/forms";
import Screen from "../components/Screen";
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker"; import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/"; import colors from "../config/colors/";
import moment from "moment"; import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker";
import { TouchableOpacity } from "react-native-gesture-handler"; import { TouchableOpacity } from "react-native-gesture-handler";
import DatePicker from "../components/DatePicker";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { FontAwesome5 } from "@expo/vector-icons";
import { AuthContext } from "../auth/context";
import { Shadow } from "react-native-shadow-2";
const dims = scaleDimsFromWidth(85, 85, 25); const dims = scaleDimsFromWidth(85, 85, 25);
function PluviometerRegisterScreen(props) {
const context = useContext(EventLocationContext);
function Institution({ user }) {
return (
<View style={{ marginTop: 24, marginBottom: 24 }}>
<Text style={styles.label}>Tippo de instituição: </Text>
<View style={{ flexDirection: "row", marginTop: 16 }}>
<FontAwesome5 name="university" size={30} color={colors.primary} />
<Text style={styles.subText}>{user.institutionType}</Text>
</View>
useEffect(() => {
context.defaultLocation();
}, []);
<Text style={[styles.label, { marginTop: 24 }]}>
Nome da instituição:
</Text>
<View style={{ flexDirection: "row" }}>
<FontAwesome5 name="university" size={30} color={colors.primary} />
<Text style={styles.subText}>{user.institutionName}</Text>
</View>
</View>
);
}
const location = context.eventCoordinates;
const address = context.eventLocation;
const [date, setDate] = useState(moment());
const [time, setTime] = useState(moment());
const [school, setSchool] = useState();
function LocationPicker({ navigation }) {
const [location, setLocationAddr] = useState("Defina o endereço no mapa");
return ( return (
<View <View
style={{ style={{
padding: 16,
flexDirection: "row",
alignItems: "center",
flexShrink: 1,
}}
>
<MaterialIcons name="location-on" size={30} color={colors.primary} />
<View
style={{
marginLeft: 16,
flex: 1,
}} }}
> >
<Shadow
viewStyle={{ width: "100%", height: 48 }}
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
>
<TouchableOpacity
onPress={() =>
navigation.navigate("FormMap", {
setLocationAddr: setLocationAddr,
})
}
>
<View
style={{
paddingLeft: 16,
backgroundColor: colors.white,
height: 48,
borderRadius: 5,
flexDirection: "row",
alignItems: "center",
}}
>
<Text styles={styles.subText}>{location}</Text>
</View>
</TouchableOpacity>
</Shadow>
</View>
</View>
);
}
function PluviometerRegisterScreen(props) {
const [date, setDate] = useState(moment());
const [time, setTime] = useState(moment());
const { user, _ } = useContext(AuthContext);
return (
<View>
<Form <Form
initialValues={{}} initialValues={{}}
onSubmit={() => { onSubmit={() => {
@ -48,21 +105,13 @@ function PluviometerRegisterScreen(props) {
}); });
}} }}
> >
{/* <KeyboardAwareScrollView */}
{/* keyboardShouldPersistTaps={"handled"} */}
{/* > */}
<View
style={{
height: "100%",
}}
>
<View padding={16}>
<Text style={styles.title}>Cadastro do Pluviômetro</Text> <Text style={styles.title}>Cadastro do Pluviômetro</Text>
<View>
<Text <Text
style={{ style={{
marginTop: 24, marginTop: 24,
marginBottom: 12,
marginBottom: 16,
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",
@ -74,7 +123,7 @@ function PluviometerRegisterScreen(props) {
<View <View
style={{ style={{
marginBottom: 24
marginBottom: 24,
}} }}
> >
<FormDatePicker <FormDatePicker
@ -86,24 +135,13 @@ function PluviometerRegisterScreen(props) {
/> />
</View> </View>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<View>
<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" />
</View>
</TouchableOpacity>
<LocationPicker navigation={props.navigation} />
<View style={{ marginTop: 24, marginBottom: 12 }}>
<Text style={styles.label}>Instituição: </Text>
<SchoolPicker itemSelected={(value) => setSchool(value)} />
</View>
{user.institutionType && <Institution user={user} />}
<SubmitButton title="Cadastrar" paddingHorizontal={0} /> <SubmitButton title="Cadastrar" paddingHorizontal={0} />
</View> </View>
{/* </KeyboardAwareScrollView> */}
</View>
</Form> </Form>
</View> </View>
); );
@ -123,6 +161,13 @@ const styles = StyleSheet.create({
textAlign: "left", textAlign: "left",
color: colors.secondary, color: colors.secondary,
}, },
subText: {
color: colors.subText,
fontSize: 16,
alignSelf: "center",
fontWeight: "500",
paddingLeft: 16,
},
title: { title: {
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: "bold",

Loading…
Cancel
Save