cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 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. 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
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,83 +37,98 @@ 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={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>
);
}
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>

114
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 }}>
<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:*/}
<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>
<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,

19275
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