From e885eeb9f838f7ea3bb0395b9b92054ebcf97b70 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Wed, 31 Mar 2021 17:48:41 -0300 Subject: [PATCH 1/6] starting pluviometer diary screen --- src/app/components/forms/FormDatePicker.js | 3 +- src/app/screens/PluviometerDiaryScreen.js | 151 +++++++++++++++++++++ src/package-lock.json | 20 +++ src/package.json | 1 + 4 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 src/app/screens/PluviometerDiaryScreen.js diff --git a/src/app/components/forms/FormDatePicker.js b/src/app/components/forms/FormDatePicker.js index c1c2d51..c511995 100644 --- a/src/app/components/forms/FormDatePicker.js +++ b/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", diff --git a/src/app/screens/PluviometerDiaryScreen.js b/src/app/screens/PluviometerDiaryScreen.js new file mode 100644 index 0000000..ebc4107 --- /dev/null +++ b/src/app/screens/PluviometerDiaryScreen.js @@ -0,0 +1,151 @@ +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 { FontAwesome5 } from '@expo/vector-icons'; +import { MaterialIcons } from "@expo/vector-icons"; + +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" + return ( + + + + Gráfico do pluviometro + + + + + {/* Endereço */} + < View style={{ flex: 1 }}> + + + + + + + {local} + + + + + + {/* Escola */} + + + + + + + + { school } + + + + + + {/* Usuário */} + + + + + + + + { profile } + + + + + + + ); +} + +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; diff --git a/src/package-lock.json b/src/package-lock.json index c3d9abf..c7bee0d 100644 --- a/src/package-lock.json +++ b/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", diff --git a/src/package.json b/src/package.json index cfd2823..d9b492a 100644 --- a/src/package.json +++ b/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", From 0530979d7cadc5ccb60b0424b02495e65aee4c00 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Wed, 31 Mar 2021 18:01:26 -0300 Subject: [PATCH 2/6] Fixing font styles in weather forecast screens --- src/app/config/colors.js | 4 ++-- src/app/screens/ForecastScreen.js | 24 +++++++++++++++++++----- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/app/config/colors.js b/src/app/config/colors.js index 53a868f..76945a1 100644 --- a/src/app/config/colors.js +++ b/src/app/config/colors.js @@ -8,7 +8,7 @@ export default { dark: "#0c0c0c", danger: "#ff5252", lightGray: "#C4C4C4", - gray: "gray", + gray: "#999999", lightestGray: "#F0F0F0", - lightBlue:"#1976D2" + lightBlue: "#1976D2", }; diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js index fbaef73..9464098 100644 --- a/src/app/screens/ForecastScreen.js +++ b/src/app/screens/ForecastScreen.js @@ -138,11 +138,25 @@ function weekDayList(day_forecast) { }} > - {day_forecast.week_day} - ({day_forecast.date}) + + {day_forecast.week_day} + + + ({day_forecast.date}) + - {day_forecast.rain_fall_mm} mm + + {day_forecast.rain_fall_mm} mm + ); @@ -170,7 +184,7 @@ function currentLocationAndDate(forecast, day) { > @@ -179,7 +193,7 @@ function currentLocationAndDate(forecast, day) { Date: Wed, 31 Mar 2021 18:57:14 -0300 Subject: [PATCH 3/6] Adding chart to pluviometer diary screen --- src/app/config/colors.js | 2 + src/app/screens/PluviometerDiaryScreen.js | 99 ++++++++++++++++------- 2 files changed, 72 insertions(+), 29 deletions(-) diff --git a/src/app/config/colors.js b/src/app/config/colors.js index 76945a1..22fcddb 100644 --- a/src/app/config/colors.js +++ b/src/app/config/colors.js @@ -11,4 +11,6 @@ export default { gray: "#999999", lightestGray: "#F0F0F0", lightBlue: "#1976D2", + gold: "#ffd700", + }; diff --git a/src/app/screens/PluviometerDiaryScreen.js b/src/app/screens/PluviometerDiaryScreen.js index ebc4107..0c9585d 100644 --- a/src/app/screens/PluviometerDiaryScreen.js +++ b/src/app/screens/PluviometerDiaryScreen.js @@ -4,27 +4,68 @@ 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 school = "Escola registrada do pluviômetro"; const profile = "Tipo de perfil do usuário"; - const local = "Endereço registrado do pluviômetro" + 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 ( - - Gráfico do pluviometro - - + {/* Endereço */} < View style={{ flex: 1 }}> - - - - - - - {local} - - - + + + + + + + {local} + + + {/* Escola */} @@ -68,8 +109,8 @@ function PluviometerDiaryScreen(props) { - { school } - + {school} + @@ -90,8 +131,8 @@ function PluviometerDiaryScreen(props) { - { profile } - + {profile} + From 5b929e51b3a400f13d5dcf1a26a37c33d8c380ec Mon Sep 17 00:00:00 2001 From: analuizaff Date: Thu, 1 Apr 2021 12:44:11 -0300 Subject: [PATCH 4/6] adjusting the pluviometer regiter screen --- src/app/screens/PluviometerRegisterScreen.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/screens/PluviometerRegisterScreen.js b/src/app/screens/PluviometerRegisterScreen.js index 54a22bb..b1dac0b 100644 --- a/src/app/screens/PluviometerRegisterScreen.js +++ b/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) { Cadastro do Pluviômetro + {/* Escola: */} Escola: - + - {/*Local do evento:*/} + {/*Local do pluvioômetro:*/} Endereço do pluviômetro: - {/*Data da coleta:*/} + {/*Data de cadastro:*/} Date: Fri, 2 Apr 2021 17:34:27 -0300 Subject: [PATCH 5/6] Adding "Perfil" screen as a header button --- src/app/components/HeaderBarMenu.js | 30 ++++++++++++++++++++++++++++ src/app/screens/ForecastScreen.js | 4 ++-- src/app/screens/MapFeedScreen.js | 4 +++- src/app/screens/MessagesScreen.js | 2 ++ src/app/screens/SharingDataScreen.js | 4 ++-- src/package.json | 1 + 6 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/app/components/HeaderBarMenu.js diff --git a/src/app/components/HeaderBarMenu.js b/src/app/components/HeaderBarMenu.js new file mode 100644 index 0000000..424a22e --- /dev/null +++ b/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) => ( + +); + +function HeaderBarMenu(navigation) { + React.useLayoutEffect(() => { + navigation.setOptions({ + headerRight: () => ( + + navigation.navigate("Perfil")} + /> + + ), + }); + }, [navigation]); +} + +export default HeaderBarMenu; diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js index 9464098..4962931 100644 --- a/src/app/screens/ForecastScreen.js +++ b/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 ( @@ -245,6 +244,7 @@ function renderErrorScreen() { function ForecastScreen(props) { const forecast = getWeatherForecast(); + HeaderBarMenu(props.navigation); return ( {forecast ? renderScreen(forecast) : renderErrorScreen()} ); diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 409c94e..a5cb1a2 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/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 ( diff --git a/src/app/screens/SharingDataScreen.js b/src/app/screens/SharingDataScreen.js index 81eb99a..b08427b 100644 --- a/src/app/screens/SharingDataScreen.js +++ b/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 ( diff --git a/src/package.json b/src/package.json index d9b492a..b6e378b 100644 --- a/src/package.json +++ b/src/package.json @@ -53,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" From 612e30a89eb146fde912a7d07bdc287b15b7a775 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Fri, 2 Apr 2021 18:38:41 -0300 Subject: [PATCH 6/6] Setup for "Dados" screen --- src/app/navigation/AccountNavigator.js | 18 ++++++++++-------- src/app/navigation/AppNavigator.js | 12 ++++++++---- src/app/navigation/DataNavigator.js | 22 ++++++++++++++++++++++ src/app/screens/DataScreen.js | 17 +++++++++++++++++ 4 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 src/app/navigation/DataNavigator.js create mode 100644 src/app/screens/DataScreen.js diff --git a/src/app/navigation/AccountNavigator.js b/src/app/navigation/AccountNavigator.js index 4106412..a57f882 100644 --- a/src/app/navigation/AccountNavigator.js +++ b/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 = () => ( - + ); diff --git a/src/app/navigation/AppNavigator.js b/src/app/navigation/AppNavigator.js index 48b7143..ec28967 100644 --- a/src/app/navigation/AppNavigator.js +++ b/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 = () => ( }} /> ( - + ), }} /> diff --git a/src/app/navigation/DataNavigator.js b/src/app/navigation/DataNavigator.js new file mode 100644 index 0000000..bdf93b7 --- /dev/null +++ b/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 = () => ( + + + +); + +export default DataNavigator; diff --git a/src/app/screens/DataScreen.js b/src/app/screens/DataScreen.js new file mode 100644 index 0000000..3d93c89 --- /dev/null +++ b/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 ( + + + + ); +} + +export default DataScreen;