Browse Source

improving pluviometer register screen

master
analuizaff 4 years ago
parent
commit
5b1dcb1ecc
  1. 132
      src/app/components/SchoolPicker.js
  2. 11
      src/app/components/forms/FormDatePicker.js
  3. 4
      src/app/components/forms/FormLocationPicker.js
  4. 114
      src/app/screens/PluviometerRegisterScreen.js
  5. 19275
      src/package-lock.json
  6. 1
      src/package.json

132
src/app/components/SchoolPicker.js

@ -1,5 +1,5 @@
import React, { useContext, useState, Component, Fragment } from "react"; 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 { MaterialIcons } from "@expo/vector-icons";
import { FontAwesome5 } 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 { dimensions } from "../config/dimensions";
import Screen from "./Screen"; import Screen from "./Screen";
import SearchableDropdown from 'react-native-searchable-dropdown'; import SearchableDropdown from 'react-native-searchable-dropdown';
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const items = [ const items = [
//substituir posteriormente pelas escolas
{ {
id: 1, id: 1,
name: 'JavaScript', name: 'JavaScript',
@ -35,83 +37,98 @@ const items = [
}, },
]; ];
function SchoolPicker() {
function SchoolPicker(props) {
const [selectedItems, setSelectedItems] = useState(null); const [selectedItems, setSelectedItems] = useState(null);
console.log(selectedItems);
const selected = ( i ) => {
setSelectedItems(i);
props.itemSelected(i);
//console.log(i.name);
};
return ( return (
<View style={{ flex: 1, width: "100%" }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<FontAwesome5
name="university"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Fragment>
<SearchableDropdown
multi={false}
selectedItems={selectedItems}
onItemSelect={(item) => {
setSelectedItems(item)
}}
containerStyle={{ padding: 5 }}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}} itemTextStyle={{ color: '#222' }}
items={items}
chip={true}
resetValue={false}
textInputProps={
{
placeholder: "Escola onde você estuda...",
underlineColorAndroid: "transparent",
style: {
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
onTextChange: text => console.log(text)
}
<View style={{ flex: 1, width: "100%", marginTop: 10 }}>
<View style={styles.location}>
<View style={styles.mapIcon}>
<FontAwesome5
name="university"
size={28}
color="white"
alignItems="center"
alignContent="center"
/>
</View>
<View style={styles.adressText}>
<Fragment>
<SearchableDropdown
multi={false}
selectedItems={selectedItems}
onItemSelect={(item) => {
selected(item)
}}
containerStyle={{ padding: 5 }}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 6,
width: "100%",
}} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: "80%" }}
items={items}
chip={true}
resetValue={false}
textInputProps={
{
placeholder: "Escola onde você estuda...",
underlineColorAndroid: "transparent",
style: {
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
alignItems:"flex-start",
alignContent:"flex-start",
},
onTextChange: text => console.log(text)
} }
listProps={
{
nestedScrollEnabled: false,
}
}
listProps={
{
nestedScrollEnabled: true,
} }
/>
</Fragment>
}
/>
</Fragment>
</View>
</View> </View>
</View> </View>
</View>
); );
} }
SchoolPicker.defaultProps = {
itemSelected: () =>{ },
};
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",
// backgroundColor: colors.secondary,
justifyContent: "center",
zIndex: 10,
position: "absolute",
backgroundColor: colors.white,
}, },
adressText: { adressText: {
flex: 0.90, flex: 0.90,
paddingLeft: 5,
}, },
mapIcon: { mapIcon: {
backgroundColor: colors.primary, backgroundColor: colors.primary,
@ -120,6 +137,7 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
borderRadius: 5, borderRadius: 5,
flex: 0.10, flex: 0.10,
marginTop: 8,
}, },
}); });

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

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

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

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

114
src/app/screens/PluviometerRegisterScreen.js

@ -1,5 +1,5 @@
import React, { useState, useContext, useEffect } from "react"; 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 * as Yup from "yup";
import { import {
Form, Form,
@ -17,9 +17,11 @@ import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/"; import colors from "../config/colors/";
import moment from "moment"; import moment from "moment";
import FormLocationPicker from "../components/forms/FormLocationPicker"; 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 { EventLocationContext } from "../context/EventLocationContext";
import SchoolPicker from "../components/SchoolPicker"; import SchoolPicker from "../components/SchoolPicker";
import { KeyboardAwareFlatList, KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
const dims = scaleDimsFromWidth(85, 85, 25); const dims = scaleDimsFromWidth(85, 85, 25);
@ -27,69 +29,79 @@ const dims = scaleDimsFromWidth(85, 85, 25);
function PluviometerRegisterScreen(props) { function PluviometerRegisterScreen(props) {
const context = useContext(EventLocationContext); const context = useContext(EventLocationContext);
const amount = 2;
useEffect(() => { useEffect(() => {
context.defaultLocation(); context.defaultLocation();
}, []); }, []);
const location = context.eventCoordinates; const location = context.eventCoordinates;
const address = context.eventLocation; const address = context.eventLocation;
const [dateTime, setDateTime] = useState(moment()); const [dateTime, setDateTime] = useState(moment());
const [time, setTime] = useState(moment());
const [school, setSchool] = useState();
return ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<Form>
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
}}
<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 }}>
<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={{
flexDirection: "column",
justifyContent: "space-between",
alignContent: "flex-start",
flex: 0.9,
}}
>
<View style={{ flex: 0.8 }}>
<Text style={styles.title}> Cadastro do Pluviômetro </Text>
</View>
<View style={{ flex: 2 }}>
<Text style={styles.label}>Escola: </Text>
<SchoolPicker
itemSelected={(value) => setSchool(value)} />
</View>
<FormDatePicker
textStyle={{
borderColor: colors.gray,
borderWidth: 3,
}}
defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)}
/>
</View>
<View style={{ flex: 2 }}>
{/*Local do evento:*/} {/*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>
<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> </View>
<SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
</View> </View>
<SubmitButton title="Cadastrar" style={{ marginBottom: 100 }} />
</Form> </Form>
</Screen> </Screen>
); );
@ -98,7 +110,7 @@ function PluviometerRegisterScreen(props) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
padding: 10, padding: 10,
flex: 1,
flex: 1
}, },
image: { image: {
width: dims.width * 0.8, width: dims.width * 0.8,

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

1
src/package.json

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

Loading…
Cancel
Save