Browse Source

adding time picker to pluviometer screen

master
analuizaff 4 years ago
parent
commit
ff9f23a9e3
  1. 41
      src/app/components/forms/FormDatePicker.js
  2. 4
      src/app/database/databaseLoader.js
  3. 6
      src/app/screens/PluviometerSharingDataScreen.js
  4. 9
      src/package-lock.json

41
src/app/components/forms/FormDatePicker.js

@ -20,6 +20,10 @@ const FormDatePicker = (props) => {
const [date, setDate] = useState(moment(defaultDate)); const [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [auxDate, setAuxDate] = useState(moment()); const [auxDate, setAuxDate] = useState(moment());
const [mode, setMode] = useState('date');
const [time, setTime] = useState(moment(defaultDate));
//-------------------------- Time picker ainda não está habilitado pra ios --------------------------------
const onChange = (e, selectedDate) => { const onChange = (e, selectedDate) => {
setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
@ -28,23 +32,33 @@ const FormDatePicker = (props) => {
const androidOnChange = (e, selectedDate) => { const androidOnChange = (e, selectedDate) => {
setShow(false); setShow(false);
if (selectedDate) { if (selectedDate) {
setDate(moment(selectedDate));
props.onDateChange(selectedDate);
if (mode == 'date') {
setDate(moment(selectedDate));
props.onDateChange(selectedDate);
setMode('time');
setShow(true); // to show the picker again in time mode
} else {
setTime(moment(selectedDate));
props.onTimeChange(selectedDate);
setShow(false);
setMode('date');
}
} }
}; };
const onCancelPress = () => { const onCancelPress = () => {
//setDate(moment(defaultDate));
setShow(false); setShow(false);
//console.log(moment(defaultDate).format("DD-MM-YYYY"))
}; };
const onDonePress = () => { const onDonePress = () => {
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
props.onDateChange(auxDate); props.onDateChange(auxDate);
setShow(false); setShow(false);
//console.log("done");
//console.log(date.format("DD-MM-YYYY"));
};
const formatDate = (date, time) => {
time.getHours();
time.getMinuts();
}; };
const renderDatePicker = () => { const renderDatePicker = () => {
@ -52,12 +66,18 @@ const FormDatePicker = (props) => {
<DateTimePicker <DateTimePicker
timeZoneOffsetInDays={-1} timeZoneOffsetInDays={-1}
value={new Date(auxDate)} value={new Date(auxDate)}
mode="date"
mode={mode}
is24Hour={true}
minimumDate={new Date(moment().subtract(1, "month"))} minimumDate={new Date(moment().subtract(1, "month"))}
maximumDate={new Date(moment())} maximumDate={new Date(moment())}
formatChosenDate={(selectedDate) => { formatChosenDate={(selectedDate) => {
return moment(selectedDate).format("DD/MM/YYYY");
}} //formatar a data do selected date
if(mode == "date"){
return moment(selectedDate).format("DD/MM/YYYY");
}
else{
return moment(selectedDate).format("HH:mm");
}
}} //formatar a data e hora do selected date
display={Platform.OS === "ios" ? "spinner" : "default"} display={Platform.OS === "ios" ? "spinner" : "default"}
onChange={Platform.OS === "ios" ? onChange : androidOnChange} onChange={Platform.OS === "ios" ? onChange : androidOnChange}
/> />
@ -77,7 +97,7 @@ const FormDatePicker = (props) => {
<View style={styles.dateInput}> <View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}> <Text style={{ fontSize: dimensions.text.default }}>
{" "} {" "}
{date.format("DD/MM/YYYY")}
{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
</Text> </Text>
</View> </View>
<FontAwesome5 name="calendar-day" size={30} color="grey" /> <FontAwesome5 name="calendar-day" size={30} color="grey" />
@ -148,6 +168,7 @@ FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => {}, onDateChange: () => {},
onTimeChange: () => {},
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({

4
src/app/database/databaseLoader.js

@ -36,7 +36,7 @@ function insertFloodZone({ images, description, passable, location }) {
transaction(global.userDataBase, query, values); transaction(global.userDataBase, query, values);
} }
function insertPluviometerData({ pluviometer, images, dateTime, location }) {
function insertPluviometerData({ pluviometer, images, dateTime, time, location }) {
const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`; const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`;
if (location === undefined) { if (location === undefined) {
@ -45,7 +45,7 @@ function insertPluviometerData({ pluviometer, images, dateTime, location }) {
} }
const values = [ const values = [
moment(dateTime).format("DD/MM/YYYY"),
moment(dateTime).format("DD/MM/YYYY") +" | "+ moment(time).format("HH:MM"),
JSON.stringify(images), JSON.stringify(images),
parseFloat(location["latitude"]), parseFloat(location["latitude"]),
parseFloat(location["longitude"]), parseFloat(location["longitude"]),

6
src/app/screens/PluviometerSharingDataScreen.js

@ -33,6 +33,7 @@ function PluviometerSharingDataScreen(props) {
const location = useLocation(); const location = useLocation();
const [dateTime, setDateTime] = useState(moment()); const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
@ -58,7 +59,9 @@ function PluviometerSharingDataScreen(props) {
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
insertPluviometerData({ ...values, dateTime, location });
insertPluviometerData({ ...values, dateTime, time, location });
console.log("DATA:" + dateTime);
console.log("HORA:" + time);
showMessage({ showMessage({
message: "Informação enviada!", message: "Informação enviada!",
duration: 3000, duration: 3000,
@ -89,6 +92,7 @@ function PluviometerSharingDataScreen(props) {
}} }}
defaultDate={new Date()} defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)} onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/> />
</View> </View>

9
src/package-lock.json

@ -14387,6 +14387,15 @@
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz", "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",
"integrity": "sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg==" "integrity": "sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg=="
}, },
"react-native-walkthrough-tooltip": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.2.0.tgz",
"integrity": "sha512-M4/dg8PuYKslitHXaCQ/JLudvGEVqI2tJLKv34AQ3X0tLTtNXvAvyCPlDZ+Bg2l9qJ5PQOz8iMt6dyqLn1ed+w==",
"requires": {
"prop-types": "^15.6.1",
"react-fast-compare": "^2.0.4"
}
},
"react-native-web": { "react-native-web": {
"version": "0.13.18", "version": "0.13.18",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",

Loading…
Cancel
Save