From a884c459953565342af7d0b2246b4692816cf1fd Mon Sep 17 00:00:00 2001 From: Ava DeCroix Date: Mon, 1 May 2023 15:16:55 -0400 Subject: [PATCH] chip coloring --- db_app/src/components/LogMeals.js | 21 ++++- db_app/src/components/Login.css | 8 ++ db_app/src/components/ThisWeek.js | 152 ++++++++++++++++++++++++++---- 3 files changed, 161 insertions(+), 20 deletions(-) diff --git a/db_app/src/components/LogMeals.js b/db_app/src/components/LogMeals.js index 4728460..9d4497b 100644 --- a/db_app/src/components/LogMeals.js +++ b/db_app/src/components/LogMeals.js @@ -88,7 +88,14 @@ const [keyword, setKeyword] = useState({ }) const [searchItems, setSearchItems] = useState([]); -const [sendItems, setSendItems] = useState([{}]); +const [sendItems, setSendItems] = useState([]) + +const sendToPlan = () => { + console.log(sendItems); + Axios.post('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: sendItems,}).then((response) => { + console.log(response); + }); +} const{search_term} = keyword @@ -258,6 +265,18 @@ color: 'main', variant="contained" size="medium"> Search + 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

            - - + +     - +       - +     - +     - +       - +       - +       - +           - +           - +