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
Unified 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 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,13 +37,18 @@ 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={{ flex: 1, width: "100%", marginTop: 10 }}>
<View style={styles.location}> <View style={styles.location}>
<View style={styles.mapIcon}> <View style={styles.mapIcon}>
<FontAwesome5 <FontAwesome5
@ -58,7 +65,7 @@ function SchoolPicker() {
multi={false} multi={false}
selectedItems={selectedItems} selectedItems={selectedItems}
onItemSelect={(item) => { onItemSelect={(item) => {
setSelectedItems(item)
selected(item)
}} }}
containerStyle={{ padding: 5 }} containerStyle={{ padding: 5 }}
itemStyle={{ itemStyle={{
@ -67,8 +74,10 @@ function SchoolPicker() {
backgroundColor: '#ddd', backgroundColor: '#ddd',
borderColor: '#bbb', borderColor: '#bbb',
borderWidth: 1, borderWidth: 1,
borderRadius: 5,
borderRadius: 6,
width: "100%",
}} itemTextStyle={{ color: '#222' }} }} itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: "80%" }}
items={items} items={items}
chip={true} chip={true}
resetValue={false} resetValue={false}
@ -81,13 +90,16 @@ function SchoolPicker() {
borderWidth: 1, borderWidth: 1,
borderColor: '#ccc', borderColor: '#ccc',
borderRadius: 5, borderRadius: 5,
alignItems:"flex-start",
alignContent:"flex-start",
}, },
onTextChange: text => console.log(text) onTextChange: text => console.log(text)
} }
} }
listProps={ listProps={
{ {
nestedScrollEnabled: false,
nestedScrollEnabled: true,
} }
} }
@ -100,18 +112,23 @@ function SchoolPicker() {
); );
} }
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
View File

@ -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
View File

@ -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>

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

@ -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 }}>
<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 <View
style={{ style={{
flex: 1,
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignContent: "flex-start", alignContent: "flex-start",
flex: 0.9,
}} }}
> >
<View style={{ flex: 1 }}>
<View style={{ flex: 0.8 }}>
<Text style={styles.title}> Cadastro do Pluviômetro </Text> <Text style={styles.title}> Cadastro do Pluviômetro </Text>
</View> </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 <FormDatePicker
disabled={true}
textStyle={{ textStyle={{
borderColor: colors.gray, borderColor: colors.gray,
borderWidth: 3, borderWidth: 3,
}} }}
subtitle=" "
defaultDate={new Date()} defaultDate={new Date()}
onDateChange={(value) => setDateTime(value)} onDateChange={(value) => setDateTime(value)}
onTimeChange={(value) => setTime(value)} onTimeChange={(value) => setTime(value)}
/> />
</View> </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> </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,

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-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": {

Write Preview
Loading…
Cancel
Save