Browse Source

adding scrollview ans sucess message

master
analuizaff 4 years ago
parent
commit
695e2cede7
  1. 3
      src/App.js
  2. 4
      src/app/database/databaseLoader.js
  3. 43
      src/app/screens/PluviometerSharingDataScreen.js
  4. 15
      src/app/screens/RainSharingDataScreen.js
  5. 13
      src/app/screens/RiverFloodSharingDataScreen.js
  6. 20
      src/app/screens/SharingFloodZonesScreen.js

3
src/App.js

@ -7,7 +7,7 @@ import "./app/config/globals.js";
import openDatabase from "./app/database/database-connection"; import openDatabase from "./app/database/database-connection";
import initDatabase from "./app/database/database-init"; import initDatabase from "./app/database/database-init";
import FlashMessage from "react-native-flash-message";
export default function App() { export default function App() {
global.userDataBase = openDatabase(); global.userDataBase = openDatabase();
initDatabase(global.userDataBase); initDatabase(global.userDataBase);
@ -15,6 +15,7 @@ export default function App() {
return ( return (
<NavigationContainer theme={navigationTheme}> <NavigationContainer theme={navigationTheme}>
<AppNavigator /> <AppNavigator />
<FlashMessage position="top" />
</NavigationContainer> </NavigationContainer>
); );
} }

4
src/app/database/databaseLoader.js

@ -33,7 +33,7 @@ function insertFloodZone({ images, description, passable, location }) {
transaction(global.userDataBase, query, values); transaction(global.userDataBase, query, values);
} }
function insertPluviometerData({ pluviometer, images, date, location }) {
function insertPluviometerData({ pluviometer, images, dateTime, 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) {
@ -42,7 +42,7 @@ function insertPluviometerData({ pluviometer, images, date, location }) {
} }
const values = [ const values = [
date,
dateTime,
JSON.stringify(images), JSON.stringify(images),
parseFloat(location["latitude"]), parseFloat(location["latitude"]),
parseFloat(location["longitude"]), parseFloat(location["longitude"]),

43
src/app/screens/PluviometerSharingDataScreen.js

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { StyleSheet, Text, View, Image, Button, TouchableHighlight, Platform } from "react-native";
import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
@ -10,15 +10,13 @@ import {
SubmitButton, SubmitButton,
} from "../components/forms"; } from "../components/forms";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
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 { TouchableOpacity } from "react-native-gesture-handler";
import DateTimePicker from '@react-native-community/datetimepicker'; import DateTimePicker from '@react-native-community/datetimepicker';
import { FontAwesome5 } from '@expo/vector-icons'; import { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message";
import moment from 'moment'; import moment from 'moment';
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
@ -34,25 +32,16 @@ function PluviometerSharingDataScreen(props) {
const { textStyle, defaultDate } = props; const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate)) const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
let dateTime = new Date().toString();
const onAndroidChange = (e, selectedDate) => { const onAndroidChange = (e, selectedDate) => {
setShow(false); setShow(false);
if (selectedDate) { if (selectedDate) {
setDate(moment(selectedDate)); setDate(moment(selectedDate));
dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
//props.onDateChange(selectedDate); //props.onDateChange(selectedDate);
} }
} }
const onCancelPress = () => {
setDate(moment(defaultDate));
setShow(false);
}
const onDonePress = () => {
// props.onDateChange(date);
setShow(false);
}
const renderDatePicker = () => { const renderDatePicker = () => {
return ( return (
<DateTimePicker <DateTimePicker
@ -64,14 +53,10 @@ function PluviometerSharingDataScreen(props) {
/> />
) )
} }
/*---------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------------------------*/
// 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" }}>
<Image <Image
style={styles.image} style={styles.image}
@ -81,14 +66,20 @@ function PluviometerSharingDataScreen(props) {
Pluviômetro Pluviômetro
</Text> </Text>
</View> </View>
<ScrollView style={styles.container}>
<Form <Form
initialValues={{ initialValues={{
pluviometer: "", pluviometer: "",
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
insertPluviometerData({ ...values, date, location });
insertPluviometerData({ ...values, dateTime, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null); props.navigation.goBack(null);
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -126,8 +117,11 @@ function PluviometerSharingDataScreen(props) {
name="images" name="images"
styles={{ width: 50 }} styles={{ width: 50 }}
/> />
<SubmitButton title="Enviar" />
<SubmitButton title="Enviar" style={{marginBottom:100}}/>
<View style={{ flex: 1 }}>
</View>
</Form> </Form>
</ScrollView>
</Screen> </Screen>
); );
} }
@ -135,6 +129,7 @@ function PluviometerSharingDataScreen(props) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
paddingHorizontal: 10, paddingHorizontal: 10,
width: "100%",
}, },
image: { image: {
width: 85, width: 85,

15
src/app/screens/RainSharingDataScreen.js

@ -1,14 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import { StyleSheet, View, ScrollView } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { import {
Form, Form,
FormField,
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 FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
@ -16,6 +14,7 @@ import { Image, Text, TouchableOpacity } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRainData } from "../database/databaseLoader"; import { insertRainData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -40,12 +39,21 @@ function RainSharingDataScreen(props) {
> >
Chuva Chuva
</Text> </Text>
<ScrollView style={styles.container}>
<Form <Form
initialValues={{ initialValues={{
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
insertRainData({ ...values, rain, location }); insertRainData({ ...values, rain, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
onPress: () => {
},
});
props.navigation.goBack(null); props.navigation.goBack(null);
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -141,6 +149,7 @@ function RainSharingDataScreen(props) {
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> <SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>
</ScrollView>
</Screen> </Screen>
); );
} }

13
src/app/screens/RiverFloodSharingDataScreen.js

@ -10,6 +10,8 @@ import { Image, Text } from "react-native";
import colors from "../config/colors"; import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertRiverData } from "../database/databaseLoader"; import { insertRiverData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"), images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@ -34,12 +36,22 @@ function RiverFloodSharingDataScreen(props) {
> >
Nível da água do rio Nível da água do rio
</Text> </Text>
<KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}>
<Form <Form
initialValues={{ initialValues={{
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
insertRiverData({ ...values, riverScale, location }); insertRiverData({ ...values, riverScale, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null); props.navigation.goBack(null);
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -113,6 +125,7 @@ function RiverFloodSharingDataScreen(props) {
onPress={() => props.navigation.pop()} onPress={() => props.navigation.pop()}
/> />
</Form> </Form>
</KeyboardAwareScrollView>
</Screen> </Screen>
); );
} }

20
src/app/screens/SharingFloodZonesScreen.js

@ -5,17 +5,18 @@ import {
Text, Text,
Image, Image,
View, View,
KeyboardAvoidingView,
} from "react-native"; } from "react-native";
import * as Yup from "yup"; import * as Yup from "yup";
import { Form, SubmitButton, FormField } from "../components/forms"; import { Form, SubmitButton, FormField } from "../components/forms";
import FormImagePicker from "../components/forms/FormImagePicker"; import FormImagePicker from "../components/forms/FormImagePicker";
import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import colors from "../config/colors"; import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler"; import { TouchableNativeFeedback } from "react-native-gesture-handler";
import { insertFloodZone } from "../database/databaseLoader"; import { insertFloodZone } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Screen from "../components/Screen";
function submitForm(props) { function submitForm(props) {
// console.log(props); // console.log(props);
@ -37,7 +38,7 @@ function SharingFloodZonesScreen(props) {
const location = useLocation(); const location = useLocation();
return ( return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<Screen style={styles.container}>
<Text <Text
style={{ style={{
fontSize: 18, fontSize: 18,
@ -49,6 +50,10 @@ function SharingFloodZonesScreen(props) {
> >
Pontos de alagamento Pontos de alagamento
</Text> </Text>
<KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}>
<Form <Form
initialValues={{ initialValues={{
images: [], images: [],
@ -56,6 +61,12 @@ function SharingFloodZonesScreen(props) {
}} }}
onSubmit={(values) => { onSubmit={(values) => {
submitForm({ ...values, passable, location }); submitForm({ ...values, passable, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null); props.navigation.goBack(null);
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
@ -98,7 +109,8 @@ function SharingFloodZonesScreen(props) {
/> />
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> <SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>
</KeyboardAvoidingView>
</KeyboardAwareScrollView>
</Screen>
); );
} }

Loading…
Cancel
Save