Browse Source

Pluviometer Sharing Data Screen

master
analuizaff 4 years ago
parent
commit
93c65b0881
  1. 124
      src/app/screens/PluviometerSharingDataScreen.js
  2. 4
      src/app/screens/SharingDataScreen.js

124
src/app/screens/PluviometerSharingDataScreen.js

@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { StyleSheet, Text, View, Image } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
@ -8,16 +9,13 @@ import {
FormPicker as Picker, FormPicker as Picker,
SubmitButton, SubmitButton,
} from "../components/forms"; } from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import DatePicker from 'react-native-datepicker'; import DatePicker from 'react-native-datepicker';
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
title: Yup.string().required().min(1).label("Title"),
price: Yup.number().required().min(1).max(10000).label("Price"),
description: Yup.string().label("Description"),
category: Yup.object().required().nullable().label("Category"),
pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
images: Yup.array().min(1, "Please select at least one image."), images: Yup.array().min(1, "Please select at least one image."),
}); });
@ -25,56 +23,78 @@ const validationSchema = Yup.object().shape({
function PluviometerSharingDataScreen() { function PluviometerSharingDataScreen() {
const location = useLocation(); const location = useLocation();
const [date, setDate] = useState('09-10-2020');
var day = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
var currentDate = day + '/' + month + '/' + year
const [date, setDate] = useState(currentDate);
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignSelf: 'center' }}>
<Image style={styles.image} source={require("../assets/pluviometro.png")} />
<Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2' }}>Pluviômetro</Text>
</View>
<Form <Form
initialValues={{ initialValues={{
title: "", title: "",
price: "",
pluviometer: "",
description: "", description: "",
category: null, category: null,
images: [], images: [],
}} }}
onSubmit={(values) => console.log(location)} onSubmit={(values) => console.log(location)}
validationSchema={validationSchema}
>
<FormField
keyboardType="numeric"
maxLength={200}
name="price"
placeholder="não esstá atualizando"
width={220}
/>
<DatePicker
style={styles.datePickerStyle}
date={date} // Initial date from state
mode="date" // The enum of date, datetime and time
placeholder="select date"
format="DD-MM-YYYY"
minDate="01-01-2016"
maxDate="01-01-2019"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
//display: 'none',
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0,
},
dateInput: {
marginLeft: 36,
},
}}
onDateChange={(date) => {
setDate(date);
}}
/>
<SubmitButton title="Post" />
validationSchema={validationSchema}>
<View style={{ marginTop: 30 }}>
<Text style={{
fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginTop: 10
}}>Quantidade de chuva:</Text>
<FormField
keyboardType="pluviometer"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
width={280}
/>
</View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginBottom: 5 }}>Data da coleta:</Text>
<DatePicker
style={styles.datePickerStyle}
date={date}
mode="date" // The enum of date, datetime and time
placeholder="Selecione a data da coleta"
format="DD/MM/YYYY"
minDate="01/01/2020"
maxDate={currentDate}
confirmBtnText="Confirmar"
cancelBtnText="Cancelar"
customStyles={{
dateIcon: {
//display: 'none',
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0,
},
dateInput: {
marginLeft: 36,
borderRadius: 18,
},
}}
onDateChange={(date) => {
setDate(date);
}}
/>
</View>
<FormImagePicker backgroundColor="#1976D2" name="images" styles={{ width: 50 }} />
<SubmitButton title="Enviar" />
</Form> </Form>
</Screen> </Screen>
); );
@ -82,8 +102,18 @@ function PluviometerSharingDataScreen() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 10,
paddingHorizontal: 10,
}, },
});
image: {
width: 85,
height: 85,
justifyContent: "center",
alignItems: "center",
},
datePickerStyle: {
width: 180,
}
})
export default PluviometerSharingDataScreen; export default PluviometerSharingDataScreen;

4
src/app/screens/SharingDataScreen.js

@ -5,6 +5,7 @@ import { Image, Text, TouchableOpacity } from "react-native";
import { createStackNavigator } from "@react-navigation/stack"; import { createStackNavigator } from "@react-navigation/stack";
import RainSharingDataScreen from "../screens/RainSharingDataScreen"; import RainSharingDataScreen from "../screens/RainSharingDataScreen";
import SharingFloodZonesScreen from "./SharingFloodZonesScreen"; import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
//1/3 //1/3
@ -46,7 +47,7 @@ function SharingDataScreen({ navigation }) {
</View> </View>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}> <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity style={{ alignItems: "center" }}>
<TouchableOpacity style={{ alignItems: "center" }} onPress={() => navigation.navigate('PluviometerSharingData')}>
<Image <Image
style={styles.floodingLogo} style={styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")} source={require("../assets/diario_pluviometrico.png")}
@ -96,6 +97,7 @@ function RainSharingDataNavigator() {
name="FloodSharingData" name="FloodSharingData"
component={SharingFloodZonesScreen} component={SharingFloodZonesScreen}
/> />
<Stack.Screen name="PluviometerSharingData" component={PluviometerSharingDataScreen} />
</Stack.Navigator> </Stack.Navigator>
); );
} }

Loading…
Cancel
Save