Browse Source

Merge branch 'main' of https://github.com/IGSD-UoW/WPD-MobileApp into main

master
Daniel D'Angelo Resende Barros 4 years ago
parent
commit
80fb1da518
  1. 30
      src/app/components/HeaderBarMenu.js
  2. 3
      src/app/components/forms/FormDatePicker.js
  3. 6
      src/app/config/colors.js
  4. 18
      src/app/navigation/AccountNavigator.js
  5. 12
      src/app/navigation/AppNavigator.js
  6. 22
      src/app/navigation/DataNavigator.js
  7. 17
      src/app/screens/DataScreen.js
  8. 28
      src/app/screens/ForecastScreen.js
  9. 4
      src/app/screens/MapFeedScreen.js
  10. 2
      src/app/screens/MessagesScreen.js
  11. 192
      src/app/screens/PluviometerDiaryScreen.js
  12. 11
      src/app/screens/PluviometerRegisterScreen.js
  13. 4
      src/app/screens/SharingDataScreen.js
  14. 20
      src/package-lock.json
  15. 2
      src/package.json

30
src/app/components/HeaderBarMenu.js

@ -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;

3
src/app/components/forms/FormDatePicker.js

@ -192,7 +192,7 @@ FormDatePicker.defaultProps = {
const styles = StyleSheet.create({
btnCancel: {
left: 0,
},
},
btnDone: {
right: 0,
},
@ -207,7 +207,6 @@ const styles = StyleSheet.create({
},
dateInput: {
flex: 0.9,
backgroundColor: colors.white,
height: "100%",
flexDirection: "column",
justifyContent: "center",

6
src/app/config/colors.js

@ -8,7 +8,9 @@ export default {
dark: "#0c0c0c",
danger: "#ff5252",
lightGray: "#C4C4C4",
gray: "gray",
gray: "#999999",
lightestGray: "#F0F0F0",
lightBlue:"#1976D2"
lightBlue: "#1976D2",
gold: "#ffd700",
};

18
src/app/navigation/AccountNavigator.js

@ -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>
);

12
src/app/navigation/AppNavigator.js

@ -2,7 +2,7 @@ import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import AccountNavigator from "./AccountNavigator";
import DataNavigator from "./DataNavigator";
import FeedNavigator from "./FeedNavigator";
import MessagesNavigator from "./MessagesNavigator";
import ForecastNavigator from "./ForecastNavigator";
@ -74,11 +74,15 @@ const AppNavigator = () => (
}}
/>
<Tab.Screen
name="Perfil"
component={AccountNavigator}
name="Dados"
component={DataNavigator}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={size} />
<MaterialCommunityIcons
name="layers-triple"
color={color}
size={size}
/>
),
}}
/>

22
src/app/navigation/DataNavigator.js

@ -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;

17
src/app/screens/DataScreen.js

@ -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;

28
src/app/screens/ForecastScreen.js

