Merge pull request #174 from SCCapstone/99-food-diary-calories-remaining

99 food diary calories remaining

App.js

@@ -9,6 +9,8 @@ import Login from "./Screens/Login";
 import Signup from "./Screens/Signup";
 import HomeTabScreen from "./components/HomeStackScreen";
 import Loading from "./Screens/Loading";
+import Overview from './Screens/MacroNutrients'
+
 //fix for "can't find variable: atob"
 import {decode, encode} from 'base-64'
 if (!global.btoa) { global.btoa = encode }
@@ -30,6 +32,7 @@ export default function App() {
             <Stack.Screen name = "Signup" component = {Signup} options = {options} />
             <Stack.Screen name = "Auth" component = {Auth} options = {options} />
             <Stack.Screen name = "Home" component = {HomeTabScreen} options = {options} />
+            <Stack.Screen name="NutritionalOverview" component={Overview} options={{ title: "" }}/>
           </Stack.Navigator>
         </NavigationContainer>
       </DiaryContext.Provider>

Classes/Diary.js

@@ -4,11 +4,11 @@ export default class Diary {
     diary;
     uuid;
     selectedDate;
+    calorieGoal;
     constructor(uuid){
         this.selectedDate = new Date()
         this.diary = [];
         this.uuid = uuid;
-        console.log("new diary")
     }
 
     getEntry(date){

Classes/DiaryEntry.js

@@ -1,3 +1,4 @@
+import Food from './Food'
 export default class DiaryEntry {
     date;
     breakfast;
@@ -11,7 +12,6 @@ export default class DiaryEntry {
         this.lunch = [];
         this.dinner = [];
         this.snacks = [];
-        console.log("new entry" +" "  + date)
     }
 
     getBreakfast(){
@@ -50,4 +50,68 @@ export default class DiaryEntry {
     getDate(){
         return this.date;
     }
+
+    getCalorieTotal(){
+        let total = 0;
+        for(const element of this.breakfast){
+            total += element.getCalories();
+        }
+
+        for(const element of this.lunch){
+            total += element.getCalories();
+        }
+
+        for(const element of this.dinner){
+            total += element.getCalories();
+        }
+
+        for(const element of this.snacks){
+            total += element.getCalories();
+        }
+        return total;
+    }
+
+    getNutrientTotal(){
+        let totalCarb = 0;
+        let totalProtein = 0;
+        let totalFat = 0;
+        let totalSugar = 0;
+        let totalSodium = 0;
+        let totalFibre = 0;
+
+        for(const element of this.breakfast){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.lunch){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.dinner){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.snacks){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+
+        return new Food("","",this.getCalorieTotal(),totalCarb,totalProtein,totalFat,totalSugar,totalSodium,totalFibre,1,100)
+    }
 }

Classes/Food.js

@@ -28,7 +28,6 @@ export default class Food {
         this.servings = servings;
         this.servingSize = servingSize;
         this.servingSizeUnit = servingSizeUnit;
-        console.log(this);
     }
 
     getName(){

Screens/DiaryScreen.js

@@ -34,6 +34,7 @@ const DiaryScreen = ({navigation}) => {
 
     }
 
+
     return(
      <ScrollView style={styles.default}>
         <View style={styles.dateContainter}>
@@ -45,6 +46,13 @@ const DiaryScreen = ({navigation}) => {
                 <Text style={styles.dateText}>{'   >'}</Text>
             </TouchableOpacity>
         </View>
+        <View style={{paddingBottom:10, flex:1, flexDirection:'row', justifyContent:'center'}}>
+            <Text style={styles.dateText}>{diary.calorieGoal - (entry.getCalorieTotal())} Calories Remaining</Text>
+            <TouchableOpacity onPress={() => navigation.navigate("NutritionalOverview", {food: entry.getNutrientTotal()}) }>
+                <Text style={{fontSize:25, color:COLORS.cream, paddingLeft:5}}>...</Text>
+            </TouchableOpacity>
+        </View>
+
         <Text style={styles.mealLabel}>Breakfast</Text>
         <View style={{height:1, backgroundColor:'black'}}></View>
         <Pressable style={styles.button} title='breakfast' onPress={() => navigation.navigate("FoodSearch", {meal: entry.getBreakfast()}) }>
@@ -146,7 +154,8 @@ const styles = StyleSheet.create({
         flexDirection:'row'
     },
     dateText:{
-        fontSize:20
+        fontSize:20,
+        alignSelf:'center'
     },
     meal:{
         backgroundColor: "#fe7b5f", 

Screens/EntryDetails.js

@@ -2,6 +2,8 @@ import React,{useState} from 'react';
 import { View, Text, StyleSheet,Button, TouchableOpacity, ScrollView} from 'react-native';
 import { TextInput } from 'react-native-paper';
 import { StackActions, useNavigation} from '@react-navigation/native';
+import { COLORS } from '../constants/colors.js'
+
 
 
 
@@ -36,10 +38,10 @@ const FoodDetails = ({route}) => {
     }
 
     return(
-     <ScrollView style={{ backgroundColor: "#fe7b5f"}}>
-        <Text style={{ backgroundColor: "#fe7b5f", textAlign:"center", fontWeight:'bold', fontSize:20}}>{food.getName()}</Text>
-        <View style={{height:1, backgroundColor:'black'}}></View>
-        <View style={{backgroundColor: "#fe7b5f",height:'100%',width:'100%'}}>
+      <ScrollView style={{ backgroundColor: COLORS.green}}>
+      <Text style={{ backgroundColor: COLORS.green, textAlign:"center", fontWeight:'bold', fontSize:20}}>{food.description}</Text>
+      <View style={{height:1, backgroundColor:'black'}}></View>
+      <View style={{backgroundColor: COLORS.green,height:'100%',width:'100%'}}>
         <View style={styles.flexrow}>
             <Text style={styles.textLeft}>Number of Servings</Text>
             <TextInput  style={styles.textInputRight}  maxLength={2} placeholder={String(servings)} keyboardType='numeric' onChangeText={text => UpdateServings(text)}></TextInput>
@@ -96,43 +98,44 @@ const FoodDetails = ({route}) => {
 }
 
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      marginTop: 8,
-      backgroundColor: "#fe7b5f"
-
-    },
-
-  textRight:{
-     marginRight: '5%',
-     fontSize: 20
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: COLORS.green
+
   },
-  textInputRight:{
-    marginRight: '5%',
- },
 
-  textLeft:{
-      flex:1,
-      paddingLeft: "5%",
-      fontWeight:"bold",
-      fontSize: 20
-  },
+textRight:{
+   marginRight: '5%',
+   fontSize: 20
+},
+textInputRight: {
+  backgroundColor: COLORS.cream,
+  marginRight: '5%',
+},
 
-  flexrow:{
-
-      flexDirection: 'row',
-      paddingTop:10,
-      paddingBottom: 10,
-      justifyContent: 'space-between'
-  },
-  tab:{
-    backgroundColor: "#58C5CC",
-    borderRadius: 100,
-    marginTop:30,
-    height: 30,
-    width: '40%',
-
-
+textLeft:{
+    flex:1,
+    paddingLeft: "5%",
+    fontWeight:"bold",
+    fontSize: 20
+},
+
+flexrow:{
+
+    flexDirection: 'row',
+    paddingTop:10,
+    paddingBottom: 10
+},
+tab:{
+  backgroundColor: COLORS.blue,
+  borderRadius: 100,
+  marginTop:30,
+  height: 30,
+  width: '50%',
+  alignSelf:'center'
+
+
 }
 
   });

Screens/Home.js

@@ -17,6 +17,9 @@ export default function Home({ navigation }) {
 
   const [name, setName] = React.useState("");
   const [type, setType] = React.useState("Email");
+  const [calorieGoal, setCalorieGoal] = React.useState("2000");
+  const [caloriesConsumed, setCaloriesConsumed] = React.useState("0");
+  const [goal, setGoal] = React.useState("");
   const {diary, setDiary} = useContext(DiaryContext)
   useFocusEffect(React.useCallback(() => {
     getDb();
@@ -28,18 +31,23 @@ export default function Home({ navigation }) {
     let user = await getDoc(doc(db, "users", uid));
     console.log("User: " + user)
     let newDiary = await getDiary()
-    console.log(newDiary);
-    setDiary(newDiary);
+
     setType(user.data().signinType || "Email");
     if (user.data().signinType == "Email") {
       setName(`${user.data()?.firstName} ${user.data()?.lastName}`);
+      setCalorieGoal(`${user.data()?.calorieGoal}`);
+      setGoal(`${user.data()?.goal}`);
+      newDiary.calorieGoal = `${user.data()?.calorieGoal}`
       //TODO: remove log
       console.log("set user name in if")
     } else {
       setName(user.data().name);
       //TODO: remove log
       console.log("set user name in else")
     }
+    setDiary(newDiary);
+       //TODO: remove log
+    setCaloriesConsumed(newDiary.getEntry(new Date().toDateString()).getCalorieTotal())
   };
 
   const log = async () => {
@@ -63,6 +71,7 @@ export default function Home({ navigation }) {
     <View style={styles.container}>
         <Text style={styles.Home}>Home</Text>
         <Text style={styles.welcomingText}>Welcome {name}!</Text>
+        <Text style={styles.Home}>{calorieGoal - caloriesConsumed} calories remaining</Text>
         <View style={styles.space} /> 
         <Pressable style={styles.button} onPress={log}>
           <Text style={styles.buttonText}>Logout</Text>

Screens/MacroNutrients.js

@@ -0,0 +1,96 @@
+
+import { View, Text, StyleSheet,ScrollView} from 'react-native';
+import { COLORS } from '../constants/colors.js'
+
+
+
+const MacroNutrients = ({route}) => {
+    const {food} = route.params
+
+
+
+
+
+    return(
+     <ScrollView style={{ backgroundColor: COLORS.green}}>
+        <Text style={{ backgroundColor: COLORS.green, textAlign:"center", fontWeight:'bold', fontSize:20}}>Nutrient Overview</Text>
+        <View style={{height:1, backgroundColor:'black'}}></View>
+        <View style={{backgroundColor: COLORS.green,height:'100%',width:'100%'}}>
+        <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Calories</Text>
+            <Text style={styles.textRight}>{food.getCalories()}</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Protein</Text>
+            <Text style={styles.textRight}>{food.getProtein()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Fat</Text>
+            <Text style={styles.textRight}>{food.getFat()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Carbs</Text>
+            <Text style={styles.textRight}>{food.getCarbs()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Sugar</Text>
+            <Text style={styles.textRight}>{food.getSugar()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Sodium</Text>
+            <Text style={styles.textRight}>{food.getSodium()}MG</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Fiber</Text>
+            <Text style={styles.textRight}>{food.getFibre()}G</Text>
+          </View>
+          </View>
+     </ScrollView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      marginTop: 8,
+      backgroundColor: COLORS.green
+
+    },
+
+  textRight:{
+     marginRight: '5%',
+     fontSize: 20
+  },
+  textInputRight: {
+    backgroundColor: COLORS.cream,
+    marginRight: '5%',
+ },
+
+  textLeft:{
+      flex:1,
+      paddingLeft: "5%",
+      fontWeight:"bold",
+      fontSize: 20
+  },
+
+  flexrow:{
+
+      flexDirection: 'row',
+      paddingTop:10,
+      paddingBottom: 10
+  },
+  tab:{
+    backgroundColor: COLORS.blue,
+    borderRadius: 100,
+    marginTop:30,
+    height: 30,
+    width: '50%',
+    alignSelf:'center'
+
+
+}
+
+  });
+
+export default MacroNutrients
+