|
@ -1,6 +1,6 @@ |
|
|
import React, { useState } from "react"; |
|
|
import React, { useState } from "react"; |
|
|
|
|
|
|
|
|
import { StyleSheet, Text, View, Image } from "react-native"; |
|
|
|
|
|
|
|
|
import { StyleSheet, Text, View, Image, Button, TouchableHighlight, Platform } from "react-native"; |
|
|
import * as Yup from "yup"; |
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
@ -14,6 +14,12 @@ import DatePicker from "react-native-datepicker"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
|
|
import { insertPluviometerData } from "../database/databaseLoader"; |
|
|
import { insertPluviometerData } from "../database/databaseLoader"; |
|
|
|
|
|
import RNDateTimePicker from '@react-native-community/datetimepicker'; |
|
|
|
|
|
import { TextInput, TouchableOpacity } from "react-native-gesture-handler"; |
|
|
|
|
|
import DateTimePicker from '@react-native-community/datetimepicker'; |
|
|
|
|
|
import { FontAwesome5 } from '@expo/vector-icons'; |
|
|
|
|
|
|
|
|
|
|
|
import moment from 'moment'; |
|
|
|
|
|
|
|
|
const validationSchema = Yup.object().shape({ |
|
|
const validationSchema = Yup.object().shape({ |
|
|
pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), |
|
|
pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"), |
|
@ -23,14 +29,47 @@ const validationSchema = Yup.object().shape({ |
|
|
function PluviometerSharingDataScreen(props) { |
|
|
function PluviometerSharingDataScreen(props) { |
|
|
const location = useLocation(); |
|
|
const location = useLocation(); |
|
|
|
|
|
|
|
|
var day = new Date().getDate(); |
|
|
|
|
|
var month = new Date().getMonth() + 1; |
|
|
|
|
|
var year = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
/*-------------------------------------------DATETIMEPICKER------------------------------------------------*/ |
|
|
|
|
|
|
|
|
|
|
|
const { textStyle, defaultDate } = props; |
|
|
|
|
|
const [date, setDate] = useState(moment(defaultDate)) |
|
|
|
|
|
const [show, setShow] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const onAndroidChange = (e, selectedDate) => { |
|
|
|
|
|
setShow(false); |
|
|
|
|
|
if (selectedDate) { |
|
|
|
|
|
setDate(moment(selectedDate)); |
|
|
|
|
|
//props.onDateChange(selectedDate);
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onCancelPress = () => { |
|
|
|
|
|
setDate(moment(defaultDate)); |
|
|
|
|
|
setShow(false); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onDonePress = () => { |
|
|
|
|
|
// props.onDateChange(date);
|
|
|
|
|
|
setShow(false); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
var currentDate = day + "/" + month + "/" + year; |
|
|
|
|
|
|
|
|
const renderDatePicker = () => { |
|
|
|
|
|
return ( |
|
|
|
|
|
<DateTimePicker |
|
|
|
|
|
timeZoneOffsetInMinutes={0} |
|
|
|
|
|
value={new Date(date)} |
|
|
|
|
|
mode="date" |
|
|
|
|
|
maximumDate={new Date()} |
|
|
|
|
|
onChange={onAndroidChange} |
|
|
|
|
|
/> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const [date, setDate] = useState(currentDate); |
|
|
|
|
|
|
|
|
/*---------------------------------------------------------------------------------------------------------*/ |
|
|
|
|
|
|
|
|
|
|
|
// var day = new Date().getDate();
|
|
|
|
|
|
// var month = new Date().getMonth() + 1;
|
|
|
|
|
|
// var year = new Date().getFullYear();
|
|
|
return ( |
|
|
return ( |
|
|
<Screen style={styles.container}> |
|
|
<Screen style={styles.container}> |
|
|
<View style={{ alignSelf: "center" }}> |
|
|
<View style={{ alignSelf: "center" }}> |
|
@ -55,15 +94,7 @@ function PluviometerSharingDataScreen(props) { |
|
|
validationSchema={validationSchema} |
|
|
validationSchema={validationSchema} |
|
|
> |
|
|
> |
|
|
<View style={{ marginTop: 30 }}> |
|
|
<View style={{ marginTop: 30 }}> |
|
|
<Text |
|
|
|
|
|
style={{ |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
color: "#1976D2", |
|
|
|
|
|
marginTop: 10, |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<Text style={styles.labelStyle}> |
|
|
Quantidade de chuva: |
|
|
Quantidade de chuva: |
|
|
</Text> |
|
|
</Text> |
|
|
<FormField |
|
|
<FormField |
|
@ -76,51 +107,25 @@ function PluviometerSharingDataScreen(props) { |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
|
|
|
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}> |
|
|
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}> |
|
|
<Text |
|
|
|
|
|
style={{ |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
color: "#1976D2", |
|
|
|
|
|
marginBottom: 5, |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<Text style={styles.labelStyle}> |
|
|
Data da coleta: |
|
|
Data da coleta: |
|
|
</Text> |
|
|
</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); |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<TouchableOpacity style={styles.datepickerStyle} |
|
|
|
|
|
onPress={() => setShow(true)}> |
|
|
|
|
|
<View style={styles.datePickerView}> |
|
|
|
|
|
<Text style={{ fontSize: 16, marginLeft:15}}> |
|
|
|
|
|
{date.format('DD/MM/YYYY')} |
|
|
|
|
|
</Text> |
|
|
|
|
|
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey"/> |
|
|
|
|
|
{show && renderDatePicker()} |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableOpacity> |
|
|
</View> |
|
|
</View> |
|
|
<FormImagePicker |
|
|
<FormImagePicker |
|
|
backgroundColor="#1976D2" |
|
|
backgroundColor="#1976D2" |
|
|
name="images" |
|
|
name="images" |
|
|
styles={{ width: 50 }} |
|
|
styles={{ width: 50 }} |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<SubmitButton title="Enviar" /> |
|
|
<SubmitButton title="Enviar" /> |
|
|
</Form> |
|
|
</Form> |
|
|
</Screen> |
|
|
</Screen> |
|
@ -137,8 +142,26 @@ const styles = StyleSheet.create({ |
|
|
justifyContent: "center", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
alignItems: "center", |
|
|
}, |
|
|
}, |
|
|
datePickerStyle: { |
|
|
|
|
|
width: 180, |
|
|
|
|
|
|
|
|
datePickerView: { |
|
|
|
|
|
width: 280, |
|
|
|
|
|
flexDirection: "row", |
|
|
|
|
|
justifyContent:"space-between", |
|
|
|
|
|
paddingVertical:15, |
|
|
|
|
|
}, |
|
|
|
|
|
datepickerStyle: { |
|
|
|
|
|
borderRadius: 25, |
|
|
|
|
|
width: 280, |
|
|
|
|
|
backgroundColor: "#f8f4f4", |
|
|
|
|
|
}, |
|
|
|
|
|
dateIcon: { |
|
|
|
|
|
marginRight:15, |
|
|
|
|
|
}, |
|
|
|
|
|
labelStyle:{ |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
color: "#1976D2", |
|
|
|
|
|
marginBottom: 5, |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|