Browse Source

layout - select location

master
analuizaff 4 years ago
parent
commit
58e625f240
  1. 32
      src/app/components/forms/FormDatePicker.js
  2. 56
      src/app/components/forms/FormLocationPicker.js
  3. 8
      src/app/navigation/SharingDataOptionsNavigator.js
  4. 33
      src/app/screens/PluviometerSharingDataScreen.js
  5. 28
      src/app/screens/RainSharingDataScreen.js
  6. 28
      src/app/screens/RiverFloodSharingDataScreen.js
  7. 30
      src/app/screens/SharingFloodZonesScreen.js

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

@ -94,16 +94,15 @@ const FormDatePicker = (props) => {
justifyContent: "space-between",
}}
>
<View style={styles.dateIcon}>
<MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center"/>
</View>
<View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}>
{" "}
{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
</Text>
</View>
<View style={styles.dateIcon}>
<MaterialCommunityIcons name="calendar-today" size={30} color="white" alignItems="center" />
</View>
<View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}>
{" "} {date.format("DD/MM/YYYY")} {"\n "} {time.format("HH:mm")}
</Text>
</View>
</View>
{Platform.OS !== "ios" && show && renderDatePicker()}
{Platform.OS === "ios" && show && (
@ -190,19 +189,18 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
dateInput: {
flex: 0.91,
flex: 0.80,
backgroundColor: colors.white,
borderRadius: 25,
padding: 10,
marginVertical: 10,
},
dateIcon:{
dateIcon: {
backgroundColor: colors.cerulean,
padding: 10,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.09,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.20,
}
});

56
src/app/components/forms/FormLocationPicker.js

@ -0,0 +1,56 @@
import React from "react";
import {
StyleSheet,
Text,
View,
} from "react-native";
import { MaterialIcons } from '@expo/vector-icons';
import colors from "../../config/colors";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { TouchableOpacity } from "react-native-gesture-handler";
const FormLocationPicker = (props) => {
return (
<TouchableOpacity>
<View>
<View style={styles.location}>
<View style={styles.mapIcon}>
<MaterialIcons name="location-on" size={28} color="white" alignItems="center" alignContent="center" />
</View>
<View style={styles.adressText}>
<Text>{""} Endereço {"\n "}...</Text>
</View>
</View>
<Text style={{ color: colors.primary }}>Defina o local no mapa</Text>
</View>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
location: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
adressText: {
flex: 0.78,
backgroundColor: colors.white,
borderRadius: 25,
marginVertical: 10,
},
mapIcon: {
backgroundColor: colors.cerulean,
padding: 8,
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.20,
}
});
export default FormLocationPicker;

8
src/app/navigation/SharingDataOptionsNavigator.js

@ -26,7 +26,7 @@ function SharingDataOptionsNavigator() {
name="RainSharingData"
component={RainSharingDataScreen}
options={{
title: "Enviar uma informação",
title: "Chuva",
headerStyle: {
backgroundColor: "white",
},
@ -36,7 +36,7 @@ function SharingDataOptionsNavigator() {
name="FloodSharingData"
component={SharingFloodZonesScreen}
options={{
title: "Enviar uma informação",
title: "Ponto de alagamento",
headerStyle: {
backgroundColor: "white",
},
@ -46,7 +46,7 @@ function SharingDataOptionsNavigator() {
name="PluviometerSharingData"
component={PluviometerSharingDataScreen}
options={{
title: "Enviar uma informação",
title: "Pluviômetro",
headerStyle: {
backgroundColor: "white",
},
@ -56,7 +56,7 @@ function SharingDataOptionsNavigator() {
name="RiverFloodData"
component={RiverFloodSharingDataScreen}
options={{
title: "Enviar uma informação",
title: "Nível de água no rio",
headerStyle: {
backgroundColor: "white",
},

33
src/app/screens/PluviometerSharingDataScreen.js

@ -16,6 +16,7 @@ import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/";
import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
const dims = scaleDimsFromWidth(85, 85, 25);
@ -72,7 +73,7 @@ function PluviometerSharingDataScreen(props) {
}}
validationSchema={validationSchema}
>
<View style={{ marginTop: 30, flex: 1 }}>
<View style={{ flex: 1 }}>
<Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
<FormField
keyboardType="decimal-pad"
@ -87,20 +88,26 @@ function PluviometerSharingDataScreen(props) {
name="images"
styles={{ width: 50 }}
/>
<View style={{ marginTop: 10, flex: 1 }}>
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
{/*Data da coleta:*/}
<FormDatePicker
textStyle={{
padding: 15,
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<FormLocationPicker />
</View>
</View>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
<View style={{ flex: 1 }}></View>
</Form>

28
src/app/screens/RainSharingDataScreen.js

@ -20,6 +20,7 @@ import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import assets from "../config/assets";
import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
const validationSchema = Yup.object().shape({
images: Yup.array(),
@ -161,18 +162,23 @@ function RainSharingDataScreen(props) {
<FormImagePicker backgroundColor={colors.primary} name="images" />
<View style={{ marginTop: 10, flex: 1 }}>
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
{/*Data da coleta:*/}
<FormDatePicker
textStyle={{
padding: 15,
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<FormLocationPicker />
</View>
</View>
<FormField

28
src/app/screens/RiverFloodSharingDataScreen.js

@ -21,6 +21,7 @@ import assets from "../config/assets";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
const validationSchema = Yup.object().shape({
images: Yup.array(),
@ -139,18 +140,23 @@ function RiverFloodSharingDataScreen(props) {
<FormImagePicker backgroundColor={colors.primary} name="images" />
<View style={{ marginTop: 10, flex: 1 }}>
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
{/*Data da coleta:*/}
<FormDatePicker
textStyle={{
padding: 15,
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<FormLocationPicker />
</View>
</View>
<FormField

30
src/app/screens/SharingFloodZonesScreen.js

@ -15,6 +15,7 @@ import Screen from "../components/Screen";
import assets from "../config/assets";
import moment from "moment";
import FormDatePicker from "../components/forms/FormDatePicker";
import FormLocationPicker from "../components/forms/FormLocationPicker";
function submitForm(props) {
console.log(props);
@ -105,19 +106,24 @@ function SharingFloodZonesScreen(props) {
)}
<FormImagePicker name="images" height={10} />
<View style={{ marginTop: 10, flex: 1 }}>
<View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
{/*Data da coleta:*/}
<FormDatePicker
textStyle={{
padding: 15,
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
<View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 0.48 }}>
<FormLocationPicker />
</View>
</View>
<FormField

Loading…
Cancel
Save