forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
5 changed files with 259 additions and 5 deletions
-
126src/app/components/SchoolPicker.js
-
123src/app/screens/PluviometerRegisterScreen.js
-
9src/app/screens/RegisterScreen.js
-
5src/package-lock.json
-
1src/package.json
@ -0,0 +1,126 @@ |
|||||
|
import React, { useContext, useState, Component, Fragment } from "react"; |
||||
|
import { StyleSheet, Text, View, PixelRatio, Picker } from "react-native"; |
||||
|
|
||||
|
import { MaterialIcons } from "@expo/vector-icons"; |
||||
|
import { FontAwesome5 } from '@expo/vector-icons'; |
||||
|
import colors from "../config/colors"; |
||||
|
import { dimensions } from "../config/dimensions"; |
||||
|
import Screen from "./Screen"; |
||||
|
import SearchableDropdown from 'react-native-searchable-dropdown'; |
||||
|
|
||||
|
const items = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: 'JavaScript', |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: 'Java', |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
name: 'Ruby', |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
name: 'React Native', |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
name: 'PHP', |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
name: 'Python', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
function SchoolPicker() { |
||||
|
const [selectedItems, setSelectedItems] = useState(null); |
||||
|
console.log(selectedItems); |
||||
|
|
||||
|
|
||||
|
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) |
||||
|
} |
||||
|
} |
||||
|
listProps={ |
||||
|
{ |
||||
|
nestedScrollEnabled: false, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
/> |
||||
|
</Fragment> |
||||
|
|
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
location: { |
||||
|
//flex: 1,
|
||||
|
width: "100%", |
||||
|
flexDirection: "row", |
||||
|
alignItems: "flex-start", |
||||
|
justifyContent: "space-between", |
||||
|
// backgroundColor: colors.secondary,
|
||||
|
}, |
||||
|
adressText: { |
||||
|
flex: 0.90, |
||||
|
paddingLeft: 5, |
||||
|
}, |
||||
|
mapIcon: { |
||||
|
backgroundColor: colors.primary, |
||||
|
padding: 8, |
||||
|
width: 20, |
||||
|
alignItems: "center", |
||||
|
borderRadius: 5, |
||||
|
flex: 0.10, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
export default SchoolPicker; |
||||
@ -0,0 +1,123 @@ |
|||||
|
import React, { useState, useContext, useEffect } from "react"; |
||||
|
import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView } from "react-native"; |
||||
|
import * as Yup from "yup"; |
||||
|
import { |
||||
|
Form, |
||||
|
FormField, |
||||
|
FormPicker as Picker, |
||||
|
SubmitButton, |
||||
|
} from "../components/forms"; |
||||
|
import Screen from "../components/Screen"; |
||||
|
import useLocation from "../hooks/useLocation"; |
||||
|
import FormImagePicker from "../components/forms/FormImagePicker"; |
||||
|
import { insertPluviometerData } from "../database/databaseLoader"; |
||||
|
import { showMessage } from "react-native-flash-message"; |
||||
|
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; |
||||
|
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 { EventLocationContext } from "../context/EventLocationContext"; |
||||
|
import SchoolPicker from "../components/SchoolPicker"; |
||||
|
|
||||
|
|
||||
|
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()); |
||||
|
|
||||
|
return ( |
||||
|
<Screen style={styles.container}> |
||||
|
<Form> |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<View |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
flexDirection: "column", |
||||
|
justifyContent: "space-between", |
||||
|
alignContent: "flex-start", |
||||
|
}} |
||||
|
|
||||
|
> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
<FormDatePicker |
||||
|
textStyle={{ |
||||
|
borderColor: colors.gray, |
||||
|
borderWidth: 3, |
||||
|
}} |
||||
|
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> |
||||
|
</Form> |
||||
|
</Screen> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
padding: 10, |
||||
|
flex: 1, |
||||
|
}, |
||||
|
image: { |
||||
|
width: dims.width * 0.8, |
||||
|
height: dims.height * 0.8, |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
}, |
||||
|
label: { |
||||
|
fontSize: dimensions.text.secondary, |
||||
|
fontWeight: "bold", |
||||
|
textAlign: "left", |
||||
|
color: colors.lightBlue, |
||||
|
}, |
||||
|
title: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: "bold", |
||||
|
textAlign: "center", |
||||
|
color: colors.primary, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
export default PluviometerRegisterScreen; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue