cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

layout - select location

master
analuizaff 4 years ago
parent
6c970fcdce
commit
58e625f240
7 changed files with 147 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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

Write Preview
Loading…
Cancel
Save