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 { createStackNavigator } from "@react-navigation/stack"; |
|||
import AccountScreen from "../screens/AccountScreen"; |
|||
import MessagesScreen from "../screens/MessagesScreen"; |
|||
|
|||
const Stack = createStackNavigator(); |
|||
|
|||
const AccountNavigator = () => ( |
|||
<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> |
|||
); |
|||
|
|||
|
|||
@ -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