diff --git a/db_app/src/components/Login.css b/db_app/src/components/Login.css
index 6497ac9..621099b 100644
--- a/db_app/src/components/Login.css
+++ b/db_app/src/components/Login.css
@@ -30,4 +30,12 @@ position:fixed;
.bar{
margin-bottom: 15px;
+}
+
+.background_green{
+ background-color: green;
+}
+
+.background_red{
+ background-color: red;
}
\ No newline at end of file
diff --git a/db_app/src/components/ThisWeek.js b/db_app/src/components/ThisWeek.js
index 045e909..d99f7ff 100644
--- a/db_app/src/components/ThisWeek.js
+++ b/db_app/src/components/ThisWeek.js
@@ -73,11 +73,11 @@ const Log = () => {
}
//get the start of each week and reformat to Oracle date type
function weekStart(){
- var date_str = new Date();
+ var date_st = new Date();
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
- var weekday = days[date_str.getDay()]
+ var weekday = days[date_st.getDay()]
- if (weekday != 'Sunday'){
+ if (weekday !== 'Sunday'){
return;
}
@@ -137,9 +137,65 @@ const net_id = ReactSession.get("net_id");
}
- const [cals, setCals] = useState([{}]);
- const [fat, setFat] = useState([{}]);
- const [trans, setTrans] = useState([{}]);
+ //Set color variables for chips
+ const [cals, setCals] = useState(false);
+ const [fat, setFat] = useState(false);
+ const [trans, setTrans] = useState(false);
+ const [carbs, setCarbs] = useState(false);
+ const [sugar, setSugar] = useState(false);
+ const [fiber, setFiber] = useState(false);
+ const [cholesterol, setChol] = useState(false);
+ const [sodium, setSodium] = useState(false);
+ const [sat, setSat] = useState(false);
+ const [protein, setProtein] = useState(false);
+ const [potassium, setPotassium] = useState(false);
+
+ const setColors = () => {
+
+
+
+ //set green
+ if(sum.calories < (1.1*goals.calories) && sum.calories >= (0.9*goals.calories)){
+ setCals(true)
+ }
+ if(sum.fat_g < (1.1*goals.fat_g) && sum.fat_g >= (0.9*goals.fat_g)){
+ setFat(true)
+ }
+ console.log(fat);
+ if(sum.trans_fat_g < (1.1*goals.trans_fat_g) && sum.trans_fat_g >= (0.9*goals.trans_fat_g)){
+ setTrans(true)
+ }
+ if(sum.carbs_g < (1.1*goals.carbs_g) && sum.carbs_g >= (0.9*goals.carbs_g)){
+ setCarbs(true)
+ }
+ if(sum.sugar_g < (1.1*goals.sugar_g) && sum.sugar_g >= (0.9*goals.sugar_g)){
+ setSugar(true)
+ }
+ if(sum.protein_g < (1.1*goals.protein_g) && sum.protein_g >= (0.9*goals.protein_g)){
+ setProtein(true)
+ }
+ if(sum.fiber_g < (1.1*goals.fiber_g) && sum.fiber_g >= (0.9*goals.fiber_g)){
+ setFiber(true)
+ }
+ if(sum.cholesterol_mg < (1.1*goals.cholesterol_mg) && sum.cholesterol_mg >= (0.9*goals.cholesterol_mg)){
+ setChol(true)
+ }
+ if(sum.sodium_mg < (1.1*goals.sodium_mg) && sum.sodium_mg >= (0.9*goals.sodium_mg)){
+ setSodium(true)
+ }
+ if(sum.sat_fat_g < (1.1*goals.sat_fat_g) && sum.sat_fat_g >= (0.9*goals.sat_fat_g)){
+ setSat(true)
+ }
+ if(sum.potassium_mg < (1.1*goals.potassium_mg) && sum.potassium_mg >= (0.9*goals.potassium_mg)){
+ setPotassium(true)
+ }
+
+
+ }
+
+
+
+
//Run getSum, getHistory, and getPlan on page load
useEffect(() => {
@@ -147,9 +203,11 @@ const net_id = ReactSession.get("net_id");
console.log('History in')
getSum()
console.log('Sum in')
- getGoal()
+ //getGoal()
console.log('Goal in')
- }, [])
+ setColors()
+ console.log('Colors set')
+ }, []);
return (
@@ -316,29 +374,85 @@ const net_id = ReactSession.get("net_id");
At a glance
+ Each category will be red if you are more than 30% above or below your weekly goal
-
-
+
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+