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. 11
      src/app/components/forms/FormDatePicker.js
  3. 28
      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 { dimensions } from "../config/dimensions";
import colors from "../config/colors";
const EventLocationInput = () => {
const context = useContext(EventLocationContext);
@ -11,7 +12,8 @@ const EventLocationInput = () => {
<Text style={{
fontSize: dimensions.text.default,
textAlign: "justify",
flex: 1
flex: 1,
backgroundColor: colors.secondary,
}}>
{context.eventLocation}
</Text>

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

@ -108,8 +108,13 @@ const FormDatePicker = (props) => {
</View>
<View style={styles.dateInput}>
<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>
<View>
<Text style={{ color: colors.primary }}>
Defina a data do evento
</Text>
</View>
</View>
</View>
{Platform.OS !== "ios" && show && renderDatePicker()}
@ -198,7 +203,7 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
dateInput: {
flex: 0.8,
flex: 0.9,
backgroundColor: colors.white,
paddingLeft: 5,
},
@ -208,7 +213,7 @@ const styles = StyleSheet.create({
width: 20,
alignItems: "center",
borderRadius: 5,
flex: 0.2,
flex: 0.1,
},
});

28
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 { MaterialIcons } from "@expo/vector-icons";
import colors from "../../config/colors";
import EventLocationInput from "../EventLocationInput";
import { dimensions } from "../../config/dimensions";
import { EventLocationContext } from "../../context/EventLocationContext";
function FormLocationPicker() {
const context = useContext(EventLocationContext);
const local = context.eventLocation.toString();
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.mapIcon}>
<MaterialIcons
@ -22,17 +24,21 @@ function FormLocationPicker() {
/>
</View>
<View style={styles.adressText}>
<Text>
<EventLocationInput />
<Text style={{
fontSize: dimensions.text.default,
textAlign: "justify",
flex: 1,
}}>
{local}
</Text>
</View>
</View>
<View>
<Text style={{ color: colors.primary }}>
<Text style={{ color: colors.primary, height: 50 }}>
Defina o local no mapa
</Text>
</View>
</View>
</View>
</View>
);
}
@ -46,7 +52,7 @@ const styles = StyleSheet.create({
// backgroundColor: colors.secondary,
},
adressText: {
flex: 0.80,
flex: 0.90,
paddingLeft: 5,
},
mapIcon: {
@ -55,7 +61,7 @@ const styles = StyleSheet.create({
width: 20,
alignItems: "center",
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);
if (address[0] != undefined) {
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
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);
if (address[0] != undefined) {
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 {
//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);
@ -63,7 +63,7 @@ const MapFormScreen = (props) => {
...lat_long_delta,
}}
onRegionChangeComplete={(r) => {
console.log(r);
// console.log(r);
setMarker({ latitude: r.latitude, longitude: r.longitude });
}}
/>

10
src/app/screens/PluviometerSharingDataScreen.js

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

8
src/app/screens/RainSharingDataScreen.js

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

10
src/app/screens/RiverFloodSharingDataScreen.js

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

10
src/app/screens/SharingFloodZonesScreen.js

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

Loading…
Cancel
Save