Browse Source

updating date-time and location picker layout

master
analuizaff 4 years ago
parent
commit
fe96fa007b
  1. 4
      src/app/components/EventLocationInput.js
  2. 37
      src/app/components/forms/FormDatePicker.js
  3. 36
      src/app/components/forms/FormLocationPicker.js
  4. 6
      src/app/context/CurrentLocationContext.js
  5. 8
      src/app/screens/MapFormScreen.js
  6. 10
      src/app/screens/PluviometerSharingDataScreen.js
  7. 8
      src/app/screens/RainSharingDataScreen.js
  8. 10
      src/app/screens/RiverFloodSharingDataScreen.js
  9. 10
      src/app/screens/SharingFloodZonesScreen.js

4
src/app/components/EventLocationInput.js

@ -3,6 +3,7 @@ import { EventLocationContext } from "../context/EventLocationContext";
import { Text } from "react-native"; import { Text } from "react-native";
import { dimensions } from "../config/dimensions"; import { dimensions } from "../config/dimensions";
import colors from "../config/colors";
const EventLocationInput = () => { const EventLocationInput = () => {
const context = useContext(EventLocationContext); const context = useContext(EventLocationContext);
@ -11,7 +12,8 @@ const EventLocationInput = () => {
<Text style={{ <Text style={{
fontSize: dimensions.text.default, fontSize: dimensions.text.default,
textAlign: "justify", textAlign: "justify",
flex: 1
flex: 1,
backgroundColor: colors.secondary,
}}> }}>
{context.eventLocation} {context.eventLocation}
</Text> </Text>

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

@ -52,17 +52,17 @@ const FormDatePicker = (props) => {
setShow(false); setShow(false);
if (mode == "date") { if (mode == "date") {
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
props.onDateChange(auxDate);
setMode("time");
setShow(true); // to show the picker again in time mode
}
else {
setTime(moment(auxDate));
props.onTimeChange(auxDate);
setShow(false);
setMode("date");
}
setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
props.onDateChange(auxDate);
setMode("time");
setShow(true); // to show the picker again in time mode
}
else {
setTime(moment(auxDate));
props.onTimeChange(auxDate);
setShow(false);
setMode("date");
}
}; };
const renderDatePicker = () => { const renderDatePicker = () => {
@ -108,8 +108,13 @@ const FormDatePicker = (props) => {
</View> </View>
<View style={styles.dateInput}> <View style={styles.dateInput}>
<Text style={{ fontSize: dimensions.text.default }}> <Text style={{ fontSize: dimensions.text.default }}>
{" "}{date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
{" "}{date.format("DD/MM/YYYY")} {" | "} {time.format("HH:mm")}
</Text> </Text>
<View>
<Text style={{ color: colors.primary }}>
Defina a data do evento
</Text>
</View>
</View> </View>
</View> </View>
{Platform.OS !== "ios" && show && renderDatePicker()} {Platform.OS !== "ios" && show && renderDatePicker()}
@ -177,8 +182,8 @@ const FormDatePicker = (props) => {
FormDatePicker.defaultProps = { FormDatePicker.defaultProps = {
textStyle: {}, textStyle: {},
defaultDate: moment(), defaultDate: moment(),
onDateChange: () => {},
onTimeChange: () => {},
onDateChange: () => { },
onTimeChange: () => { },
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -198,7 +203,7 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
dateInput: { dateInput: {
flex: 0.8,
flex: 0.9,
backgroundColor: colors.white, backgroundColor: colors.white,
paddingLeft: 5, paddingLeft: 5,
}, },
@ -208,7 +213,7 @@ const styles = StyleSheet.create({
width: 20, width: 20,
alignItems: "center", alignItems: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.2,
flex: 0.1,
}, },
}); });

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

@ -1,16 +1,18 @@
import React from "react";
import React, { useContext } from "react";
import { StyleSheet, Text, View, PixelRatio } from "react-native"; import { StyleSheet, Text, View, PixelRatio } from "react-native";
import { MaterialIcons } from "@expo/vector-icons"; import { MaterialIcons } from "@expo/vector-icons";
import colors from "../../config/colors"; import colors from "../../config/colors";
import EventLocationInput from "../EventLocationInput"; import EventLocationInput from "../EventLocationInput";
import { dimensions } from "../../config/dimensions";
import { EventLocationContext } from "../../context/EventLocationContext";
function FormLocationPicker() { function FormLocationPicker() {
const context = useContext(EventLocationContext);
const local = context.eventLocation.toString();
return ( return (
<View style={{ width:"100%",
paddingLeft: (PixelRatio.get() >3 || PixelRatio.getFontScale() > 1.14 ? 0 : 15),
marginTop: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? 10 : 0)}}>
<View style={{ marginTop: 10, width: "100%" }}>
<View style={styles.location}> <View style={styles.location}>
<View style={styles.mapIcon}> <View style={styles.mapIcon}>
<MaterialIcons <MaterialIcons
@ -22,16 +24,20 @@ function FormLocationPicker() {
/> />
</View> </View>
<View style={styles.adressText}> <View style={styles.adressText}>
<Text>
<EventLocationInput />
<Text style={{
fontSize: dimensions.text.default,
textAlign: "justify",
flex: 1,
}}>
{local}
</Text> </Text>
<View>
<Text style={{ color: colors.primary, height: 50 }}>
Defina o local no mapa
</Text>
</View>
</View> </View>
</View> </View>
<View>
<Text style={{ color: colors.primary }}>
Defina o local no mapa
</Text>
</View>
</View> </View>
); );
} }
@ -39,14 +45,14 @@ function FormLocationPicker() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
location: { location: {
//flex: 1, //flex: 1,
width:"100%",
width: "100%",
flexDirection: "row", flexDirection: "row",
alignItems: "flex-start", alignItems: "flex-start",
justifyContent: "space-between", justifyContent: "space-between",
// backgroundColor: colors.secondary,
// backgroundColor: colors.secondary,
}, },
adressText: { adressText: {
flex: 0.80,
flex: 0.90,
paddingLeft: 5, paddingLeft: 5,
}, },
mapIcon: { mapIcon: {
@ -55,7 +61,7 @@ const styles = StyleSheet.create({
width: 20, width: 20,
alignItems: "center", alignItems: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.20,
flex: 0.10,
}, },
}); });

6
src/app/context/CurrentLocationContext.js

@ -41,9 +41,9 @@ const CurrentLocationProvider = ({ children }) => {
const address = await Location.reverseGeocodeAsync(coordenadas); const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) { if (address[0] != undefined) {
var street = (address[0].street == null ? "" : address[0].street); var street = (address[0].street == null ? "" : address[0].street);
var number = (address[0].name == null ? "" : address[0].name);
var district = (address[0].district == null ? "" : address[0].district);
setCurrentLocation(street + ", "+ number + "\n" + district , coordenadas.x);
var number = (address[0].name == null ? "" : ", " + address[0].name);
var district = (address[0].district == null ? "" : "\n" + address[0].district);
setCurrentLocation(street + number + district , coordenadas.x);
} }
else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
setCurrentLocation("Erro ao carregar localização", coordenadas.x); setCurrentLocation("Erro ao carregar localização", coordenadas.x);

8
src/app/screens/MapFormScreen.js

@ -24,9 +24,9 @@ const MapFormScreen = (props) => {
const address = await Location.reverseGeocodeAsync(coordenadas); const address = await Location.reverseGeocodeAsync(coordenadas);
if (address[0] != undefined) { if (address[0] != undefined) {
var street = (address[0].street == null ? "" : address[0].street); var street = (address[0].street == null ? "" : address[0].street);
var number = (address[0].name == null ? "" : address[0].name);
var district = (address[0].district == null ? "" : address[0].district);
context.saveNewLocation(street + ", " + number + "\n" + district, coordenadas);
var number = (address[0].name == null ? "" : ", " + address[0].name);
var district = (address[0].district == null ? "" : "\n" + address[0].district);
context.saveNewLocation(street + number + district, coordenadas);
} else { } else {
//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio //Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
context.saveNewLocation("Erro ao carregar endereço", coordenadas); context.saveNewLocation("Erro ao carregar endereço", coordenadas);
@ -63,7 +63,7 @@ const MapFormScreen = (props) => {
...lat_long_delta, ...lat_long_delta,
}} }}
onRegionChangeComplete={(r) => { onRegionChangeComplete={(r) => {
console.log(r);
// console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude }); setMarker({ latitude: r.latitude, longitude: r.longitude });
}} }}
/> />

10
src/app/screens/PluviometerSharingDataScreen.js

@ -87,18 +87,14 @@ function PluviometerSharingDataScreen(props) {
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignContent: "flex-start", alignContent: "flex-start",
}} }}
> >
{/*Data da coleta:*/} {/*Data da coleta:*/}
<View <View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
style={{ flex: 1 }}
> >
<FormDatePicker <FormDatePicker
textStyle={{ textStyle={{
@ -111,7 +107,7 @@ function PluviometerSharingDataScreen(props) {
/> />
</View> </View>
{/*Local do evento:*/} {/*Local do evento:*/}
<View style={{ flex: 0.52 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")} onPress={() => props.navigation.navigate("FormMap")}
> >

8
src/app/screens/RainSharingDataScreen.js

@ -131,7 +131,7 @@ function RainSharingDataScreen(props) {
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignContent: "flex-start", alignContent: "flex-start",
}} }}
@ -139,9 +139,7 @@ function RainSharingDataScreen(props) {
{/*Data da coleta:*/} {/*Data da coleta:*/}
<View <View
style={{ style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
flex: 1,
}} }}
> >
<FormDatePicker <FormDatePicker
@ -155,7 +153,7 @@ function RainSharingDataScreen(props) {
/> />
</View> </View>
{/*Local do evento:*/} {/*Local do evento:*/}
<View style={{ flex: 0.52 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")} onPress={() => props.navigation.navigate("FormMap")}
> >

10
src/app/screens/RiverFloodSharingDataScreen.js

@ -129,18 +129,14 @@ function RiverFloodSharingDataScreen(props) {
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignContent:"flex-start", alignContent:"flex-start",
}} }}
> >
{/*Data da coleta:*/} {/*Data da coleta:*/}
<View <View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
style={{ flex: 1 }}
> >
<FormDatePicker <FormDatePicker
textStyle={{ textStyle={{
@ -153,7 +149,7 @@ function RiverFloodSharingDataScreen(props) {
/> />
</View> </View>
{/*Local do evento:*/} {/*Local do evento:*/}
<View style={{ flex: 0.52 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")} onPress={() => props.navigation.navigate("FormMap")}
> >

10
src/app/screens/SharingFloodZonesScreen.js

@ -115,18 +115,14 @@ function SharingFloodZonesScreen(props) {
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: (PixelRatio.get()>3 || PixelRatio.getFontScale() > 1.14 ? "column" : "row"),
flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignContent:"flex-start", alignContent:"flex-start",
}} }}
> >
{/*Data da coleta:*/} {/*Data da coleta:*/}
<View <View
style={{
flex: 0.48,
borderRightColor: colors.primary,
borderRightWidth: 1,
}}
style={{ flex: 0.1 }}
> >
<FormDatePicker <FormDatePicker
textStyle={{ textStyle={{
@ -139,7 +135,7 @@ function SharingFloodZonesScreen(props) {
/> />
</View> </View>
{/*Local do evento:*/} {/*Local do evento:*/}
<View style={{ flex: 0.51 }}>
<View style={{ flex: 1 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")} onPress={() => props.navigation.navigate("FormMap")}
> >

Loading…
Cancel
Save