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

114
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 }}>
<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
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