gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

improving pluviometer register screen

master
analuizaff 4 years ago
parent
423bbf56bf
commit
5b1dcb1ecc
6 changed files with 11219 additions and 8318 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. 38
      src/app/components/SchoolPicker.js
  2. 11
      src/app/components/forms/FormDatePicker.js
  3. 4
      src/app/components/forms/FormLocationPicker.js
  4. 84
      src/app/screens/PluviometerRegisterScreen.js
  5. 18411
      src/package-lock.json
  6. 1
      src/package.json

38
src/app/components/SchoolPicker.js
View File

@ -1,5 +1,5 @@
import React, { useContext, useState, Component, Fragment } from "react";
import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native";
import { StyleSheet, Text, View, PixelRatio, Picker, KeyboardAvoidingView } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } from '@expo/vector-icons';
@ -7,8 +7,10 @@ import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import Screen from "./Screen";
import SearchableDropdown from 'react-native-searchable-dropdown';
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const items = [
//substituir posteriormente pelas escolas
{
id: 1,
name: 'JavaScript',
@ -35,13 +37,18 @@ const items = [
},
];
function SchoolPicker() {
function SchoolPicker(props) {
const [selectedItems, setSelectedItems] = useState(null);
console.log(selectedItems);
const selected = ( i ) => {
setSelectedItems(i);
props.itemSelected(i);
//console.log(i.name);
};
return (
<View style={{ flex: 1, width: "100%" }}>
<View style={{ flex: 1, width: "100%", marginTop: 10 }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<FontAwesome5
@ -58,7 +65,7 @@ function SchoolPicker() {
multi={false}
selectedItems={selectedItems}
onItemSelect={(item) => {
setSelectedItems(item)
selected(item)
}}
containerStyle={{ padding: 5 }}
itemStyle={{
@ -67,8 +74,10 @@ function SchoolPicker() {
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
borderRadius: 6,
width: "100%",
}} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: "80%" }}
items={items}
chip={true}
resetValue={false}
@ -81,13 +90,16 @@ function SchoolPicker() {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
alignItems:"flex-start",
alignContent:"flex-start",
},
onTextChange: text => console.log(text)
}
}
listProps={
{
nestedScrollEnabled: false,
nestedScrollEnabled: true,
}
}
@ -100,18 +112,23 @@ function SchoolPicker() {
);
}
SchoolPicker.defaultProps = {
itemSelected: () =>{ },
};
const styles = StyleSheet.create({
location: {
//flex: 1,
width: "100%",
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "space-between",
// backgroundColor: colors.secondary,
justifyContent: "center",
zIndex: 10,
position: "absolute",
backgroundColor: colors.white,
},
adressText: {
flex: 0.90,
paddingLeft: 5,
},
mapIcon: {
backgroundColor: colors.primary,
@ -120,6 +137,7 @@ const styles = StyleSheet.create({
alignItems: "center",
borderRadius: 5,
flex: 0.10,
marginTop: 8,
},
});

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

@ -16,6 +16,8 @@ import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";
const FormDatePicker = (props) => {
const [disabled,setDisabled]=useState(props.disabled);
const { textStyle, defaultDate } = props;
const [date, setDate] = useState(moment(defaultDate));
const [show, setShow] = useState(false);
@ -23,6 +25,7 @@ const FormDatePicker = (props) => {
const [mode, setMode] = useState("date");
const [time, setTime] = useState(moment(defaultDate));
const onChange = (e, selectedDate) => {
setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
};
@ -89,7 +92,7 @@ const FormDatePicker = (props) => {
};
return (
<TouchableOpacity onPress={() => setShow(true)}>
<TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
<View
style={{
width: "100%",
@ -112,7 +115,7 @@ const FormDatePicker = (props) => {
</Text>
<View>
<Text style={{ color: colors.primary }}>
Defina a data do evento
{(props.subtitle ? props.subtitle : " Defina a data do evento")}
</Text>
</View>
</View>
@ -205,7 +208,9 @@ const styles = StyleSheet.create({
dateInput: {
flex: 0.9,
backgroundColor: colors.white,
paddingLeft: 5,
height: "100%",
flexDirection: "column",
justifyContent: "center",
},
dateIcon: {
backgroundColor: colors.primary,

4
src/app/components/forms/FormLocationPicker.js
View File

@ -7,7 +7,7 @@ import EventLocationInput from "../EventLocationInput";
import { dimensions } from "../../config/dimensions";
import { EventLocationContext } from "../../context/EventLocationContext";
function FormLocationPicker() {
function FormLocationPicker({ subtitle }) {
const context = useContext(EventLocationContext);
const local = context.eventLocation.toString();
@ -33,7 +33,7 @@ function FormLocationPicker() {
</Text>
<View>
<Text style={{ color: colors.primary, height: 50 }}>
Defina o local no mapa
{(subtitle ? subtitle : "Defina o local no mapa" )}
</Text>
</View>
</View>

84
src/app/screens/PluviometerRegisterScreen.js
View File

@ -1,5 +1,5 @@
import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView } from "react-native";
import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView, KeyboardAvoidingView, Platform } from "react-native";
import * as Yup from "yup";
import {
Form,
@ -17,9 +17,11 @@ import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/";
import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker";
import { TouchableOpacity } from "react-native-gesture-handler";
import { TextInput, TouchableOpacity } from "react-native-gesture-handler";
import { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker";
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const dims = scaleDimsFromWidth(85, 85, 25);
@ -27,69 +29,79 @@ const dims = scaleDimsFromWidth(85, 85, 25);
function PluviometerRegisterScreen(props) {
const context = useContext(EventLocationContext);
const amount = 2;
useEffect(() => {
context.defaultLocation();
}, []);
const location = context.eventCoordinates;
const address = context.eventLocation;
const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
const [school, setSchool] = useState();
return (
<Screen style={styles.container}>
<Form>
<View style={{ flex: 1 }}>
<Form
initialValues={{
}}
onSubmit={() => {
//insertRainData({ ...values, rain, location, date, time, address });
showMessage({
message: "Ainda não implementado",
duration: 1950,
icon: "warning",
type: "warning",
onPress: () => { },
});
//props.navigation.navigate("Home");
}}>
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
flex: 0.9,
}}
>
<View style={{ flex: 1 }}>
<View style={{ flex: 0.8 }}>
<Text style={styles.title}> Cadastro do Pluviômetro </Text>
</View>
{/*Data da coleta:*/}
<View
style={{ flex: 2 }}
>
<Text style={styles.label}> Data do cadastro: </Text>
<View style={{ flex: 2 }}>
<Text style={styles.label}>Escola: </Text>
<SchoolPicker
itemSelected={(value) => setSchool(value)} />
</View>
<View style={{ flex: 2 }}>
{/*Local do evento:*/}
<Text style={styles.label}>Endereço do pluviômetro: </Text>
<ScrollView>
<FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
</ScrollView>
</View>
{/*Data da coleta:*/}
<View style={{ flex: 2 }}>
<Text style={{
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.lightBlue, marginBottom: 10
}}>Data do cadastro: </Text>
<FormDatePicker
disabled={true}
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
subtitle=" "
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
{/*Local do evento:*/}
<View style={{ flex: 2 }}>
<ScrollView>
<Text style={styles.label}> Endereço do pluviômetro: </Text>
<TouchableOpacity
onPress={() => props.navigation.navigate("FormMap")}
>
<FormLocationPicker />
</TouchableOpacity>
</ScrollView>
</View>
<View style={{ flex: 4 }}>
<Text style={styles.label}> Escola: </Text>
<SchoolPicker />
</View>
</View>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
</View>
<SubmitButton title="Cadastrar" style={{ marginBottom: 100 }} />
</Form>
</Screen>
);
@ -98,7 +110,7 @@ function PluviometerRegisterScreen(props) {
const styles = StyleSheet.create({
container: {
padding: 10,
flex: 1,
flex: 1
},
image: {
width: dims.width * 0.8,

18411
src/package-lock.json
File diff suppressed because it is too large
View File

1
src/package.json
View File

@ -53,6 +53,7 @@
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.3",
"react-navigation-tabs": "^2.10.1",
"searchable-flatlist": "0.0.4",
"yup": "^0.28.5"
},
"devDependencies": {

Write Preview
Loading…
Cancel
Save