@ -3,11 +3,10 @@ import Screen from "../components/Screen";
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
import { dimensions, screen_width } from "../config/dimensions";
import colors from "../config/colors";
import { EventLocationContext } from "../context/EventLocationContext";
import getWeatherForecast from "../api/weather_forecast";
import assets from "../config/assets";
import { ScrollView } from "react-native-gesture-handler";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import HeaderBarMenu from "../components/HeaderBarMenu";
function forecastDay(day, setDay) {
return (
@ -138,11 +137,25 @@ function weekDayList(day_forecast) {
}}
>
<View style={{ alignItems: "center" }}>
<Text>{day_forecast.week_day}</Text>
<Text>({day_forecast.date})</Text>
<Text
style={{ fontWeight: "bold", fontSize: dimensions.text.default }}
>
{day_forecast.week_day}
</Text>
<Text
style={{
color: colors.gray,
fontSize: dimensions.text.tertiary,
fontWeight: "400",
}}
>
({day_forecast.date})
</Text>
</View>
<SvgImage style={{ marginHorizontal: 52 }} />
<Text>{day_forecast.rain_fall_mm} mm</Text>
<Text style={{ fontSize: dimensions.text.default, fontWeight: "bold" }}>
{day_forecast.rain_fall_mm} mm
</Text>
</View>
</View>
);
@ -170,7 +183,7 @@ function currentLocationAndDate(forecast, day) {
>
<Text
style={{
fontWeight: "500",
fontWeight: "bold",
fontSize: dimensions.text.default,
}}
>
@ -179,7 +192,7 @@ function currentLocationAndDate(forecast, day) {
<Text
style={{
fontWeight: "500",
fontWeight: "bold",
fontSize: dimensions.text.tertiary,
color: colors.gray,
}}
@ -231,6 +244,7 @@ function renderErrorScreen() {
function ForecastScreen(props) {
const forecast = getWeatherForecast();
HeaderBarMenu(props.navigation);
return (
<Screen>{forecast ? renderScreen(forecast) : renderErrorScreen()}</Screen>
);

4
src/app/screens/MapFeedScreen.js

@ -4,11 +4,11 @@ import MapView from "react-native-maps";
import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions";
import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
import attachFocusToQuery from "../hooks/useFocus";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
import HeaderBarMenu from "../components/HeaderBarMenu";
function MapFeedScreen(props) {
const context = useContext(CurrentLocationContext);
@ -30,6 +30,8 @@ function MapFeedScreen(props) {
longitudeDelta: map_scale * (screen_width / screen_height),
};
HeaderBarMenu(props.navigation);
return (
<View style={styles.container}>
<MapView

2
src/app/screens/MessagesScreen.js

@ -1,8 +1,10 @@
import React from "react";
import Screen from "../components/Screen";
import InDevelopment from "../components/InDevelopment";
import HeaderBarMenu from "../components/HeaderBarMenu";
function MessageScreen(props) {
HeaderBarMenu(props.navigation);
return (
<Screen>
<InDevelopment />

192
src/app/screens/PluviometerDiaryScreen.js

@ -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;

11
src/app/screens/PluviometerRegisterScreen.js

@ -1,6 +1,5 @@
import React, { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, PixelRatio, SafeAreaView, KeyboardAvoidingView, Platform } from "react-native";
import * as Yup from "yup";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import {
Form,
SubmitButton,
@ -60,6 +59,7 @@ function PluviometerRegisterScreen(props) {
<View style={{ flex: 0.10 }}>
<Text style={styles.title}>Cadastro do Pluviômetro</Text>
</View>
{/* Escola: */}
<View style={{ flex: 0.30 }}>
<Text style={styles.label}>Escola: </Text>
<SchoolPicker
@ -69,15 +69,16 @@ function PluviometerRegisterScreen(props) {
flex: 0.60, flexDirection: "column",
justifyContent: "space-between"
}}>
<ScrollView>
<ScrollView contentContainerStyle={{ flexGrow: 1,flexDirection: "column",
justifyContent: "space-between" }}>
{/*Local do evento:*/}
{/*Local do pluvioômetro:*/}
<View style={{ flex: 1 }}>
<Text style={styles.label}>Endereço do pluviômetro: </Text>
<FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
</View>
{/*Data da coleta:*/}
{/*Data de cadastro:*/}
<View style={{ flex: 1 }}>
<Text style={{
fontSize: dimensions.text.secondary,

4
src/app/screens/SharingDataScreen.js

@ -6,14 +6,14 @@ import assets from "../config/assets";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg";
import HeaderBarMenu from "../components/HeaderBarMenu";
//1/3
function SharingDataScreen({ navigation }) {
const dims = scaleDimsFromWidth(93, 106, 35);
// const dims = { width: "100%", height: "100%" };
HeaderBarMenu(navigation);
return (
<View style={styles.container}>
<ScrollView>

20
src/package-lock.json

@ -15881,6 +15881,11 @@
}
}
},
"paths-js": {
"version": "0.4.11",
"resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz",
"integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA=="
},
"pause": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/pause/-/pause-0.1.0.tgz",
@ -16068,6 +16073,11 @@
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
},
"point-in-polygon": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
"integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -16587,6 +16597,16 @@
}
}
},
"react-native-chart-kit": {
"version": "6.11.0",
"resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.11.0.tgz",
"integrity": "sha512-mRSfW+mcyVSi0UZKFucru5h5TPB6UcWrMi/DphICRpPJWlvIVAv/6VYGFA57NFDLoRVufFjbsRRrms+TOq61jw==",
"requires": {
"lodash": "^4.17.13",
"paths-js": "^0.4.10",
"point-in-polygon": "^1.0.1"
}
},
"react-native-flash-message": {
"version": "0.1.18",
"resolved": "https://registry.npmjs.org/react-native-flash-message/-/react-native-flash-message-0.1.18.tgz",

2
src/package.json

@ -36,6 +36,7 @@
"react-dom": "16.13.1",
"react-google-places-autocomplete": "^3.2.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-chart-kit": "^6.11.0",
"react-native-flash-message": "^0.1.18",
"react-native-gesture-handler": "~1.7.0",
"react-native-google-places-autocomplete": "^2.1.3",
@ -52,6 +53,7 @@
"react-native-walkthrough-tooltip": "^1.1.11",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.3",
"react-navigation-header-buttons": "^7.0.1",
"react-navigation-tabs": "^2.10.1",
"searchable-flatlist": "0.0.4",
"yup": "^0.28.5"

Loading…
Cancel
Save