Merge pull request #6 from ColinMcKechney/AVA

Ava

db_app/src/App.js

@@ -4,6 +4,9 @@ import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
 import Plan from "./components/Plan";
 import MenuExpansion from "./components/MenuExpansion";
+import LogMeals from "./components/LogMeals";
+import ThisWeek from "./components/ThisWeek";
+import Past from "./components/Past"
 import { ReactSession } from 'react-client-session';
 
 import {
@@ -24,6 +27,9 @@ function App() {
         <Route path='/Menus' element={<Menus/>}></Route>
         <Route path='/Plan' element={<Plan/>}></Route>
         <Route path='/MenuExpansion' element={<MenuExpansion/>}></Route>
+        <Route path='/ThisWeek' element={<ThisWeek/>}></Route>
+        <Route path='/LogMeals' element={<LogMeals/>}></Route>
+        <Route path='/Past' element={<Past/>}></Route>
       </Routes>
     </Router>
   );

db_app/src/components/CreateAccount.js

@@ -27,12 +27,14 @@ const theme = createTheme({
 
 function CreateAccount() {
 
+  //Navigate to login
   const navigate = useNavigate();
 
 	const navigateLogin = () => {
 		 navigate('/');
 	}
 
+  //State variable for account data
   const [data,setData] = useState({
     net_id:"",
     password:"",
@@ -40,22 +42,22 @@ function CreateAccount() {
     last_name:"",
   })
   
+  //Variable for account data
   const {net_id, password, first_name, last_name} = data;
   
+  //Change handler for form
   const changeHandler = e => {
     setData({...data,[e.target.name]:[e.target.value]});
   }
   
+  //Submit handler for form
   const submitHandler = e => {
     e.preventDefault();
-    console.log(data);
-    console.log(net_id[0])
-    console.log(password[0])
-    console.log(first_name[0])
-    console.log(last_name[0])
     createAccount();
+    navigateLogin();
   }
  
+  //Sends post request with account credentials to server
   const createAccount = () => {
     Axios.post("http://3.219.93.142:8000/api/signup", {net_id: net_id[0], password: password[0], first_name: first_name[0], last_name: last_name[0]}).then((response) => {
        console.log(response);

db_app/src/components/LogMeals.js

@@ -0,0 +1,482 @@
+import React,{useState} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper,Checkbox} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function MyPlan() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+  navigate('/LogMeals')
+}
+
+const Progress = () => {
+  navigate('/ThisWeek')
+}
+
+
+
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_str = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_str.getDay()]
+
+  if (weekday != 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+const net_id = ReactSession.get("net_id");
+
+
+
+//to find a food item from an on campus location to your weekly journal
+const [keyword, setKeyword] = useState({
+  search_term:""
+})
+
+const [searchItems, setSearchItems] = 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);
+ });
+ Progress();
+}
+
+
+const{search_term} = keyword
+
+const removeItem = (index) => {
+  setSendItems([
+             ...sendItems.slice(0, index),
+             ...sendItems.slice(index + 1)
+  ]);
+
+}
+
+function handleCheck (i) {
+  console.log(i);
+  if (sendItems.indexOf(i) > -1){
+    //get index and delete
+    var index = sendItems.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setSendItems(sendItems => [...sendItems, i]);
+    console.log(`added ${i}`);
+  }
+  
+}
+
+
+const changeSearchHandler = evt => {
+  setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
+}
+
+const submitSearchHandler = evt => {
+  evt.preventDefault();
+  console.log(search_term)
+  console.log(net_id)
+  Axios.post("http://3.219.93.142:8000/api/menu_search",
+    {
+      search_term:search_term[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+      console.log('Data:')
+      console.log(response.data.results);
+      setSearchItems(response.data.results);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    item_name:"",
+    amount: 0,
+    calories: 0,
+    fat_g: 0,
+    sat_fat_g: 0,
+    trans_fat_g: 0,
+    carbs_g: 0,
+    fiber_g: 0,
+    sugar_g: 0,
+    protein_g: 0,
+    sodium_mg: 0,
+    potassium_mg: 0,
+    cholesterol_mg: 0,
+  }
+  );
+
+  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
+
+  const changeOffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitOffCampusHandler = evt => {
+    evt.preventDefault();
+    console.log(offCampusInput)
+    console.log(net_id)
+    Axios.post("http://3.219.93.142:8000/api/week_plan",
+      {
+        net_id: net_id,
+        item_name: item_name[0],
+        amount: Number(amount[0]),
+        calories: Number(calories[0]),
+        fat_g: Number(fat_g[0]),
+        sat_fat_g: Number(sat_fat_g[0]),
+        trans_fat_g: Number(trans_fat_g[0]),
+        carbs_g: Number(carbs_g[0]),
+        fiber_g: Number(fiber_g[0]),
+        sugar_g: Number(sugar_g[0]),
+        protein_g: Number(protein_g[0]),
+        sodium_mg: Number(sodium_mg[0]),
+        potassium_mg: Number(potassium_mg[0]),
+        cholesterol_mg: Number(cholesterol_mg[0])
+      }).then((response) => {
+        console.log(response);
+        console.log(response.status);
+      })
+  };
+  
+  return (
+  <ThemeProvider theme={theme}>  
+  
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+
+
+    <AppBar className='bar' position="static">
+<Toolbar >
+<Button variant="h2" color="main" onClick={Home}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" sx={{
+
+bgcolor: '#053B06', // theme.palette.primary.main
+color: 'main',
+
+}} onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress}>Plan Progress</Button>
+     
+</Toolbar>
+  </AppBar>
+
+   
+    <div>
+      <h1>
+        &nbsp; 
+        Add to Food Journal
+      </h1>
+      <h3> &nbsp; &nbsp;
+        On-Campus
+      </h3>
+      <form onSubmit={submitSearchHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            id="search_term"
+            label="Keyword"
+            size="medium"
+            name="search_term"
+            value={search_term}
+            onChange={changeSearchHandler}
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+          <Button 
+          variant="contained"
+          type="button"
+          size="medium"
+          sx={{
+        color: 'white',
+    ':hover': {
+      bgcolor: '#ffc6c4',
+      color: 'white',
+    },
+    marginLeft: 5
+  }} onClick={sendToPlan}>Add checked to Plan</Button>
+      </form>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 440, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+              <TableCell style={{ maxWidth: 110}}  align="left">Add?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Eatery</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Item Name</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Serving Size</TableCell>
+          
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {searchItems.map((searchitem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={searchitem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                    <TableCell padding="checkbox">
+
+                     
+                    <Checkbox
+                      
+                      color="primary"
+                      onChange={() => handleCheck(searchitem.item_id)}
+                    />
+                    </TableCell>
+        
+              <TableCell> {searchitem.eatery_id}</TableCell>
+              <TableCell> {searchitem.item_name}</TableCell>
+              <TableCell> {searchitem.serving_size}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+    
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form onSubmit={submitOffCampusHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="item_name"
+            label="Food Item"
+            size="small"
+            name="item_name"
+            value={item_name}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="amount"
+            label="Number of Servings"
+            size="small"
+            name="amount"
+            type="number"
+            value={amount}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calories"
+            label="Calories"
+            size="small"
+            name="calories"
+            type="number"
+            value={calories}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat"
+            label="Fat (g)"
+            size="small"
+            name="fat_g"
+            type="number"
+            value={fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sat_fat"
+            label="Saturated Fat (g)"
+            size="small"
+            name="sat_fat_g"
+            type="number"
+            value={sat_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat"
+            label="Trans Fat (g)"
+            size="small"
+            name="trans_fat_g"
+            type="number"
+            value={trans_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs"
+            label="Carbs (g)"
+            size="small"
+            name="carbs_g"
+            type="number"
+            value={carbs_g}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber"
+            label="Fiber (g)"
+            size="small"
+            name="fiber_g"
+            type="number"
+            value={fiber_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar"
+            label="Sugar (g)"
+            size="small"
+            name="sugar_g"
+            type="number"
+            value={sugar_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein"
+            label="Protein (g)"
+            size="small"
+            name="protein_g"
+            type="number"
+            value={protein_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium"
+            label="Sodium (mg)"
+            size="small"
+            name="sodium_mg"
+            type="number"
+            value={sodium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium"
+            label="Potassium (mg)"
+            size="small"
+            name="potassium_mg"
+            type="number"
+            value={potassium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol"
+            label="Cholesterol (mg)"
+            size="small"
+            name="cholesterol_mg"
+            type="number"
+            value={cholesterol_mg}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+      </form>
+    </div>
+
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default MyPlan;

db_app/src/components/Login.css

@@ -31,3 +31,11 @@ position:fixed;
 .bar{
   margin-bottom: 15px;
 }
+
+.background_green{
+  background-color: green;
+}
+
+.background_red{
+  background-color: red;
+}

db_app/src/components/Login.js

@@ -29,6 +29,8 @@ const theme = createTheme({
 
 
 export function Login() {
+
+  //Navigate functions
   const navigate = useNavigate();
 
 	const navigateCreateAccount = () => {
@@ -39,34 +41,33 @@ export function Login() {
     navigate('/Plan');
   }
 
+  //State variable for login data
   const [data,setData] = useState({
     net_id:"",
     password:""
   })
 
+  //Variable for login data
   const {net_id,password} = data;
   
+  //Change handler for login form
   const changeHandler = e => {
     setData({...data,[e.target.name]:[e.target.value]});
   }
   
+  //Submit handler for login form
   const submitHandler = e => {
     e.preventDefault();
     login();
     
   }
 
+  //Set session variable for netid
   const setSession = () => {
   ReactSession.set("net_id", net_id[0]);
   }
 
-
+//Send http request to log user in 
-const getHello = () => {
-  Axios.get("http://3.219.93.142:8000/").then((response) => {
-     console.log(response.data);
-  });
-};
-
   const login = () => {
     Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
       console.log(response);
@@ -84,7 +85,7 @@ const login = () => {
     
     
         <ThemeProvider theme={theme}>
-      <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
+      <div className='bg' style={{backgroundImage: 'url(' + require('./images/back.jpg') + ')'}}>
       <div className='logbox'>
        <Box
         sx={{  

db_app/src/components/MenuExpansion.js

@@ -24,6 +24,15 @@ import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ReactSession } from 'react-client-session';
 import Axios from 'axios';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@mui/material';
 
 
 const theme = createTheme({
@@ -36,13 +45,9 @@ const theme = createTheme({
     },
   });
 
+function Menus() {
 
-
+  //Navigate function
-  const getEatery = () => {
-    return ReactSession.get("eatery");
- }
-
-  function MenuExpansion() {
   const navigate = useNavigate();
 
 	const Home = () => {
@@ -58,19 +63,70 @@ const navigateLogin = () => {
     navigate('/');
   }
 
-const makeEateryUrl = (eatery) => `http://3.219.93.142:8000/eatery/${eatery}`;
+//Format api all url based on eatery clicked
+const makeEateryUrl = (eatery) => `http://3.219.93.142:8000/api/eatery/${eatery}`;
+const getEatery = () => {
+  return ReactSession.get("eatery");
+}
 
+//Http request to get menu items
 const getMenu = () => {
 const eatery_to_query = getEatery();
  Axios.get(makeEateryUrl(eatery_to_query)).then((response) => {
   console.log(response.data);
+  setmenuItems(response.data);
 });
-};
+ 
+}
+//State variables for menu items and for items to add to plan
+const [menuItems, setmenuItems] = useState([{}]);
+const [toAdd, setToAdd] = useState([]);
+
+
+//Remove an item from the to be added
+const removeItem = (index) => {
+  setToAdd([
+             ...toAdd.slice(0, index),
+             ...toAdd.slice(index + 1)
+  ]);
+
+}
+
+//Checkbox handler
+function handleCheck (i) {
+  console.log(i);
+  if (toAdd.indexOf(i) > -1){
+    //get index and delete
+    var index = toAdd.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setToAdd(toAdd => [...toAdd, i]);
+    console.log(`added ${i}`);
+  }
+  
+}
+
+//Http request to send checked items to plan
+const sendToPlan = () => {
+  Axios.post('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: toAdd,}).then((response) => {
+   console.log(response);
+ });
+  
+ }
+ 
+//Run get menu on page load
+useEffect(() => {
+  getMenu()
+  console.log('Menu in')
+}, [])
  
 
   return (
 
-
     <ThemeProvider theme={theme}>
     <AppBar className='bar' position="static">
   <Toolbar variant="dense">
@@ -92,10 +148,68 @@ return(
   </Toolbar>
 </AppBar>
 
-<Button onClick={getMenu}>Test get menu</Button>
+<AppBar className='bar' position="static">
+<Toolbar>
+<h2 sx={{padding:5, margin: 5}}> &nbsp; &nbsp; Menu Items </h2>
+      <Button sx={{ color: 'white', ':hover': { bgcolor: '#ffc6c4', color: 'white', }, marginLeft: 5 }} onClick={sendToPlan}>Add to Plan</Button>
+     
+</Toolbar>
+  </AppBar>
+
+    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 440, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+              <TableCell style={{ maxWidth: 110}}  align="left">Add?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Food</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {menuItems.map((menuItem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={menuItem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                    <TableCell padding="checkbox">
+                      <Checkbox color="primary" onChange={() => handleCheck(menuItem.item_id)}/>
+                    </TableCell>
+                    <TableCell>{menuItem.item_name}</TableCell>     
+              <TableCell> {menuItem.calories}</TableCell>
+              <TableCell> {menuItem.fat}</TableCell>
+              <TableCell> {menuItem.sat_fat}</TableCell>
+              <TableCell> {menuItem.trans_fat}</TableCell>
+              <TableCell> {menuItem.carbs}</TableCell>
+              <TableCell> {menuItem.fiber}</TableCell>
+              <TableCell>{menuItem.sugar} </TableCell>
+              <TableCell> {menuItem.protein}</TableCell>
+              <TableCell>{menuItem.sodium} </TableCell>
+              <TableCell> {menuItem.potassium}</TableCell>
+              <TableCell> {menuItem.cholesterol}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
 
 </ThemeProvider>
-)
   
+  );
 }
-export default MenuExpansion;
+export default Menus;

db_app/src/components/Menus.js

@@ -37,6 +37,7 @@ const theme = createTheme({
   });
 
 function Menus() {
+
   const navigate = useNavigate();
 
 	const Home = () => {
@@ -108,7 +109,7 @@ const menuExpansion = () => {
     <Button variant="h6" color="main" component="div" onClick={Menus}>
       Menus
     </Button>
-    <Button  variant="h6" onClick="Past">
+    <Button  variant="h6" onClick={Past}>
     Past Plans</Button> 
     <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
     ':hover': {
@@ -121,8 +122,18 @@ const menuExpansion = () => {
   </Toolbar>
 </AppBar>
 
+<AppBar className='bar' position="static">
+<Toolbar>
+<h2 sx={{padding:5, margin: 5}}>
+        &nbsp; &nbsp;
+        Campus Eateries
+      </h2>
+     
+</Toolbar>
+  </AppBar>
+
 <Box sx={{  
-          margin: 8,
+          margin: 5,
           display: "flex",
           flexDirection: "row",
           alignItems: "center",

db_app/src/components/Past.js

@@ -0,0 +1,292 @@
+import React,{useState, useEffect} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function Past() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+    navigate('/LogMeals')
+  }
+  
+  const Progress = () => {
+    navigate('/ThisWeek')
+  }
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_str = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_str.getDay()]
+
+  if (weekday != 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+const net_id = ReactSession.get("net_id");
+
+  //Get history of plans 
+  const [pastPlans, setPastPlans] = useState([{}]);
+  const makePastURL = (net_id) => `http://3.219.93.142:8000/api/all_goal/${net_id}`;
+
+  const getPastPlans = () => {
+    const net_id = ReactSession.get("net_id");
+    const url_to_query = makePastURL(net_id);
+     Axios.get(url_to_query).then((response) => {
+      console.log(response.data);
+      setPastPlans(response.data);
+    });
+     
+    }
+      //Get history of actual totals for weekly plan (progress)
+      const [past, setPast] = useState([{}]);
+      const makeURL = (net_id) => `http://3.219.93.142:8000/api/result/${net_id}`;
+    
+      const getPast = () => {
+        const net_id = ReactSession.get("net_id");
+        const url_to_query = makeURL(net_id);
+         Axios.get(url_to_query).then((response) => {
+          console.log(response.data);
+          setPast(response.data);
+        });
+         
+        }
+
+    //run getPast and pastPlans on page load
+        useEffect(() => {
+            getPast()
+            console.log('Past actual in')
+            getPastPlans()
+            console.log('Past plans in')
+          }, [])
+  
+  return (
+  <ThemeProvider theme={theme}>  
+ 
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+    
+
+    
+    <div>
+      <h1>
+      &nbsp;
+        Your History
+      </h1>
+
+      
+
+      <h3>
+        &nbsp; &nbsp;
+        Past plans by week:
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+        
+              <TableCell style={{ maxWidth: 110}}  align="left">Week</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {pastPlans.map((pastplan, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={pastplan.week}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+                    <TableCell>
+                      {pastplan.week}
+                    </TableCell>
+        
+              <TableCell> {pastplan.calories}</TableCell>
+              <TableCell> {pastplan.fat_g}</TableCell>
+              <TableCell> {pastplan.sat_fat_g}</TableCell>
+              <TableCell> {pastplan.trans_fat_g}</TableCell>
+              <TableCell> {pastplan.carbs_g}</TableCell>
+              <TableCell> {pastplan.fiber_g}</TableCell>
+              <TableCell>{pastplan.sugar_g} </TableCell>
+              <TableCell> {pastplan.protein_g}</TableCell>
+              <TableCell>{pastplan.sodium_mg} </TableCell>
+              <TableCell> {pastplan.potassium_mg}</TableCell>
+              <TableCell> {pastplan.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+    
+      <h3>
+        &nbsp; &nbsp;
+        Past actual by week:
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+        
+              <TableCell style={{ maxWidth: 110}}  align="left">Week</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {past.map((progress, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={progress.week}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+                    <TableCell>
+                      {progress.week}
+                    </TableCell>
+        
+              <TableCell> {progress.calories}</TableCell>
+              <TableCell> {progress.fat_g}</TableCell>
+              <TableCell> {progress.sat_fat_g}</TableCell>
+              <TableCell> {progress.trans_fat_g}</TableCell>
+              <TableCell> {progress.carbs_g}</TableCell>
+              <TableCell> {progress.fiber_g}</TableCell>
+              <TableCell>{progress.sugar_g} </TableCell>
+              <TableCell> {progress.protein_g}</TableCell>
+              <TableCell>{progress.sodium_mg} </TableCell>
+              <TableCell> {progress.potassium_mg}</TableCell>
+              <TableCell> {progress.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+      </div>
+
+    
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default Past;

db_app/src/components/Plan.js

@@ -1,4 +1,4 @@
-import React,{useState} from 'react';
+import React,{useState, useEffect} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
 import Button from "@mui/material/Button";
@@ -11,7 +11,7 @@ import { ReactSession } from 'react-client-session';
 import Axios from 'axios';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
-import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper,Checkbox} from '@mui/material';
 
 
 const theme = createTheme({
@@ -26,6 +26,7 @@ const theme = createTheme({
 
 function MyPlan() {
 
+  //Navigation functions
   const navigate = useNavigate();
 
 	const Home = () => {
@@ -44,32 +45,49 @@ const navigateLogin = () => {
   const logout = () => {
     ReactSession.set("net_id", "");
     navigateLogin();
-
   }
-//get the start of each week and reformat to Oracle date type
+
+const Log = () => {
+  navigate('/LogMeals')
+}
+
+const Progress = () => {
+  navigate('/ThisWeek')
+}
+
+const [week, setWeek] = useState();
+const displayWeek = () => {
+  setWeek(() => weekStart());
+}
+
+
+//get start of week (sunday)
+function getLastSunday() {
+  const date = new Date();
+  const today = date.getDate();
+  const currentDay = date.getDay();
+  const newDate = date.setDate(today - (currentDay || 7));
+  return new Date(newDate);
+}
+
+//get the Sunday of each week and reformat to Oracle date type
 function weekStart(){
-  var date_str = new Date();
-  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-  var weekday = days[date_str.getDay()]
   
-  if (weekday != 'Sunday'){
+  var date_str = getLastSunday();
-    return;
-  }
-
-  var date_str = new Date();
   var curr_day = String(date_str.getDate()).padStart(2, '0');
+  console.log(curr_day);
   const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
-
   var curr_month = months[date_str.getMonth()];
   var curr_year = String(date_str.getFullYear());
   var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
-
+   console.log(db_date)
   return db_date;
 }
 
+//Get netid session variable
 const net_id = ReactSession.get("net_id");
 
-//to set nutritional goal for the week
+//To set nutritional goal for the week
 const [goalInput, setGoalInput] = useState({
       total_cal: 0,
       total_fat: 0,
@@ -85,13 +103,19 @@ const [goalInput, setGoalInput] = useState({
     }
 );
 
+//Variable to hold the goal input from the form
 const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, 
   total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput
 
+//Change handler for form submit to send the goal info to the server
 const changeGoalHandler = evt =>{
   setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
 }
 
+//Variable to hold the success state of submit
+const [success, setSuccess] = useState("");
+
+//Sends http request to submit goal
 const submitGoalHandler = evt => {
   evt.preventDefault();
   console.log(goalInput)
@@ -116,88 +140,19 @@ const submitGoalHandler = evt => {
       console.log(response);
       console.log(response.status);
     })
-};
+    setSuccess('Plan saved!');
-
-//to find a food item from an on campus location to your weekly journal
-const [keyword, setKeyword] = useState({
-  search_term:""
-})
-
-const{search_term} = keyword
-
-const changeSearchHandler = evt => {
-  setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
-}
-
-const submitSearchHandler = evt => {
-  evt.preventDefault();
-  console.log(search_term)
-  console.log(net_id)
-  Axios.post("http://3.219.93.142:8000/api/menu_search",
-    {
-      search_term:search_term[0]
-    }).then((response) => {
-      console.log(response);
-      console.log(response.status);
-      console.log(response.data);
-    })
 };
 
 
-//to add an off campus food item or meal to your weekly journal
+  useEffect(() => {
-  const [offCampusInput, setOffCampusInput] = useState({
+    displayWeek()
-    item_name:"",
+    console.log('week calculated')
-    amount: 0,
+  }, []);
-    calories: 0,
-    fat_g: 0,
-    sat_fat_g: 0,
-    trans_fat_g: 0,
-    carbs_g: 0,
-    fiber_g: 0,
-    sugar_g: 0,
-    protein_g: 0,
-    sodium_mg: 0,
-    potassium_mg: 0,
-    cholesterol_mg: 0,
-  }
-  );
    
-  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
-    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
-
-  const changeOffCampusHandler = evt => {
-    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
-  }
-
-  const submitOffCampusHandler = evt => {
-    evt.preventDefault();
-    console.log(offCampusInput)
-    console.log(net_id)
-    Axios.post("http://3.219.93.142:8000/api/week_plan",
-      {
-        net_id: net_id,
-        item_name: item_name[0],
-        amount: Number(amount[0]),
-        calories: Number(calories[0]),
-        fat_g: Number(fat_g[0]),
-        sat_fat_g: Number(sat_fat_g[0]),
-        trans_fat_g: Number(trans_fat_g[0]),
-        carbs_g: Number(carbs_g[0]),
-        fiber_g: Number(fiber_g[0]),
-        sugar_g: Number(sugar_g[0]),
-        protein_g: Number(protein_g[0]),
-        sodium_mg: Number(sodium_mg[0]),
-        potassium_mg: Number(potassium_mg[0]),
-        cholesterol_mg: Number(cholesterol_mg[0])
-      }).then((response) => {
-        console.log(response);
-        console.log(response.status);
-      })
-  };
   
   return (
   <ThemeProvider theme={theme}>  
-    <div>
+  
       <AppBar position="static">
         <Toolbar variant="dense">
           <Button  variant="h6" color="main" position="right" onClick={Home}>
@@ -218,11 +173,27 @@ const submitSearchHandler = evt => {
           </Button>
         </Toolbar>
       </AppBar>
-    </div>
+
+
+    <AppBar className='bar' position="static">
+<Toolbar >
+<Button variant="h2" color="main" onClick={Home}sx={{
+
+            bgcolor: '#053B06', // theme.palette.primary.main
+            color: 'main',
+     
+          }}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress}>Plan Progress</Button>
+     
+</Toolbar>
+  </AppBar>
 
     <div>
       <h1>&nbsp; Your Plan</h1>
-      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+      <h2>&nbsp; &nbsp;Goal for the week of: {week}</h2>
 
       <form onSubmit={submitGoalHandler}>
       &nbsp; &nbsp;
@@ -348,258 +319,11 @@ const submitSearchHandler = evt => {
       Submit</Button>
       </form>
     </div>
+    <h2> &nbsp; &nbsp; {success}</h2>
     <br></br>
     
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        So Far This Week:
-      </h2>
    
-      <h3>
-        &nbsp; &nbsp;
-        Foods Eaten
-      </h3>
 
-      <TableContainer component={Paper}>
-          <Table stickyHeader>
-          <TableHead>
-            <TableRow>
-              <TableCell style={{ width: 90 }}  align="left">Food</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Calories</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
-            </TableRow>
-          </TableHead>
-
-          <TableBody>
-            <TableRow>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    
-      <br></br>
-      <Stack direction="row" spacing={2}>
-        &nbsp; &nbsp;
-        <Chip label="Calories" variant="outlined"/>
-        <Chip label="Fat" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Saturated Fat" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Trans Fat" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Carbs" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Fiber" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Sugar" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Protein" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Sodium" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-        <Chip label="Potassium" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-        <Chip label="Cholesterol" variant="outlined"/>
-      </Stack>
-    </div>
-
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        Add to Food Journal
-      </h2>
-      <h3> &nbsp; &nbsp;
-        On-Campus
-      </h3>
-      <form onSubmit={submitSearchHandler}>
-          &nbsp; &nbsp;
-          <TextField
-            id="search_term"
-            label="Keyword"
-            size="medium"
-            name="search_term"
-            value={search_term}
-            onChange={changeSearchHandler}
-          />
-
-          &nbsp; &nbsp;
-          <Button sx={{ m: 1}}
-            type="search"
-            variant="contained"
-            size="medium">
-          Search</Button>
-      </form>
-
-      <h3> &nbsp; &nbsp;
-        Off-Campus
-      </h3>
-        <form onSubmit={submitOffCampusHandler}>
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="item_name"
-            label="Food Item"
-            size="small"
-            name="item_name"
-            value={item_name}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="amount"
-            label="Number of Servings"
-            size="small"
-            name="amount"
-            type="number"
-            value={amount}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="calories"
-            label="Calories"
-            size="small"
-            name="calories"
-            type="number"
-            value={calories}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="fat"
-            label="Fat (g)"
-            size="small"
-            name="fat_g"
-            type="number"
-            value={fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sat_fat"
-            label="Saturated Fat (g)"
-            size="small"
-            name="sat_fat_g"
-            type="number"
-            value={sat_fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="trans_fat"
-            label="Trans Fat (g)"
-            size="small"
-            name="trans_fat_g"
-            type="number"
-            value={trans_fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          
-          &nbsp; &nbsp;
-          <TextField
-            id="carbs"
-            label="Carbs (g)"
-            size="small"
-            name="carbs_g"
-            type="number"
-            value={carbs_g}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="fiber"
-            label="Fiber (g)"
-            size="small"
-            name="fiber_g"
-            type="number"
-            value={fiber_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sugar"
-            label="Sugar (g)"
-            size="small"
-            name="sugar_g"
-            type="number"
-            value={sugar_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="protein"
-            label="Protein (g)"
-            size="small"
-            name="protein_g"
-            type="number"
-            value={protein_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sodium"
-            label="Sodium (mg)"
-            size="small"
-            name="sodium_mg"
-            type="number"
-            value={sodium_mg}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="potassium"
-            label="Potassium (mg)"
-            size="small"
-            name="potassium_mg"
-            type="number"
-            value={potassium_mg}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="cholesterol"
-            label="Cholesterol (mg)"
-            size="small"
-            name="cholesterol_mg"
-            type="number"
-            value={cholesterol_mg}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          <br></br>
-          &nbsp; &nbsp;
-
-          <Button
-            type="submit"
-            variant="contained"
-            size="large">
-            Submit</Button>
-      </form>
-    </div>
     
     </ThemeProvider>
   

db_app/src/components/ThisWeek.js

@@ -0,0 +1,563 @@
+import React,{useState, useEffect} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function ThisWeek() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+    navigate('/LogMeals')
+  }
+  
+  const Progress = () => {
+    navigate('/ThisWeek')
+  }
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_st = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_st.getDay()]
+
+  if (weekday !== 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+function planDay(){
+    var date_s = new Date();
+    var index = date_s.getDay();
+    return(index + 1)
+}
+
+const net_id = ReactSession.get("net_id");
+
+
+  //Get history of items for this week
+  const [pastItems, setPastItems] = useState([{}]);
+  const makeURL = (net_id) => `http://3.219.93.142:8000/api/week_progress/${net_id}`;
+
+  const getHistory = () => {
+    const net_id = ReactSession.get("net_id");
+    const url_to_query = makeURL(net_id);
+     Axios.get(url_to_query).then((response) => {
+      console.log(response.data);
+      setPastItems(response.data);
+    });
+     
+    }
+      //Get sum of totals for weekly plan (progress)
+    const [goals, setGoals] = useState([{}]);
+    const goalURL = (net_id) => `http://3.219.93.142:8000/api/goal/${net_id}`;
+    
+      const getGoal = () => {
+        const net_id = ReactSession.get("net_id");
+        const url_to_query = goalURL(net_id);
+         Axios.get(url_to_query).then((response) => {
+          console.log(response.data);
+          setGoals(response.data);
+        });
+         
+        }
+
+        //Get weekly plan goals
+        const [sum, setSum] = useState([{}]);
+        const sumURL = (net_id) => `http://3.219.93.142:8000/api/week_sum/${net_id}`;
+      
+        const getSum = () => {
+          const net_id = ReactSession.get("net_id");
+          const url_to_query = sumURL(net_id);
+           Axios.get(url_to_query).then((response) => {
+            console.log(response.data);
+            setSum(response.data);
+          });
+           
+          }
+
+          const [toDelete, setToDelete] = useState([]);
+
+          const removeItem = (index) => {
+            setToDelete([
+                       ...toDelete.slice(0, index),
+                       ...toDelete.slice(index + 1)
+            ]);
+          
+          }
+          
+          function handleCheck (i) {
+            console.log(i);
+            if (toDelete.indexOf(i) > -1){
+              //get index and delete
+              var index = toDelete.indexOf(i)
+              removeItem(index);
+              console.log(`removed ${i}`);
+              
+            }
+          
+            else{
+              setToDelete(toDelete => [...toDelete, i]);
+              console.log(`added ${i}`);
+            }
+            
+          }
+    //Delete checked from plan
+    const sendToPlan = () => {
+        Axios.delete('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: toDelete,}).then((response) => {
+         console.log(response);
+       });
+    }
+
+
+    //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 = () => {
+
+     
+
+       var dayFactor = planDay() / 7;
+       console.log(dayFactor)
+       console.log('Sum calories:')
+       console.log(sum.calories);
+       console.log('Goals calories:')
+       console.log(goals.calories);
+       console.log(goals.calories*dayFactor);
+
+        //set green
+        if(sum.calories < (1.1*goals.total_cal*dayFactor) && sum.calories >= (0.9*goals.total_cal*dayFactor)){
+            setCals(true)
+        }
+        else {
+            setCals(false)
+        }
+        if(sum.fat_g < (1.1*goals.total_fat*dayFactor) && sum.fat_g >= (0.9*goals.total_fat*dayFactor)){
+            setFat(true)
+        }
+        else {
+            setFat(false)
+        }
+        
+        if(sum.trans_fat_g < (1.1*goals.total_trans_fat*dayFactor) && sum.trans_fat_g >= (0.9*goals.total_trans_fat*dayFactor)){
+            setTrans(true)
+        }
+        else {
+            setTrans(false)
+        }
+        if(sum.carbs_g < (1.1*goals.total_carbs*dayFactor) && sum.carbs_g >= (0.9*goals.total_carbs*dayFactor)){
+            setCarbs(true)
+        }
+        else {
+            setCarbs(false)
+        }
+        if(sum.sugar_g < (1.1*goals.total_sugar*dayFactor) && sum.sugar_g >= (0.9*goals.total_sugar*dayFactor)){
+            setSugar(true)
+        }
+        else {
+            setSugar(false)
+        }
+        if(sum.protein_g < (1.1*goals.total_protein*dayFactor) && sum.protein_g >= (0.9*goals.total_protein*dayFactor)){
+            setProtein(true)
+        }
+        else {
+            setProtein(false)
+        }
+        if(sum.fiber_g < (1.1*goals.total_fiber*dayFactor) && sum.fiber_g >= (0.9*goals.total_fiber*dayFactor)){
+            setFiber(true)
+        }
+        else {
+            setFiber(false)
+        }
+        if(sum.cholesterol_mg < (1.1*goals.total_cholesterol*dayFactor) && sum.cholesterol_mg >= (0.9*goals.total_cholesterol*dayFactor)){
+            setChol(true)
+        }
+        else {
+            setChol(false)
+        }
+        if(sum.sodium_mg < (1.1*goals.total_sodium*dayFactor) && sum.sodium_mg >= (0.9*goals.total_sodium*dayFactor)){
+            setSodium(true)
+        }
+        else {
+            setSodium(false)
+        }
+        if(sum.sat_fat_g < (1.1*goals.total_sat_fat*dayFactor) && sum.sat_fat_g >= (0.9*goals.total_sat_fat*dayFactor)){
+            setSat(true)
+        }
+        else {
+            setSat(false)
+        }
+        if(sum.potassium_mg < (1.1*goals.total_potassium*dayFactor) && sum.potassium_mg >= (0.9*goals.total_potassium*dayFactor)){
+            setPotassium(true)
+        } else {
+            setPotassium(false)
+        }
+
+    
+    }
+
+
+
+
+    //Run getSum, getHistory, and getPlan on page load
+        useEffect(() => {
+            getHistory()
+            console.log('History in')
+            getSum()
+            console.log('Sum in')
+            getGoal()
+            console.log('Goal in')
+            setColors()
+            console.log('Colors set')
+            console.log(planDay())
+          }, []);
+       
+  
+  return (
+  <ThemeProvider theme={theme}>  
+ 
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+      <AppBar className='bar' position="static">
+<Toolbar>
+<Button variant="h2" color="main" onClick={Home}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress} sx={{
+          
+          bgcolor: '#053B06', // theme.palette.primary.main
+          color: 'main',
+   
+        }}>Plan Progress</Button>
+     
+  
+     
+</Toolbar>
+  </AppBar>
+
+    
+    <div>
+      <h1>
+      &nbsp;
+        So Far This Week:
+      </h1>
+
+      <h3>
+        &nbsp; &nbsp;
+        Foods Eaten
+      </h3>
+      <Button sx={{
+        color: 'main',
+    ':hover': {
+      bgcolor: 'green',
+      color: 'white',
+    },
+    marginLeft: 5
+  }} onClick={sendToPlan}> Remove checked from log</Button>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+            <TableCell style={{ maxWidth: 110}}  align="left">Remove?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Food</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {pastItems.map((pastitem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={pastitem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+
+<TableCell padding="checkbox">
+
+                     
+<Checkbox
+
+color="primary"
+onChange={() => handleCheck(pastitem.item_id)}
+/>
+</TableCell>
+                    <TableCell>
+                      {pastitem.item_name}
+                    </TableCell>
+                    
+        
+              <TableCell> {pastitem.calories}</TableCell>
+              <TableCell> {pastitem.fat_g}</TableCell>
+              <TableCell> {pastitem.sat_fat_g}</TableCell>
+              <TableCell> {pastitem.trans_fat_g}</TableCell>
+              <TableCell> {pastitem.carbs_g}</TableCell>
+              <TableCell> {pastitem.fiber_g}</TableCell>
+              <TableCell>{pastitem.sugar_g} </TableCell>
+              <TableCell> {pastitem.protein_g}</TableCell>
+              <TableCell>{pastitem.sodium_mg} </TableCell>
+              <TableCell> {pastitem.potassium_mg}</TableCell>
+              <TableCell> {pastitem.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+    
+      <h3>
+        &nbsp; &nbsp;
+        Weekly Totals
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+    
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+                <TableRow
+                    key={sum.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+            
+        
+              <TableCell> {sum.calories}</TableCell>
+              <TableCell> {sum.fat_g}</TableCell>
+              <TableCell> {sum.sat_fat_g}</TableCell>
+              <TableCell> {sum.trans_fat_g}</TableCell>
+              <TableCell> {sum.carbs_g}</TableCell>
+              <TableCell> {sum.fiber_g}</TableCell>
+              <TableCell>{sum.sugar_g} </TableCell>
+              <TableCell> {sum.protein_g}</TableCell>
+              <TableCell>{sum.sodium_mg} </TableCell>
+              <TableCell> {sum.potassium_mg}</TableCell>
+              <TableCell> {sum.cholesterol_mg}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+      <br></br>
+      <h4>
+        &nbsp; &nbsp;
+        At a glance
+      </h4>
+      <p> &nbsp; &nbsp; Each category will be red if you are more than 30% off track from your weekly goal for this point in the week.</p>
+      <p> &nbsp; &nbsp; If it's green, you're pretty much on track!</p>
+
+      <Stack direction="row" spacing={2}>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Calories" variant="outlined" sx={{
+          
+          bgcolor: cals ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        <Chip label="Fat" variant="outlined" sx={{
+          
+          bgcolor: fat ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Saturated Fat" variant="outlined" sx={{
+          
+          bgcolor: sat ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Trans Fat" variant="outlined" sx={{
+          
+          bgcolor: trans ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Carbs" variant="outlined" sx={{
+          
+          bgcolor: carbs ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Fiber" variant="outlined" sx={{
+          
+          bgcolor: fiber ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sugar" variant="outlined" sx={{
+          
+          bgcolor: sugar ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Protein" variant="outlined" sx={{
+          
+          bgcolor: protein ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sodium" variant="outlined" sx={{
+          
+          bgcolor: sodium ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Potassium" variant="outlined" sx={{
+          
+          bgcolor: potassium ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Cholesterol" variant="outlined" sx={{
+          
+          bgcolor: cholesterol ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+      </Stack>
+    </div>
+
+    
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default ThisWeek;