forked from cemaden-educacao/WPD-MobileApp
Daniel D'Angelo Resende Barros
4 years ago
15 changed files with 340 additions and 31 deletions
-
30src/app/components/HeaderBarMenu.js
-
1src/app/components/forms/FormDatePicker.js
-
6src/app/config/colors.js
-
18src/app/navigation/AccountNavigator.js
-
12src/app/navigation/AppNavigator.js
-
22src/app/navigation/DataNavigator.js
-
17src/app/screens/DataScreen.js
-
28src/app/screens/ForecastScreen.js
-
4src/app/screens/MapFeedScreen.js
-
2src/app/screens/MessagesScreen.js
-
192src/app/screens/PluviometerDiaryScreen.js
-
11src/app/screens/PluviometerRegisterScreen.js
-
4src/app/screens/SharingDataScreen.js
-
20src/package-lock.json
-
2src/package.json
@ -0,0 +1,30 @@ |
|||||
|
import React, { useContext, useEffect, useState } from "react"; |
||||
|
|
||||
|
import { FontAwesome5 } from "@expo/vector-icons"; |
||||
|
import { |
||||
|
HeaderButtons, |
||||
|
HeaderButton, |
||||
|
Item, |
||||
|
} from "react-navigation-header-buttons"; |
||||
|
|
||||
|
const IoniconsHeaderButton = (props) => ( |
||||
|
<HeaderButton IconComponent={FontAwesome5} iconSize={23} {...props} /> |
||||
|
); |
||||
|
|
||||
|
function HeaderBarMenu(navigation) { |
||||
|
React.useLayoutEffect(() => { |
||||
|
navigation.setOptions({ |
||||
|
headerRight: () => ( |
||||
|
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}> |
||||
|
<Item |
||||
|
title="user" |
||||
|
iconName="user" |
||||
|
onPress={() => navigation.navigate("Perfil")} |
||||
|
/> |
||||
|
</HeaderButtons> |
||||
|
), |
||||
|
}); |
||||
|
}, [navigation]); |
||||
|
} |
||||
|
|
||||
|
export default HeaderBarMenu; |
@ -1,19 +1,21 @@ |
|||||
import React from "react"; |
import React from "react"; |
||||
import { createStackNavigator } from "@react-navigation/stack"; |
import { createStackNavigator } from "@react-navigation/stack"; |
||||
import AccountScreen from "../screens/AccountScreen"; |
import AccountScreen from "../screens/AccountScreen"; |
||||
import MessagesScreen from "../screens/MessagesScreen"; |
|
||||
|
|
||||
const Stack = createStackNavigator(); |
const Stack = createStackNavigator(); |
||||
|
|
||||
const AccountNavigator = () => ( |
const AccountNavigator = () => ( |
||||
<Stack.Navigator> |
<Stack.Navigator> |
||||
<Stack.Screen name="Perfil" component={AccountScreen} |
|
||||
options={{ |
|
||||
title: "Perfil", |
|
||||
headerStyle: { |
|
||||
backgroundColor: "white", |
|
||||
}, |
|
||||
}}/> |
|
||||
|
<Stack.Screen |
||||
|
name="Perfil" |
||||
|
component={AccountScreen} |
||||
|
options={{ |
||||
|
title: "Perfil", |
||||
|
headerStyle: { |
||||
|
backgroundColor: "white", |
||||
|
}, |
||||
|
}} |
||||
|
/> |
||||
</Stack.Navigator> |
</Stack.Navigator> |
||||
); |
); |
||||
|
|
||||
|
@ -0,0 +1,22 @@ |
|||||
|
import React from "react"; |
||||
|
import { createStackNavigator } from "@react-navigation/stack"; |
||||
|
import DataScreen from "../screens/DataScreen"; |
||||
|
|
||||
|
const Stack = createStackNavigator(); |
||||
|
|
||||
|
const DataNavigator = () => ( |
||||
|
<Stack.Navigator> |
||||
|
<Stack.Screen |
||||
|
name="Data" |
||||
|
component={DataScreen} |
||||
|
options={{ |
||||
|
title: "Dados", |
||||
|
headerStyle: { |
||||
|
backgroundColor: "white", |
||||
|
}, |
||||
|
}} |
||||
|
/> |
||||
|
</Stack.Navigator> |
||||
|
); |
||||
|
|
||||
|
export default DataNavigator; |
@ -0,0 +1,17 @@ |
|||||
|
import React from "react"; |
||||
|
import Screen from "../components/Screen"; |
||||
|
import InDevelopment from "../components/InDevelopment"; |
||||
|
|
||||
|
function DataScreen(props) { |
||||
|
return ( |
||||
|
<Screen |
||||
|
style={{ |
||||
|
padding: 10, |
||||
|
}} |
||||
|
> |
||||
|
<InDevelopment /> |
||||
|
</Screen> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default DataScreen; |
@ -0,0 +1,192 @@ |
|||||
|
import React, { useState, useContext, useEffect } from "react"; |
||||
|
import { StyleSheet, Text, View } from "react-native"; |
||||
|
|
||||
|
import Screen from "../components/Screen"; |
||||
|
import { dimensions, scaleDimsFromWidth } from "../config/dimensions"; |
||||
|
import colors from "../config/colors/"; |
||||
|
import { |
||||
|
LineChart, |
||||
|
BarChart, |
||||
|
PieChart, |
||||
|
ProgressChart, |
||||
|
ContributionGraph, |
||||
|
StackedBarChart |
||||
|
} from "react-native-chart-kit"; |
||||
|
|
||||
|
import { FontAwesome5 } from '@expo/vector-icons'; |
||||
|
import { MaterialIcons } from "@expo/vector-icons"; |
||||
|
import { Dimensions } from "react-native"; |
||||
|
|
||||
|
|
||||
|
const dims = scaleDimsFromWidth(85, 85, 25); |
||||
|
|
||||
|
|
||||
|
function PluviometerDiaryScreen(props) { |
||||
|
//Substituir por dados vindos da API
|
||||
|
const school = "Escola registrada do pluviômetro"; |
||||
|
const profile = "Tipo de perfil do usuário"; |
||||
|
const local = "Endereço registrado do pluviômetro" |
||||
|
|
||||
|
const screenWidth = Dimensions.get("window").width; |
||||
|
|
||||
|
const data = { |
||||
|
labels: ["January", "February", "March", "April", "May"], |
||||
|
datasets: [ |
||||
|
{ |
||||
|
data: [0, 10, 20, 35, 40, 60], |
||||
|
color: () => colors.gold, // optional
|
||||
|
strokeWidth: 2 // optional
|
||||
|
} |
||||
|
], |
||||
|
legend: ["Registros pluviometricos"] // optional
|
||||
|
}; |
||||
|
const chartConfig = { |
||||
|
backgroundGradientFrom: 0, |
||||
|
backgroundGradientFromOpacity: 0, |
||||
|
backgroundGradientTo: "#08130D", |
||||
|
backgroundGradientToOpacity: 0, |
||||
|
color: () => colors.primary, |
||||
|
strokeWidth: 2, // optional, default 3
|
||||
|
barPercentage: 0.5, |
||||
|
useShadowColorFromDataset: false // optional
|
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<Screen style={styles.container}> |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<LineChart |
||||
|
data={data} |
||||
|
width={screenWidth} |
||||
|
height={200} |
||||
|
chartConfig={chartConfig} |
||||
|
withVerticalLines={false} |
||||
|
/> |
||||
|
</View> |
||||
|
<View |
||||
|
style={{ |
||||
|
flex: 1, |
||||
|
flexDirection: "column", |
||||
|
alignContent: "flex-start", |
||||
|
justifyContent: "space-between", |
||||
|
}}> |
||||
|
{/* Endereço */} |
||||
|
< View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<MaterialIcons |
||||
|
name="location-on" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{local} |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
{/* Escola */} |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<FontAwesome5 |
||||
|
name="university" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{school} |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
{/* Usuário */} |
||||
|
<View style={{ flex: 1 }}> |
||||
|
<View style={styles.location}> |
||||
|
<View style={styles.mapIcon}> |
||||
|
<FontAwesome5 |
||||
|
name="user-alt" |
||||
|
size={28} |
||||
|
color="white" |
||||
|
alignItems="center" |
||||
|
alignContent="center" |
||||
|
/> |
||||
|
</View> |
||||
|
<View style={styles.adressText}> |
||||
|
<Text style={{ |
||||
|
fontSize: dimensions.text.default, |
||||
|
}}> |
||||
|
{profile} |
||||
|
</Text> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</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, |
||||
|
}, |
||||
|
location: { |
||||
|
width: "100%", |
||||
|
flexDirection: "row", |
||||
|
alignItems: "flex-start", |
||||
|
justifyContent: "space-between", |
||||
|
}, |
||||
|
adressText: { |
||||
|
flex: 0.90, |
||||
|
height: "100%", |
||||
|
flexDirection: "column", |
||||
|
justifyContent: "center", |
||||
|
paddingLeft: 5, |
||||
|
}, |
||||
|
mapIcon: { |
||||
|
backgroundColor: colors.primary, |
||||
|
padding: 8, |
||||
|
width: 20, |
||||
|
alignItems: "center", |
||||
|
borderRadius: 5, |
||||
|
flex: 0.10, |
||||
|
marginTop: 8, |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
export default PluviometerDiaryScreen; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue