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/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/config/colors.js b/src/app/config/colors.js index 53a868f..22fcddb 100644 --- a/src/app/config/colors.js +++ b/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", + }; 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; diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js index fbaef73..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 ( @@ -138,11 +137,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 +183,7 @@ function currentLocationAndDate(forecast, day) { > @@ -179,7 +192,7 @@ function currentLocationAndDate(forecast, day) { {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/PluviometerDiaryScreen.js b/src/app/screens/PluviometerDiaryScreen.js new file mode 100644 index 0000000..0c9585d --- /dev/null +++ b/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 ( + + + + + + {/* 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/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:*/} 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..b6e378b 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", @@ -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"