Browse Source

creating pluviometer register screen

master
analuizaff 4 years ago
parent
commit
e052787b8a
  1. 9
      src/app/components/SchoolPicker.js
  2. 123
      src/app/screens/PluviometerRegisterScreen.js

9
src/app/components/SchoolPicker.js

@ -69,7 +69,6 @@ function SchoolPicker() {
borderWidth: 1,
borderRadius: 5,
}} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: 140 }}
items={items}
chip={true}
resetValue={false}
@ -103,16 +102,16 @@ function SchoolPicker() {
const styles = StyleSheet.create({
location: {
flex: 1,
//flex: 1,
width: "100%",
flexDirection: "row",
alignItems: "center",
alignItems: "flex-start",
justifyContent: "space-between",
// backgroundColor: colors.secondary,
},
adressText: {
flex: 1,
textAlign: "center",
flex: 0.90,
paddingLeft: 5,
},
mapIcon: {
backgroundColor: colors.primary,

123
src/app/screens/PluviometerRegisterScreen.js

@ -0,0 +1,123 @@
import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView } from "react-native";
import * as Yup from "yup";
import {
Form,
FormField,
FormPicker as Picker,
SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/";
import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker";
const dims = scaleDimsFromWidth(85, 85, 25);
function PluviometerRegisterScreen(props) {
const context = useContext(EventLocationContext);
const amount = 2;
useEffect(() => {
context.defaultLocation();
}, []);
const location = context.eventCoordinates;
const address = context.eventLocation;
const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
return (
<Screen style={styles.container}>
<Form>
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}}
>
<View style={{ flex: 1 }}>
<Text style={styles.title}> Cadastro do Pluviômetro </Text>
</View>
{/*Data da coleta:*/}
<View
style={{ flex: 2 }}
>
<Text style={styles.label}> Data do cadastro: </Text>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 2 }}>
<ScrollView>
<Text style={styles.label}> Endereço do pluviômetro: </Text>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</ScrollView>
</View>
<View style={{ flex: 4 }}>
<Text style={styles.label}> Escola: </Text>
<SchoolPicker />
</View>
</View>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
</View>
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
flex: 1,
},
image: {
width: dims.width * 0.8,
height: dims.height * 0.8,
justifyContent: "center",
alignItems: "center",
},
label: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.lightBlue,
},
title: {
fontSize: 20,
fontWeight: "bold",
textAlign: "center",
color: colors.primary,
},
});
export default PluviometerRegisterScreen;
Loading…
Cancel
Save