Plan progress works now

db_app/src/components/LogMeals.js

@@ -2,33 +2,16 @@ import React,{useState} 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 Axios from 'axios';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper,Checkbox} from '@mui/material';
-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({
@@ -41,7 +24,7 @@ const theme = createTheme({
     },
   });
 
-function LogMeals() {
+function MyPlan() {
 
     const navigate = useNavigate();
 
@@ -65,12 +48,15 @@ const logout = () => {
 }
 
 const Log = () => {
-    navigate('/LogMeals')
+  navigate('/LogMeals')
-  }
+}
+
+const Progress = () => {
+  navigate('/ThisWeek')
+}
+
+
 
-  const Progress = () => {
-    navigate('/ThisWeek')
-  }
 //get the start of each week and reformat to Oracle date type
 function weekStart(){
   var date_str = new Date();
@@ -96,17 +82,17 @@ const net_id = ReactSession.get("net_id");
 
 //to set nutritional goal for the week
 const [goalInput, setGoalInput] = useState({
-      total_cal: "",
+      total_cal: 0,
-      total_fat: "",
+      total_fat: 0,
-      total_sat_fat: "",
+      total_sat_fat: 0,
-      total_trans_fat: "",
+      total_trans_fat: 0,
-      total_carbs: "",
+      total_carbs: 0,
-      total_fiber: "",
+      total_fiber: 0,
-      total_sugar: "",
+      total_sugar: 0,
-      total_protein: "",
+      total_protein: 0,
-      total_sodium: "",
+      total_sodium: 0,
-      total_potassium: "",
+      total_potassium: 0,
-      total_cholesterol: "",
+      total_cholesterol: 0,
     }
 );
 
@@ -120,54 +106,135 @@ const changeGoalHandler = evt =>{
 const submitGoalHandler = evt => {
   evt.preventDefault();
   console.log(goalInput)
-  Axios.post("http://3.219.93.142:8000/api/",
+  console.log(net_id)
+  console.log(weekStart())
+  Axios.post("http://3.219.93.142:8000/api/goal",
     {
-      total_cal: total_cal[0],
+      net_id: net_id,
-      total_fat: total_fat[0],
+      week_date: weekStart(),
-      total_sat_fat: total_sat_fat[0],
+      total_cal: Number(total_cal[0]),
-      total_trans_fat: total_trans_fat[0],
+      total_fat: Number(total_fat[0]),
-      total_carbs: total_carbs[0],
+      total_sat_fat: Number(total_sat_fat[0]),
-      total_fiber: total_fiber[0],
+      total_trans_fat: Number(total_trans_fat[0]),
-      total_sugar: total_sugar[0],
+      total_carbs: Number(total_carbs[0]),
-      total_protein: total_protein[0],
+      total_fiber: Number(total_fiber[0]),
-      total_sodium: total_sodium[0],
+      total_sugar: Number(total_sugar[0]),
-      total_potassium: total_potassium[0],
+      total_protein: Number(total_protein[0]),
-      total_cholesterol: total_cholesterol[0]
+      total_sodium: Number(total_sodium[0]),
+      total_potassium: Number(total_potassium[0]),
+      total_cholesterol: Number(total_cholesterol[0])
     }).then((response) => {
       console.log(response);
       console.log(response.status);
     })
 };
 
+//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{search_term} = keyword
+
+const removeItem = (index) => {
+  setSearchItems([
+             ...searchItems.slice(0, index),
+             ...searchItems.slice(index + 1)
+  ]);
+
+}
+
+function handleCheck (i) {
+  console.log(i);
+  if (searchItems.indexOf(i) > -1){
+    //get index and delete
+    var index = searchItems.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setSearchItems(searchItems => [...searchItems, 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(response.data);
+      setSearchItems(response.data);
+    })
+};
+
 
 //to add an off campus food item or meal to your weekly journal
   const [offCampusInput, setOffCampusInput] = useState({
-    calories: "",
+    item_name:"",
-    fat_g: "",
+    amount: 0,
-    sat_fat_g: "",
+    calories: 0,
-    trans_fat_g: "",
+    fat_g: 0,
-    carbs_g: "",
+    sat_fat_g: 0,
-    fiber_g: "",
+    trans_fat_g: 0,
-    sugar_g: "",
+    carbs_g: 0,
-    protein_g: "",
+    fiber_g: 0,
-    sodium_g: "",
+    sugar_g: 0,
-    potassium_g: "",
+    protein_g: 0,
-    cholesterol_g: "",
+    sodium_mg: 0,
+    potassium_mg: 0,
+    cholesterol_mg: 0,
   }
   );
 
-  const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
-    sodium_g, potassium_g, cholesterol_g, } = offCampusInput
+    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
 
-  const changeoffCampusHandler = evt => {
+  const changeOffCampusHandler = evt => {
     setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
   }
 
-  const submitoffCampusHandler = evt => {
+  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}>  
   
@@ -191,286 +258,42 @@ const submitGoalHandler = evt => {
           </Button>
         </Toolbar>
       </AppBar>
-      <AppBar className='bar' position="static">
+
-<Toolbar>
+
+    <AppBar className='bar' position="static">
+<Toolbar >
 <Button variant="h2" color="main" onClick={Home}>
         Plan for {net_id}
       </Button>
-      <Button variant="h2" color="main"  sx={{
+      <Button variant="h2" color="main" sx={{
 
-          bgcolor: '#053B06', // theme.palette.primary.main
+bgcolor: '#053B06', // theme.palette.primary.main
-          color: 'main',
+color: 'main',
 
-        }} onClick={Log}>Log Meals</Button>
+}} 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>
-
-      <form onSubmit={submitGoalHandler}>
-      &nbsp; &nbsp;
-      <TextField
-        sx={{ paddingBottom: 1 }}
-        id="total_cal"
-        label="Calories"
-        name="total_cal"
-        value={total_cal}
-        size ="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fat"
-        label="Fat (g)"
-        name="total_fat"
-        value={total_fat}
-        size="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sat_fat"
-        label="Saturated Fat (g)"
-        size="small"
-        name="total_sat_fat"
-        value={total_sat_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_trans_fat"
-        label="Trans Fat (g)"
-        size="small"
-        name="total_trans_fat"
-        value={total_trans_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_carbs"
-        label="Carbs (g)"
-        size="small"
-        name="total_carbs"
-        value={total_carbs} 
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fiber"
-        label="Fiber (g)"
-        size="small"
-        name="total_fiber"
-        value={total_fiber}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sugar"
-        label="Sugar (g)"
-        size="small"
-        name="total_sugar"
-        value={total_sugar}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_protein"
-        label="Protein (g)"
-        size="small"
-        name="total_protein"
-        value={total_protein}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sodium"
-        label="Sodium (mg)"
-        size="small"
-        name="total_sodium"
-        value={total_sodium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_potassium"
-        label="Potassium (mg)"
-        size="small"
-        name="total_potassium"
-        value={total_potassium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_cholesterol"
-        label="Cholesterol (mg)"
-        size="small"
-        name="total_cholesterol"
-        value={total_cholesterol}
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      <br></br>
-      &nbsp; &nbsp;
-
-      <Button 
-      type="submit" 
-      variant="contained"
-      size = "large">
-      Submit</Button>
-      </form>
-    </div>
-    <br></br>
    
     <div>
-      <h2>
+      <h1>
-        &nbsp; &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>
-    
-      <h3>
-        &nbsp; &nbsp;
-        Weekly Totals
-      </h3>
-
-      <TableContainer component={Paper}>
-        <Table sx={{ maxWidth: 1200 }}>
-          <TableHead>
-            <TableRow>
-              <TableCell align="left">Calories</TableCell>
-              <TableCell align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
-              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
-              <TableCell 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>
-            </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>
+      </h1>
       <h3> &nbsp; &nbsp;
         On-Campus
       </h3>
-      <form>
+      <form onSubmit={submitSearchHandler}>
-          &nbsp; &nbsp;
-          <FormControl sx={{minWidth:170 }}>
-            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
-            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
-              <MenuItem>DH</MenuItem>
-              <MenuItem>Chick-fil-a</MenuItem>
-              <MenuItem>Smashburger</MenuItem>
-              <MenuItem>Flip Kitchen</MenuItem>
-              <MenuItem>ABP</MenuItem>
-              <MenuItem>Starbucks</MenuItem>
-              <MenuItem>Modern Market</MenuItem>
-              <MenuItem>Taco Bell</MenuItem>
-            </Select>
-          </FormControl>
-
           &nbsp; &nbsp;
           <TextField
-            id="keywordsearch"
+            id="search_term"
             label="Keyword"
             size="medium"
+            name="search_term"
+            value={search_term}
+            onChange={changeSearchHandler}
           />
 
           &nbsp; &nbsp;
@@ -481,84 +304,190 @@ const submitGoalHandler = evt => {
           Search</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.item_name}
+                    </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>
+        <form onSubmit={submitOffCampusHandler}>
           &nbsp; &nbsp;
           <TextField
             sx={{ paddingBottom: 1 }}
-            id="food-input"
+            id="item_name"
             label="Food Item"
             size="small"
-          />
+            name="item_name"
-          &nbsp; &nbsp;
+            value={item_name}
-          <TextField
+            onChange={changeOffCampusHandler}
-            sx={{ paddingBottom: 1 }}
-            id="calorie-input"
-            label="Calories"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="fat-input"
-            label="Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="saturated_fat-input"
-            label="Saturated Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="trans_fat-input"
-            label="Trans Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="carbs-input"
-            label="Carbs (g)"
-            size="small"
           />
           <br></br>
           &nbsp; &nbsp;
           <TextField
-            id="fiber-input"
+            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-input"
+            id="sugar"
             label="Sugar (g)"
             size="small"
+            name="sugar_g"
+            type="number"
+            value={sugar_g}
+            onChange={changeOffCampusHandler}
           />
           &nbsp; &nbsp;
           <TextField
-            id="protein-input"
+            id="protein"
             label="Protein (g)"
             size="small"
+            name="protein_g"
+            type="number"
+            value={protein_g}
+            onChange={changeOffCampusHandler}
           />
           &nbsp; &nbsp;
           <TextField
-            id="sodium-input"
+            id="sodium"
             label="Sodium (mg)"
             size="small"
+            name="sodium_mg"
+            type="number"
+            value={sodium_mg}
+            onChange={changeOffCampusHandler}
           />
           &nbsp; &nbsp;
           <TextField
-            id="potassium-input"
+            id="potassium"
             label="Potassium (mg)"
             size="small"
+            name="potassium_mg"
+            type="number"
+            value={potassium_mg}
+            onChange={changeOffCampusHandler}
           />
           &nbsp; &nbsp;
           <TextField
-            id="cholesterol-input"
+            id="cholesterol"
             label="Cholesterol (mg)"
             size="small"
+            name="cholesterol_mg"
+            type="number"
+            value={cholesterol_mg}
+            onChange={changeOffCampusHandler}
           />
           <br></br>
           <br></br>
@@ -569,12 +498,12 @@ const submitGoalHandler = evt => {
             variant="contained"
             size="large">
             Submit</Button>
-        </form>
+      </form>
-
     </div>
+
     </ThemeProvider>
   
     );
   }
   
-  export default LogMeals;
+  export default MyPlan;

db_app/src/components/Menus.js

@@ -109,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': {

db_app/src/components/Past.js

@@ -41,7 +41,7 @@ const theme = createTheme({
     },
   });
 
-function ThisWeek() {
+function Past() {
 
     const navigate = useNavigate();
 
@@ -168,6 +168,9 @@ const submitGoalHandler = evt => {
   };
 
 
+  
+
+  
   return (
   <ThemeProvider theme={theme}>  
  
@@ -191,148 +194,16 @@ const submitGoalHandler = evt => {
           </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}>Plan Progress</Button>
     
 
     
-</Toolbar>
-  </AppBar>
-
     <div>
-      <h1>&nbsp; Your Plan</h1>
+      <h1>
-      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+      &nbsp;
+        Past plans:
+      </h1>
 
-      <form onSubmit={submitGoalHandler}>
-      &nbsp; &nbsp;
-      <TextField
-        sx={{ paddingBottom: 1 }}
-        id="total_cal"
-        label="Calories"
-        name="total_cal"
-        value={total_cal}
-        size ="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fat"
-        label="Fat (g)"
-        name="total_fat"
-        value={total_fat}
-        size="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sat_fat"
-        label="Saturated Fat (g)"
-        size="small"
-        name="total_sat_fat"
-        value={total_sat_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_trans_fat"
-        label="Trans Fat (g)"
-        size="small"
-        name="total_trans_fat"
-        value={total_trans_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_carbs"
-        label="Carbs (g)"
-        size="small"
-        name="total_carbs"
-        value={total_carbs} 
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fiber"
-        label="Fiber (g)"
-        size="small"
-        name="total_fiber"
-        value={total_fiber}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sugar"
-        label="Sugar (g)"
-        size="small"
-        name="total_sugar"
-        value={total_sugar}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_protein"
-        label="Protein (g)"
-        size="small"
-        name="total_protein"
-        value={total_protein}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sodium"
-        label="Sodium (mg)"
-        size="small"
-        name="total_sodium"
-        value={total_sodium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_potassium"
-        label="Potassium (mg)"
-        size="small"
-        name="total_potassium"
-        value={total_potassium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_cholesterol"
-        label="Cholesterol (mg)"
-        size="small"
-        name="total_cholesterol"
-        value={total_cholesterol}
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      <br></br>
-      &nbsp; &nbsp;
       
-      <Button 
-      type="submit" 
-      variant="contained"
-      size = "large">
-      Submit</Button>
-      </form>
-    </div>
-    <br></br>
-    
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        So Far This Week:
-      </h2>
-
-      <h3>
-        &nbsp; &nbsp;
-        Foods Eaten
-      </h3>
 
       <TableContainer component={Paper}>
           <Table stickyHeader>
@@ -371,205 +242,12 @@ const submitGoalHandler = evt => {
         </Table>
       </TableContainer>
     
-      <h3>
+      </div>
-        &nbsp; &nbsp;
-        Weekly Totals
-      </h3>
 
-      <TableContainer component={Paper}>
-        <Table sx={{ maxWidth: 1200 }}>
-          <TableHead>
-            <TableRow>
-              <TableCell align="left">Calories</TableCell>
-              <TableCell align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
-              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
-              <TableCell 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>
-            </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>
-          &nbsp; &nbsp;
-          <FormControl sx={{minWidth:170 }}>
-            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
-            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
-              <MenuItem>DH</MenuItem>
-              <MenuItem>Chick-fil-a</MenuItem>
-              <MenuItem>Smashburger</MenuItem>
-              <MenuItem>Flip Kitchen</MenuItem>
-              <MenuItem>ABP</MenuItem>
-              <MenuItem>Starbucks</MenuItem>
-              <MenuItem>Modern Market</MenuItem>
-              <MenuItem>Taco Bell</MenuItem>
-            </Select>
-          </FormControl>
-
-          &nbsp; &nbsp;
-          <TextField
-            id="keywordsearch"
-            label="Keyword"
-            size="medium"
-          />
-
-          &nbsp; &nbsp;
-          <Button sx={{ m: 1}}
-            type="search"
-            variant="contained"
-            size="medium">
-          Search</Button>
-      </form>
-
-      <h3> &nbsp; &nbsp;
-        Off-Campus
-      </h3>
-        <form>
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="food-input"
-            label="Food Item"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="calorie-input"
-            label="Calories"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="fat-input"
-            label="Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="saturated_fat-input"
-            label="Saturated Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="trans_fat-input"
-            label="Trans Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="carbs-input"
-            label="Carbs (g)"
-            size="small"
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="fiber-input"
-            label="Fiber (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sugar-input"
-            label="Sugar (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="protein-input"
-            label="Protein (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sodium-input"
-            label="Sodium (mg)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="potassium-input"
-            label="Potassium (mg)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="cholesterol-input"
-            label="Cholesterol (mg)"
-            size="small"
-          />
-          <br></br>
-          <br></br>
-          &nbsp; &nbsp;
-
-          <Button
-            type="submit"
-            variant="contained"
-            size="large">
-            Submit</Button>
-        </form>
-
-    </div>
     </ThemeProvider>
   
     );
   }
   
-  export default ThisWeek;
+  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({
@@ -19,7 +19,6 @@ const theme = createTheme({
       primary: {
         main: lightGreen[700],
         apple: red[500],
-        main2: '#588157',
       },
 
     },
@@ -56,7 +55,10 @@ const Progress = () => {
   navigate('/ThisWeek')
 }
 
-
+const [week, setWeek] = useState();
+const displayWeek = () => {
+  setWeek(() => weekStart());
+}
 
 //get the start of each week and reformat to Oracle date type
 function weekStart(){
@@ -135,8 +137,36 @@ const [keyword, setKeyword] = useState({
   search_term:""
 })
 
+const [searchItems, setSearchItems] = useState([{}]);
+
 const{search_term} = keyword
 
+const removeItem = (index) => {
+  setSearchItems([
+             ...searchItems.slice(0, index),
+             ...searchItems.slice(index + 1)
+  ]);
+
+}
+
+function handleCheck (i) {
+  console.log(i);
+  if (searchItems.indexOf(i) > -1){
+    //get index and delete
+    var index = searchItems.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setSearchItems(searchItems => [...searchItems, i]);
+    console.log(`added ${i}`);
+  }
+  
+}
+
+
 const changeSearchHandler = evt => {
   setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
 }
@@ -152,6 +182,7 @@ const submitSearchHandler = evt => {
       console.log(response);
       console.log(response.status);
       console.log(response.data);
+      setSearchItems(response.data);
     })
 };
 
@@ -207,6 +238,12 @@ const submitSearchHandler = evt => {
       })
   };
 
+  useEffect(() => {
+    displayWeek()
+    console.log('week calculated')
+  }, []);
+   
+  
   return (
   <ThemeProvider theme={theme}>  
   
@@ -232,8 +269,8 @@ const submitSearchHandler = evt => {
       </AppBar>
 
 
-    <AppBar color='main2' className='bar' position="static">
+    <AppBar className='bar' position="static">
-<Toolbar color='main2'>
+<Toolbar >
 <Button variant="h2" color="main" onClick={Home}sx={{
 
             bgcolor: '#053B06', // theme.palette.primary.main
@@ -250,7 +287,7 @@ const submitSearchHandler = evt => {
 
     <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;
@@ -378,294 +415,8 @@ const submitSearchHandler = evt => {
     </div>
     <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>
-
-      <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>
    
 
-      <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

@@ -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";
@@ -22,7 +22,7 @@ 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 Axios from 'axios';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
@@ -167,6 +167,42 @@ const submitGoalHandler = evt => {
     evt.preventDefault();
   };
 
+  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);
+    });
+     
+    }
+    useEffect(() => {
+        getHistory()
+        console.log('History in')
+      }, [])
+
+      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);
+        });
+         
+        }
+        useEffect(() => {
+            getHistory()
+            console.log('History in')
+            getSum()
+            console.log('Sum in')
+          }, [])
+       
   
   return (
   <ThemeProvider theme={theme}>  
@@ -209,216 +245,132 @@ const submitGoalHandler = evt => {
 </Toolbar>
   </AppBar>
 
-    <div>
-      <h1>&nbsp; Your Plan</h1>
-      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
-
-      <form onSubmit={submitGoalHandler}>
-      &nbsp; &nbsp;
-      <TextField
-        sx={{ paddingBottom: 1 }}
-        id="total_cal"
-        label="Calories"
-        name="total_cal"
-        value={total_cal}
-        size ="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fat"
-        label="Fat (g)"
-        name="total_fat"
-        value={total_fat}
-        size="small"
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sat_fat"
-        label="Saturated Fat (g)"
-        size="small"
-        name="total_sat_fat"
-        value={total_sat_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_trans_fat"
-        label="Trans Fat (g)"
-        size="small"
-        name="total_trans_fat"
-        value={total_trans_fat}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_carbs"
-        label="Carbs (g)"
-        size="small"
-        name="total_carbs"
-        value={total_carbs} 
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      &nbsp; &nbsp;
-      <TextField
-        id="total_fiber"
-        label="Fiber (g)"
-        size="small"
-        name="total_fiber"
-        value={total_fiber}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sugar"
-        label="Sugar (g)"
-        size="small"
-        name="total_sugar"
-        value={total_sugar}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_protein"
-        label="Protein (g)"
-        size="small"
-        name="total_protein"
-        value={total_protein}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_sodium"
-        label="Sodium (mg)"
-        size="small"
-        name="total_sodium"
-        value={total_sodium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_potassium"
-        label="Potassium (mg)"
-        size="small"
-        name="total_potassium"
-        value={total_potassium}
-        onChange={changeGoalHandler}
-      />
-      &nbsp; &nbsp;
-      <TextField
-        id="total_cholesterol"
-        label="Cholesterol (mg)"
-        size="small"
-        name="total_cholesterol"
-        value={total_cholesterol}
-        onChange={changeGoalHandler}
-      />
-      <br></br>
-      <br></br>
-      &nbsp; &nbsp;
-
-      <Button 
-      type="submit" 
-      variant="contained"
-      size = "large">
-      Submit</Button>
-      </form>
-    </div>
-    <br></br>
     
     <div>
-      <h2>
+      <h1>
-        &nbsp; &nbsp;
+      &nbsp;
         So Far This Week:
-      </h2>
+      </h1>
 
       <h3>
         &nbsp; &nbsp;
         Foods Eaten
       </h3>
 
-      <TableContainer component={Paper}>
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
-          <Table stickyHeader>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
           <TableHead>
-            <TableRow>
+            <TableRow sx={{maxWidth:1400}}>
-              <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={{ maxWidth: 110}}  align="left">Food</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
-              <TableCell style={{ width: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Cholesterol&nbsp;(mg)</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>
+          <TableBody sx={{maxWidth:1350}}>
-            <TableRow>
+            {pastItems.map((pastitem, i) => {
-              <TableCell> </TableCell>
+              console.log(i);
-              <TableCell> </TableCell>
+              return(
-              <TableCell> </TableCell>
+                <TableRow
-              <TableCell> </TableCell>
+                    key={pastitem.item_name}
-              <TableCell> </TableCell>
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-              <TableCell> </TableCell>
+                  >
-              <TableCell> </TableCell>
+                  
-              <TableCell> </TableCell>
+                    <TableCell>
-              <TableCell> </TableCell>
+                      {pastitem.item_name}
-              <TableCell> </TableCell>
+                    </TableCell>
-              <TableCell> </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>
 
-      <TableContainer component={Paper}>
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
-        <Table sx={{ maxWidth: 1200 }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
           <TableHead>
-            <TableRow>
+            <TableRow sx={{maxWidth:1400}}>
-              <TableCell align="left">Calories</TableCell>
+            
-              <TableCell align="left">Fat&nbsp;(g)</TableCell>
+    
-              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
-              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell align="left">Cholesterol&nbsp;(mg)</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>
+          <TableBody sx={{maxWidth:1350}}>
-            <TableRow>
+                <TableRow
-              <TableCell> </TableCell>
+                    key={sum.item_name}
-              <TableCell> </TableCell>
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-              <TableCell> </TableCell>
+                  >
-              <TableCell> </TableCell>
+                  
-              <TableCell> </TableCell>
+            
-              <TableCell> </TableCell>
+        
-              <TableCell> </TableCell>
+              <TableCell> {sum.calories}</TableCell>
-              <TableCell> </TableCell>
+              <TableCell> {sum.fat_g}</TableCell>
-              <TableCell> </TableCell>
+              <TableCell> {sum.sat_fat_g}</TableCell>
-              <TableCell> </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>
-      <Stack direction="row" spacing={2}>
+      <h4>
         &nbsp; &nbsp;
+        At a glance
+      </h4>
+
+      <Stack direction="row" spacing={2}>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
         <Chip label="Calories" variant="outlined"/>
         <Chip label="Fat" variant="outlined"/>
         &nbsp; &nbsp;
@@ -442,136 +394,7 @@ const submitGoalHandler = evt => {
       </Stack>
     </div>
 
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        Add to Food Journal
-      </h2>
-      <h3> &nbsp; &nbsp;
-        On-Campus
-      </h3>
-      <form>
-          &nbsp; &nbsp;
-          <FormControl sx={{minWidth:170 }}>
-            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
-            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
-              <MenuItem>DH</MenuItem>
-              <MenuItem>Chick-fil-a</MenuItem>
-              <MenuItem>Smashburger</MenuItem>
-              <MenuItem>Flip Kitchen</MenuItem>
-              <MenuItem>ABP</MenuItem>
-              <MenuItem>Starbucks</MenuItem>
-              <MenuItem>Modern Market</MenuItem>
-              <MenuItem>Taco Bell</MenuItem>
-            </Select>
-          </FormControl>
     
-          &nbsp; &nbsp;
-          <TextField
-            id="keywordsearch"
-            label="Keyword"
-            size="medium"
-          />
-
-          &nbsp; &nbsp;
-          <Button sx={{ m: 1}}
-            type="search"
-            variant="contained"
-            size="medium">
-          Search</Button>
-      </form>
-
-      <h3> &nbsp; &nbsp;
-        Off-Campus
-      </h3>
-        <form>
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="food-input"
-            label="Food Item"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="calorie-input"
-            label="Calories"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="fat-input"
-            label="Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="saturated_fat-input"
-            label="Saturated Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="trans_fat-input"
-            label="Trans Fat (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="carbs-input"
-            label="Carbs (g)"
-            size="small"
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="fiber-input"
-            label="Fiber (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sugar-input"
-            label="Sugar (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="protein-input"
-            label="Protein (g)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sodium-input"
-            label="Sodium (mg)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="potassium-input"
-            label="Potassium (mg)"
-            size="small"
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="cholesterol-input"
-            label="Cholesterol (mg)"
-            size="small"
-          />
-          <br></br>
-          <br></br>
-          &nbsp; &nbsp;
-
-          <Button
-            type="submit"
-            variant="contained"
-            size="large">
-            Submit</Button>
-        </form>
-
-    </div>
     </ThemeProvider>
   
     );