Merge branch 'main' into feature/72/recommendations-page

utmgdsc · Dec 5, 2023 · b4af499 · b4af499
2 parents 1b86b3f + e419c2e
commit b4af499
Show file tree

Hide file tree

Showing 11 changed files with 516 additions and 95 deletions.
diff --git a/frontend/assets/colorConstants.tsx b/frontend/assets/colorConstants.tsx
@@ -1,18 +1,20 @@
 const Colors = {
-  LIGHTFGREEN: '#E0EEC6',
-  DARKGREEN: '#243E36',
+  LIGHTFGREEN: '#d8edc2',
+  DARKGREEN: '#012b26',
+  DARKTRANS: '#07332f',
   DARKGREEN2: '#224A3E',
   DARKGREEN3: '#2E5C4E',
-  WHITE: '#fff',
-  BLACK: '000',
+  WHITE: '#ffffff',
+  BLACK: '#000000',
   DARKLIMEGREEN: '#4B8552',
-  GREY: '#ccc',
+  GREY: '#cccccc',
   FILLGREEN: '#7CA982',
   ERROR: 'red',
   TRANSGREEN: '#366959',
   BLACKTRANS: '#000000aa',
   BLUE: 'blue',
   GREYGREEN: '#B4C792',
+  TEAL: '#6bcfca'
 };
 
 export default Colors;
diff --git a/frontend/package.json b/frontend/package.json
@@ -38,8 +38,8 @@
     "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.13.3",
-    "react-native-paper": "^5.11.1",
-    "react-native-reanimated": "^3.5.4",
+    "react-native-paper": "^5.11.3",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",

diff --git a/frontend/src/components/appNavigation.tsx b/frontend/src/components/appNavigation.tsx
@@ -23,7 +23,7 @@ import FoodEntryEdit from '../screens/Food/foodEntryEdit';
 import SettingsScreen from '../screens/settings';
 import YourForms from '../screens/yourForms';
 import CommunityHub from '../screens/communityHub';
-
+import FootprintDecomp from '../screens/footpringDecomp';
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
@@ -34,11 +34,19 @@ const AppNavigation = (): JSX.Element => {
         <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
         <Stack.Screen name="LogIn" component={LogInScreen} options={{ headerShown: false }} />
         <Stack.Screen name="SignUp" component={SignUpScreen} options={{ headerShown: false }} />
-        <Stack.Screen name="Settings" component={SettingsScreen} />
         <Stack.Screen name="MainApp" component={MainAppTabs} options={{ headerShown: false }} />
-
-        <Stack.Screen name="Forum" component={Forum} options={{ headerShown: false }} />
-
+        <Stack.Screen name="Forum" component={Forum}  />
+
+        <Stack.Screen name='FootprintDecomp'
+          component={FootprintDecomp}
+          options={{
+            title: 'Your Footprint Decomposition',
+            headerStyle: {
+              backgroundColor: Colors.DARKGREEN,
+            },
+            headerTintColor: Colors.WHITE,
+          }}
+        />
         <Stack.Screen
           name="TransportationForum"
           component={TransportationForum}

diff --git a/frontend/src/components/expProgressBar.tsx b/frontend/src/components/expProgressBar.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '../../assets/colorConstants';
+import { getUserLevel } from '../models/User';
+import { type ExpProgressBarProps } from './types';
+
+const ExpProgressBar: React.FC<ExpProgressBarProps> = ({ thisUser }) => {
+    const lvl = getUserLevel(thisUser); 
+    // testing--const lvl = 7;
+    const lvlThresh = [250, 500, 1000, 2000, 4000, 8000, 16000, 32000, 64000];
+    const maxExp = lvlThresh[lvl - 1];
+
+    const curr = thisUser.score;
+    // testing--const curr = 14039;
+
+  const progress = (curr / maxExp) * 100;
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.progressBar}>
+                <View style={[styles.currProgression, { width: `${progress}%` }]} />
+            </View>
+            <View style={styles.textBox}>
+                <View style={styles.levelContainer}> 
+                    <Text style={styles.texts}> Level: {lvl}</Text>
+                </View>
+                <View style={styles.progContainer}> 
+                    <Text style={styles.texts}> {`${curr}/${maxExp}`}</Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: 250,
+        marginVertical: 4,
+    },
+    progressBar: {
+        flexDirection: 'row',
+        height: 5,
+        backgroundColor: Colors.WHITE,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    currProgression:{
+        backgroundColor: Colors.TEAL, 
+        height: '100%', 
+
+    },
+    levelContainer:{
+        flex: 1,
+        justifyContent: 'flex-start',
+        paddingLeft: 5,
+    }, 
+    texts:{
+        marginTop: 5,
+        color: Colors.WHITE, 
+        fontSize: 12,
+    },
+    progContainer:{
+        justifyContent: 'flex-end',
+    },
+    textBox:{
+        flexDirection: 'row'
+    }
+});
+
+export default ExpProgressBar;
diff --git a/frontend/src/components/sampleData/sampleChllgInput.tsx b/frontend/src/components/sampleData/sampleChllgInput.tsx
@@ -0,0 +1,21 @@
+import { type challenge } from "../types";
+
+const sampleChallenges: challenge[] = [
+    {
+      id: 1,
+      title: 'Meatless Mondays',
+      description: 'Try going vegitarian (or vegan for a bigger challenge) for an entire Monday',
+    },
+    {
+      id: 2,
+      title: "One man's treasure another man's innovation",
+      description: 'Visit a thrift shop and turn 3 items into one sculpture',
+    },
+    {
+      id: 3,
+      title: 'Good re-Soup',
+      description: 'Reuse and repurpose your leftovers by turning it into stock!',
+    },
+  ];
+
+  export default sampleChallenges;
diff --git a/frontend/src/components/types.tsx b/frontend/src/components/types.tsx
@@ -31,3 +31,20 @@ export interface profileWidgetBoxProps {
   photoURL: string;
   user: User;
 }
