|
@ -1,21 +1,16 @@ |
|
|
import React, { useState } from "react"; |
|
|
import React, { useState } from "react"; |
|
|
import { Dimensions } from "react-native"; |
|
|
|
|
|
import { |
|
|
|
|
|
StyleSheet, |
|
|
|
|
|
Text, |
|
|
|
|
|
Image, |
|
|
|
|
|
View, |
|
|
|
|
|
} from "react-native"; |
|
|
|
|
|
|
|
|
import { StyleSheet, Text, Image, View } 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 useLocation from "../hooks/useLocation"; |
|
|
import useLocation from "../hooks/useLocation"; |
|
|
import colors from "../config/colors"; |
|
|
import colors from "../config/colors"; |
|
|
|
|
|
import { scaleDimsFromWidth } from "../config/dimensions"; |
|
|
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 { showMessage } from "react-native-flash-message"; |
|
|
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' |
|
|
|
|
|
|
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; |
|
|
import Screen from "../components/Screen"; |
|
|
import Screen from "../components/Screen"; |
|
|
|
|
|
|
|
|
function submitForm(props) { |
|
|
function submitForm(props) { |
|
@ -30,9 +25,6 @@ const validationSchema = Yup.object().shape({ |
|
|
.required("Por favor, forneça uma descrição"), |
|
|
.required("Por favor, forneça uma descrição"), |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const screen_width = Dimensions.get("window").width; |
|
|
|
|
|
const borderWidth = 3; |
|
|
|
|
|
|
|
|
|
|
|
function SharingFloodZonesScreen(props) { |
|
|
function SharingFloodZonesScreen(props) { |
|
|
const [passable, setPassable] = useState(0); |
|
|
const [passable, setPassable] = useState(0); |
|
|
const location = useLocation(); |
|
|
const location = useLocation(); |
|
@ -43,7 +35,7 @@ function SharingFloodZonesScreen(props) { |
|
|
style={{ |
|
|
style={{ |
|
|
fontSize: 18, |
|
|
fontSize: 18, |
|
|
fontWeight: "bold", |
|
|
fontWeight: "bold", |
|
|
color: "#1976D2", |
|
|
|
|
|
|
|
|
color: colors.primary, |
|
|
textAlign: "center", |
|
|
textAlign: "center", |
|
|
marginBottom: 30, |
|
|
marginBottom: 30, |
|
|
}} |
|
|
}} |
|
@ -51,68 +43,70 @@ function SharingFloodZonesScreen(props) { |
|
|
Pontos de alagamento |
|
|
Pontos de alagamento |
|
|
</Text> |
|
|
</Text> |
|
|
<KeyboardAwareScrollView |
|
|
<KeyboardAwareScrollView |
|
|
resetScrollToCoords={{ x: 0, y: 0 }} |
|
|
|
|
|
contentContainerStyle={styles.container} |
|
|
|
|
|
scrollEnabled={true}> |
|
|
|
|
|
<Form |
|
|
|
|
|
initialValues={{ |
|
|
|
|
|
images: [], |
|
|
|
|
|
description: "", |
|
|
|
|
|
}} |
|
|
|
|
|
onSubmit={(values) => { |
|
|
|
|
|
submitForm({ ...values, passable, location }); |
|
|
|
|
|
showMessage({ |
|
|
|
|
|
message: "Informação enviada!", |
|
|
|
|
|
duration: 1950, |
|
|
|
|
|
icon: "success", |
|
|
|
|
|
type: "success", |
|
|
|
|
|
}); |
|
|
|
|
|
props.navigation.goBack(null); |
|
|
|
|
|
}} |
|
|
|
|
|
validationSchema={validationSchema} |
|
|
|
|
|
|
|
|
resetScrollToCoords={{ x: 0, y: 0 }} |
|
|
|
|
|
contentContainerStyle={styles.container} |
|
|
|
|
|
scrollEnabled={true} |
|
|
> |
|
|
> |
|
|
<View style={styles.imgs_container}> |
|
|
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(1)}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={styles.img_block} |
|
|
|
|
|
borderWidth={passable == 1 ? borderWidth : 0} |
|
|
|
|
|
> |
|
|
|
|
|
<Image |
|
|
|
|
|
style={styles.image} |
|
|
|
|
|
source={require("../assets/floodZonesAssets/passable_icon.png")} |
|
|
|
|
|
/> |
|
|
|
|
|
<Text style={styles.text}>Transitável</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
|
|
|
<Form |
|
|
|
|
|
initialValues={{ |
|
|
|
|
|
images: [], |
|
|
|
|
|
description: "", |
|
|
|
|
|
}} |
|
|
|
|
|
onSubmit={(values) => { |
|
|
|
|
|
submitForm({ ...values, passable, location }); |
|
|
|
|
|
showMessage({ |
|
|
|
|
|
message: "Informação enviada!", |
|
|
|
|
|
duration: 1950, |
|
|
|
|
|
icon: "success", |
|
|
|
|
|
type: "success", |
|
|
|
|
|
}); |
|
|
|
|
|
props.navigation.goBack(null); |
|
|
|
|
|
}} |
|
|
|
|
|
validationSchema={validationSchema} |
|
|
|
|
|
> |
|
|
|
|
|
<View style={styles.imgs_container}> |
|
|
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(1)}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={styles.img_block} |
|
|
|
|
|
borderWidth={passable == 1 ? borderWidth : 0} |
|
|
|
|
|
> |
|
|
|
|
|
<Image |
|
|
|
|
|
style={styles.image} |
|
|
|
|
|
source={require("../assets/floodZonesAssets/passable_icon.png")} |
|
|
|
|
|
/> |
|
|
|
|
|
<Text style={styles.text}>Transitável</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(0)}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={styles.img_block} |
|
|
|
|
|
borderWidth={passable == 0 ? borderWidth : 0} |
|
|
|
|
|
> |
|
|
|
|
|
<Image |
|
|
|
|
|
style={styles.image} |
|
|
|
|
|
source={require("../assets/floodZonesAssets/not_passable_icon.png")} |
|
|
|
|
|
/> |
|
|
|
|
|
<Text style={styles.text}>Intransitável</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
<TouchableNativeFeedback onPress={() => setPassable(0)}> |
|
|
|
|
|
<View |
|
|
|
|
|
style={styles.img_block} |
|
|
|
|
|
borderWidth={passable == 0 ? borderWidth : 0} |
|
|
|
|
|
> |
|
|
|
|
|
<Image |
|
|
|
|
|
style={styles.image} |
|
|
|
|
|
source={require("../assets/floodZonesAssets/not_passable_icon.png")} |
|
|
|
|
|
/> |
|
|
|
|
|
<Text style={styles.text}>Intransitável</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
<FormImagePicker name="images" height={10} /> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={255} |
|
|
|
|
|
multiline |
|
|
|
|
|
name="description" |
|
|
|
|
|
numberOfLines={3} |
|
|
|
|
|
placeholder="Descrição" |
|
|
|
|
|
/> |
|
|
|
|
|
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> |
|
|
|
|
|
</Form> |
|
|
|
|
|
|
|
|
<FormImagePicker name="images" height={10} /> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={255} |
|
|
|
|
|
multiline |
|
|
|
|
|
name="description" |
|
|
|
|
|
numberOfLines={3} |
|
|
|
|
|
placeholder="Descrição" |
|
|
|
|
|
/> |
|
|
|
|
|
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> |
|
|
|
|
|
</Form> |
|
|
</KeyboardAwareScrollView> |
|
|
</KeyboardAwareScrollView> |
|
|
</Screen> |
|
|
</Screen> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
const borderWidth = 3; |
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({ |
|
|
const styles = StyleSheet.create({ |
|
|
container: { |
|
|
container: { |
|
@ -125,12 +119,10 @@ const styles = StyleSheet.create({ |
|
|
fontWeight: "500", |
|
|
fontWeight: "500", |
|
|
}, |
|
|
}, |
|
|
image: { |
|
|
image: { |
|
|
width: 150, |
|
|
|
|
|
height: 80, |
|
|
|
|
|
|
|
|
...scaleDimsFromWidth(150, 80, 35.0), |
|
|
resizeMode: "contain", |
|
|
resizeMode: "contain", |
|
|
}, |
|
|
}, |
|
|
img_block: { |
|
|
img_block: { |
|
|
height: 120, |
|
|
|
|
|
padding: 10, |
|
|
padding: 10, |
|
|
borderRadius: 5, |
|
|
borderRadius: 5, |
|
|
borderStyle: "dotted", |
|
|
borderStyle: "dotted", |
|
@ -140,9 +132,9 @@ const styles = StyleSheet.create({ |
|
|
}, |
|
|
}, |
|
|
imgs_container: { |
|
|
imgs_container: { |
|
|
alignSelf: "center", |
|
|
alignSelf: "center", |
|
|
width: screen_width, |
|
|
|
|
|
|
|
|
flexGrow: 1, |
|
|
flexDirection: "row", |
|
|
flexDirection: "row", |
|
|
justifyContent: "center", |
|
|
|
|
|
|
|
|
justifyContent: "space-between", |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
text: { |
|
|
text: { |
|
|