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

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;

src/app/components/forms/FormDatePicker.js

@@ -207,7 +207,6 @@ const styles = StyleSheet.create({
   },
   dateInput: {
     flex: 0.9,
-    backgroundColor: colors.white,
     height: "100%",
     flexDirection: "column",
     justifyContent: "center",

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",
+
 };

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

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}
+          />
         ),
       }}
     />

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;

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;

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

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

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 />

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;

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,

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>

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",

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"