+
+export interface carbonWidgetProps {
+  carbonUser: User;
+}
+
+export interface challenge {
+  id: number;
+  title: string;
+  description: string;
+}
+export interface challengesProps {
+  challenges: challenge[];
+}
+
+export interface ExpProgressBarProps {
+  thisUser: User,
+}
diff --git a/frontend/src/screens/dashboard.tsx b/frontend/src/screens/dashboard.tsx
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { ScrollView, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { useFonts } from 'expo-font';
 import Colors from '../../assets/colorConstants';
+
 import ProfileWidgetBox from '../widgets/profileWidget';
-import WidgetBox from '../widgets/widgetBox';
+import CarbonWidgetBox from '../widgets/carbonWidgetBox';
+import ChallengesWidget from '../widgets/challengesWidgetBox';
+
 import type { RootStackParamList } from '../components/types';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
+
 import { type User } from '../models/User';
 import { UsersAPI } from '../APIs/UsersAPI';
 import { type TransportationEntry } from '../models/Transportation';
@@ -15,14 +19,16 @@ import { type FoodEntry } from '../models/Food';
 import { type EnergyEntry } from '../models/Energy';
 import { FoodAPI } from '../APIs/FoodAPI';
 import { EnergyAPI } from '../APIs/EnergyAPI';
+import sampleChallenges from '../components/sampleData/sampleChllgInput';
 export type StackNavigation = StackNavigationProp<RootStackParamList>;
 
 export default function DashBoardScreen(): JSX.Element {
   const [user, setUser] = useState<User | undefined>(undefined);
   const [transportationEntry, setTransportationEntry] = useState<TransportationEntry>();
   const [foodEntry, setFoodEntry] = useState<FoodEntry>();
   const [energyEntry, setEnergyEntry] = useState<EnergyEntry>();
-  const [photoURL] = useState<string>("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Default_pfp.svg/2048px-Default_pfp.svg.png");
+
+  const [photoURL] = useState<string>("https://cdn.vox-cdn.com/thumbor/osQ-EchVP5I1xQlgtouC48YqzNc=/0x0:1750x941/1200x800/filters:focal(735x331:1015x611)/cdn.vox-cdn.com/uploads/chorus_image/image/53111667/Mewtwo_M01.0.0.png");
 
   const navigation = useNavigation<StackNavigation>();
 
@@ -59,84 +65,42 @@ export default function DashBoardScreen(): JSX.Element {
   }
 
   return (
-    <View style={styles.container}>
-      <View style={styles.headerContainer}>
-        <View style={styles.headerBox}>
-          <Text style={styles.header}>Dashboard</Text>
-        </View>
-      </View>
-
+    <ScrollView style={styles.container}>
       <View style={styles.profileWidgetContainer}>
         <View style={styles.widgetBoarder}>
             <ProfileWidgetBox
             photoURL={photoURL}
             user={user}
             />
           </View>
+          <View style={styles.widgetBoarder}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('FootprintDecomp');
+              }}
+            >
+              <CarbonWidgetBox carbonUser={user} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.profileWidgetContainer}>
+              <ChallengesWidget challenges={sampleChallenges}/>
+          </View>
       </View>
+
+
 
-      <View style={styles.widgetContainer}>
-
-        <View style={styles.widgetBoarder}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('TransportationHistory');
-            }}
-          >
-            <WidgetBox title="Transportatin" content={transportationEntry.carbon_emissions.toString()} />
-          </TouchableOpacity>
-        </View>
-
-        <View style={styles.widgetBoarder}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('FoodHistory');
-            }}
-          >
-            <WidgetBox title="Food" content={foodEntry.carbon_emissions.toString()} />
-          </TouchableOpacity>
-        </View>
-      </View>
-      <View style={styles.widgetContainer}>
-
-        <View style={styles.widgetBoarder}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('EnergyHistory');
-            }}
-          >
-            <WidgetBox title="Energy" content={energyEntry.carbon_emissions.toString()} />
-          </TouchableOpacity>
-        </View>
-
-      </View>
-    </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center',
-    backgroundColor: Colors.WHITE,
-    flex: 1,
-    justifyContent: 'center',
-  },
-  header: {
-    fontSize: 24,
-  },
-  headerBox: {
-    backgroundColor: Colors.WHITE,
-  },
-  headerContainer: {
-    alignItems: 'center',
+    backgroundColor: Colors.LIGHTFGREEN,
+    flexGrow: 1,
   },
   profileWidgetContainer: {
-    padding: 10,
-    flexDirection: 'column',
-  },
-  widgetContainer: {
-    padding: 10,
-    flexDirection: 'row',
+    alignItems: 'center', 
+    marginHorizontal: 10
   },
   widgetBoarder: {
     padding: 10,