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