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

4
src/app/database/databaseLoader.js

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

43
src/app/screens/PluviometerSharingDataScreen.js

@ -1,6 +1,6 @@
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 {
@ -10,15 +10,13 @@ import {
SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";
import DatePicker from "react-native-datepicker";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
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 { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message";
import moment from 'moment';
const validationSchema = Yup.object().shape({
@ -34,25 +32,16 @@ function PluviometerSharingDataScreen(props) {
const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate))
const [show, setShow] = useState(false);
let dateTime = new Date().toString();
const onAndroidChange = (e, selectedDate) => {
setShow(false);
if (selectedDate) {
setDate(moment(selectedDate));
dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
//props.onDateChange(selectedDate);
}
}
const onCancelPress = () => {
setDate(moment(defaultDate));
setShow(false);
}
const onDonePress = () => {
// props.onDateChange(date);
setShow(false);
}
const renderDatePicker = () => {
return (
<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 (
<Screen style={styles.container}>
<View style={{ alignSelf: "center" }}>
<Image
style={styles.image}
@ -81,14 +66,20 @@ function PluviometerSharingDataScreen(props) {
Pluviômetro
</Text>
</View>
<ScrollView style={styles.container}>
<Form
initialValues={{
pluviometer: "",
images: [],
}}
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);
}}
validationSchema={validationSchema}
@ -126,8 +117,11 @@ function PluviometerSharingDataScreen(props) {
name="images"
styles={{ width: 50 }}
/>
<SubmitButton title="Enviar" />
<SubmitButton title="Enviar" style={{marginBottom:100}}/>
<View style={{ flex: 1 }}>
</View>
</Form>
</ScrollView>
</Screen>
);
}
@ -135,6 +129,7 @@ function PluviometerSharingDataScreen(props) {
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
width: "100%",
},
image: {
width: 85,

15
src/app/screens/RainSharingDataScreen.js

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

13
src/app/screens/RiverFloodSharingDataScreen.js

@ -10,6 +10,8 @@ import { Image, Text } from "react-native";
import colors from "../config/colors";
import { TouchableNativeFeedback } from "react-native-gesture-handler";
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({
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
</Text>
<KeyboardAwareScrollView
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}>
<Form
initialValues={{
images: [],
}}
onSubmit={(values) => {
insertRiverData({ ...values, riverScale, location });
showMessage({
message: "Informação enviada!",
duration: 1950,
icon: "success",
type: "success",
});
props.navigation.goBack(null);
}}
validationSchema={validationSchema}
@ -113,6 +125,7 @@ function RiverFloodSharingDataScreen(props) {
onPress={() => props.navigation.pop()}
/>
</Form>
</KeyboardAwareScrollView>
</Screen>
);
}

20
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save