Plan progress works now
This commit is contained in:
Ava DeCroix
@@ -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 InputLabel from '@mui/material/InputLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
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({
|
||||
@@ -41,7 +24,7 @@ const theme = createTheme({
|
||||
},
|
||||
});
|
||||
|
||||
function LogMeals() {
|
||||
function MyPlan() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -71,6 +54,9 @@ const Log = () => {
|
||||
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_fat: "",
|
||||
total_sat_fat: "",
|
||||
total_trans_fat: "",
|
||||
total_carbs: "",
|
||||
total_fiber: "",
|
||||
total_sugar: "",
|
||||
total_protein: "",
|
||||
total_sodium: "",
|
||||
total_potassium: "",
|
||||
total_cholesterol: "",
|
||||
total_cal: 0,
|
||||
total_fat: 0,
|
||||
total_sat_fat: 0,
|
||||
total_trans_fat: 0,
|
||||
total_carbs: 0,
|
||||
total_fiber: 0,
|
||||
total_sugar: 0,
|
||||
total_protein: 0,
|
||||
total_sodium: 0,
|
||||
total_potassium: 0,
|
||||
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],
|
||||
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]
|
||||
net_id: net_id,
|
||||
week_date: weekStart(),
|
||||
total_cal: Number(total_cal[0]),
|
||||
total_fat: Number(total_fat[0]),
|
||||
total_sat_fat: Number(total_sat_fat[0]),
|
||||
total_trans_fat: Number(total_trans_fat[0]),
|
||||
total_carbs: Number(total_carbs[0]),
|
||||
total_fiber: Number(total_fiber[0]),
|
||||
total_sugar: Number(total_sugar[0]),
|
||||
total_protein: Number(total_protein[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: "",
|
||||
fat_g: "",
|
||||
sat_fat_g: "",
|
||||
trans_fat_g: "",
|
||||
carbs_g: "",
|
||||
fiber_g: "",
|
||||
sugar_g: "",
|
||||
protein_g: "",
|
||||
sodium_g: "",
|
||||
potassium_g: "",
|
||||
cholesterol_g: "",
|
||||
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 { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
|
||||
sodium_g, potassium_g, cholesterol_g, } = offCampusInput
|
||||
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 => {
|
||||
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,6 +258,8 @@ const submitGoalHandler = evt => {
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
|
||||
<AppBar className='bar' position="static">
|
||||
<Toolbar >
|
||||
<Button variant="h2" color="main" onClick={Home}>
|
||||
@@ -204,273 +273,27 @@ const submitGoalHandler = evt => {
|
||||
}} onClick={Log}>Log Meals</Button>
|
||||
<Button variant="h2" color="main" onClick={Progress}>Plan Progress</Button>
|
||||
|
||||
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<div>
|
||||
<h1> Your Plan</h1>
|
||||
<h2> Goal for the week of: </h2>
|
||||
|
||||
<form onSubmit={submitGoalHandler}>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="total_cal"
|
||||
label="Calories"
|
||||
name="total_cal"
|
||||
value={total_cal}
|
||||
size ="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_fat"
|
||||
label="Fat (g)"
|
||||
name="total_fat"
|
||||
value={total_fat}
|
||||
size="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sat_fat"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
name="total_sat_fat"
|
||||
value={total_sat_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_trans_fat"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
name="total_trans_fat"
|
||||
value={total_trans_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_carbs"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="total_carbs"
|
||||
value={total_carbs}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="total_fiber"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
name="total_fiber"
|
||||
value={total_fiber}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sugar"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
name="total_sugar"
|
||||
value={total_sugar}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_protein"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
name="total_protein"
|
||||
value={total_protein}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sodium"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
name="total_sodium"
|
||||
value={total_sodium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_potassium"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
name="total_potassium"
|
||||
value={total_potassium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_cholesterol"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
name="total_cholesterol"
|
||||
value={total_cholesterol}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size = "large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
<br></br>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
So Far This Week:
|
||||
</h2>
|
||||
|
||||
<h3>
|
||||
|
||||
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 (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Cholesterol (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>
|
||||
|
||||
Weekly Totals
|
||||
</h3>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ maxWidth: 1200 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left">Calories</TableCell>
|
||||
<TableCell align="left">Fat (g)</TableCell>
|
||||
<TableCell align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell align="left">TransFat (g)</TableCell>
|
||||
<TableCell align="left">Carbs (g)</TableCell>
|
||||
<TableCell align="left">Fiber (g)</TableCell>
|
||||
<TableCell align="left">Sugar (g)</TableCell>
|
||||
<TableCell align="left">Protein (g)</TableCell>
|
||||
<TableCell align="left">Sodium (mg)</TableCell>
|
||||
<TableCell align="left">Potassium (mg)</TableCell>
|
||||
<TableCell align="left">Cholesterol (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}>
|
||||
|
||||
<Chip label="Calories" variant="outlined"/>
|
||||
<Chip label="Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Saturated Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Trans Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Carbs" variant="outlined"/>
|
||||
|
||||
<Chip label="Fiber" variant="outlined"/>
|
||||
|
||||
<Chip label="Sugar" variant="outlined"/>
|
||||
|
||||
<Chip label="Protein" variant="outlined"/>
|
||||
|
||||
<Chip label="Sodium" variant="outlined"/>
|
||||
|
||||
<Chip label="Potassium" variant="outlined"/>
|
||||
|
||||
<Chip label="Cholesterol" variant="outlined"/>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
<h1>
|
||||
|
||||
Add to Food Journal
|
||||
</h2>
|
||||
</h1>
|
||||
<h3>
|
||||
On-Campus
|
||||
</h3>
|
||||
<form>
|
||||
|
||||
<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>
|
||||
|
||||
<form onSubmit={submitSearchHandler}>
|
||||
|
||||
<TextField
|
||||
id="keywordsearch"
|
||||
id="search_term"
|
||||
label="Keyword"
|
||||
size="medium"
|
||||
name="search_term"
|
||||
value={search_term}
|
||||
onChange={changeSearchHandler}
|
||||
/>
|
||||
|
||||
|
||||
@@ -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>
|
||||
Off-Campus
|
||||
</h3>
|
||||
<form>
|
||||
<form onSubmit={submitOffCampusHandler}>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="food-input"
|
||||
id="item_name"
|
||||
label="Food Item"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="calorie-input"
|
||||
label="Calories"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="fat-input"
|
||||
label="Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="saturated_fat-input"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="trans_fat-input"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="carbs-input"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="item_name"
|
||||
value={item_name}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="fiber-input"
|
||||
id="amount"
|
||||
label="Number of Servings"
|
||||
size="small"
|
||||
name="amount"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="calories"
|
||||
label="Calories"
|
||||
size="small"
|
||||
name="calories"
|
||||
type="number"
|
||||
value={calories}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="fat"
|
||||
label="Fat (g)"
|
||||
size="small"
|
||||
name="fat_g"
|
||||
type="number"
|
||||
value={fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sat_fat"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
name="sat_fat_g"
|
||||
type="number"
|
||||
value={sat_fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="trans_fat"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
name="trans_fat_g"
|
||||
type="number"
|
||||
value={trans_fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
|
||||
<TextField
|
||||
id="carbs"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="carbs_g"
|
||||
type="number"
|
||||
value={carbs_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="fiber"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
name="fiber_g"
|
||||
type="number"
|
||||
value={fiber_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sugar-input"
|
||||
id="sugar"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
name="sugar_g"
|
||||
type="number"
|
||||
value={sugar_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="protein-input"
|
||||
id="protein"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
name="protein_g"
|
||||
type="number"
|
||||
value={protein_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sodium-input"
|
||||
id="sodium"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
name="sodium_mg"
|
||||
type="number"
|
||||
value={sodium_mg}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="potassium-input"
|
||||
id="potassium"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
name="potassium_mg"
|
||||
type="number"
|
||||
value={potassium_mg}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<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>
|
||||
@@ -570,11 +499,11 @@ const submitGoalHandler = evt => {
|
||||
size="large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</ThemeProvider>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default LogMeals;
|
||||
export default MyPlan;
|
||||
@@ -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': {
|
||||
|
||||
@@ -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> Your Plan</h1>
|
||||
<h2> Goal for the week of: </h2>
|
||||
<h1>
|
||||
|
||||
Past plans:
|
||||
</h1>
|
||||
|
||||
<form onSubmit={submitGoalHandler}>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="total_cal"
|
||||
label="Calories"
|
||||
name="total_cal"
|
||||
value={total_cal}
|
||||
size ="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_fat"
|
||||
label="Fat (g)"
|
||||
name="total_fat"
|
||||
value={total_fat}
|
||||
size="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sat_fat"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
name="total_sat_fat"
|
||||
value={total_sat_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_trans_fat"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
name="total_trans_fat"
|
||||
value={total_trans_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_carbs"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="total_carbs"
|
||||
value={total_carbs}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="total_fiber"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
name="total_fiber"
|
||||
value={total_fiber}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sugar"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
name="total_sugar"
|
||||
value={total_sugar}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_protein"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
name="total_protein"
|
||||
value={total_protein}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sodium"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
name="total_sodium"
|
||||
value={total_sodium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_potassium"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
name="total_potassium"
|
||||
value={total_potassium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_cholesterol"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
name="total_cholesterol"
|
||||
value={total_cholesterol}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size = "large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
<br></br>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
So Far This Week:
|
||||
</h2>
|
||||
|
||||
<h3>
|
||||
|
||||
Foods Eaten
|
||||
</h3>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table stickyHeader>
|
||||
@@ -371,205 +242,12 @@ const submitGoalHandler = evt => {
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<h3>
|
||||
|
||||
Weekly Totals
|
||||
</h3>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ maxWidth: 1200 }}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left">Calories</TableCell>
|
||||
<TableCell align="left">Fat (g)</TableCell>
|
||||
<TableCell align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell align="left">TransFat (g)</TableCell>
|
||||
<TableCell align="left">Carbs (g)</TableCell>
|
||||
<TableCell align="left">Fiber (g)</TableCell>
|
||||
<TableCell align="left">Sugar (g)</TableCell>
|
||||
<TableCell align="left">Protein (g)</TableCell>
|
||||
<TableCell align="left">Sodium (mg)</TableCell>
|
||||
<TableCell align="left">Potassium (mg)</TableCell>
|
||||
<TableCell align="left">Cholesterol (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}>
|
||||
|
||||
<Chip label="Calories" variant="outlined"/>
|
||||
<Chip label="Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Saturated Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Trans Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Carbs" variant="outlined"/>
|
||||
|
||||
<Chip label="Fiber" variant="outlined"/>
|
||||
|
||||
<Chip label="Sugar" variant="outlined"/>
|
||||
|
||||
<Chip label="Protein" variant="outlined"/>
|
||||
|
||||
<Chip label="Sodium" variant="outlined"/>
|
||||
|
||||
<Chip label="Potassium" variant="outlined"/>
|
||||
|
||||
<Chip label="Cholesterol" variant="outlined"/>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
Add to Food Journal
|
||||
</h2>
|
||||
<h3>
|
||||
On-Campus
|
||||
</h3>
|
||||
<form>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<TextField
|
||||
id="keywordsearch"
|
||||
label="Keyword"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
|
||||
<Button sx={{ m: 1}}
|
||||
type="search"
|
||||
variant="contained"
|
||||
size="medium">
|
||||
Search</Button>
|
||||
</form>
|
||||
|
||||
<h3>
|
||||
Off-Campus
|
||||
</h3>
|
||||
<form>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="food-input"
|
||||
label="Food Item"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="calorie-input"
|
||||
label="Calories"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="fat-input"
|
||||
label="Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="saturated_fat-input"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="trans_fat-input"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="carbs-input"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="fiber-input"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sugar-input"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="protein-input"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sodium-input"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="potassium-input"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="cholesterol-input"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default ThisWeek;
|
||||
export default Past;
|
||||
@@ -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">
|
||||
<Toolbar color='main2'>
|
||||
<AppBar className='bar' position="static">
|
||||
<Toolbar >
|
||||
<Button variant="h2" color="main" onClick={Home}sx={{
|
||||
|
||||
bgcolor: '#053B06', // theme.palette.primary.main
|
||||
@@ -250,7 +287,7 @@ const submitSearchHandler = evt => {
|
||||
|
||||
<div>
|
||||
<h1> Your Plan</h1>
|
||||
<h2> Goal for the week of: </h2>
|
||||
<h2> Goal for the week of: {week}</h2>
|
||||
|
||||
<form onSubmit={submitGoalHandler}>
|
||||
|
||||
@@ -378,294 +415,8 @@ const submitSearchHandler = evt => {
|
||||
</div>
|
||||
<br></br>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
So Far This Week:
|
||||
</h2>
|
||||
|
||||
<h3>
|
||||
|
||||
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 (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Cholesterol (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}>
|
||||
|
||||
<Chip label="Calories" variant="outlined"/>
|
||||
<Chip label="Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Saturated Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Trans Fat" variant="outlined"/>
|
||||
|
||||
<Chip label="Carbs" variant="outlined"/>
|
||||
|
||||
<Chip label="Fiber" variant="outlined"/>
|
||||
|
||||
<Chip label="Sugar" variant="outlined"/>
|
||||
|
||||
<Chip label="Protein" variant="outlined"/>
|
||||
|
||||
<Chip label="Sodium" variant="outlined"/>
|
||||
|
||||
<Chip label="Potassium" variant="outlined"/>
|
||||
|
||||
<Chip label="Cholesterol" variant="outlined"/>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
Add to Food Journal
|
||||
</h2>
|
||||
<h3>
|
||||
On-Campus
|
||||
</h3>
|
||||
<form onSubmit={submitSearchHandler}>
|
||||
|
||||
<TextField
|
||||
id="search_term"
|
||||
label="Keyword"
|
||||
size="medium"
|
||||
name="search_term"
|
||||
value={search_term}
|
||||
onChange={changeSearchHandler}
|
||||
/>
|
||||
|
||||
|
||||
<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 (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Cholesterol (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>
|
||||
Off-Campus
|
||||
</h3>
|
||||
<form onSubmit={submitOffCampusHandler}>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="item_name"
|
||||
label="Food Item"
|
||||
size="small"
|
||||
name="item_name"
|
||||
value={item_name}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="amount"
|
||||
label="Number of Servings"
|
||||
size="small"
|
||||
name="amount"
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="calories"
|
||||
label="Calories"
|
||||
size="small"
|
||||
name="calories"
|
||||
type="number"
|
||||
value={calories}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="fat"
|
||||
label="Fat (g)"
|
||||
size="small"
|
||||
name="fat_g"
|
||||
type="number"
|
||||
value={fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sat_fat"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
name="sat_fat_g"
|
||||
type="number"
|
||||
value={sat_fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="trans_fat"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
name="trans_fat_g"
|
||||
type="number"
|
||||
value={trans_fat_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
|
||||
<TextField
|
||||
id="carbs"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="carbs_g"
|
||||
type="number"
|
||||
value={carbs_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="fiber"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
name="fiber_g"
|
||||
type="number"
|
||||
value={fiber_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sugar"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
name="sugar_g"
|
||||
type="number"
|
||||
value={sugar_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="protein"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
name="protein_g"
|
||||
type="number"
|
||||
value={protein_g}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sodium"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
name="sodium_mg"
|
||||
type="number"
|
||||
value={sodium_mg}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="potassium"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
name="potassium_mg"
|
||||
type="number"
|
||||
value={potassium_mg}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="cholesterol"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
name="cholesterol_mg"
|
||||
type="number"
|
||||
value={cholesterol_mg}
|
||||
onChange={changeOffCampusHandler}
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</ThemeProvider>
|
||||
|
||||
|
||||
@@ -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> Your Plan</h1>
|
||||
<h2> Goal for the week of: </h2>
|
||||
|
||||
<form onSubmit={submitGoalHandler}>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="total_cal"
|
||||
label="Calories"
|
||||
name="total_cal"
|
||||
value={total_cal}
|
||||
size ="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_fat"
|
||||
label="Fat (g)"
|
||||
name="total_fat"
|
||||
value={total_fat}
|
||||
size="small"
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sat_fat"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
name="total_sat_fat"
|
||||
value={total_sat_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_trans_fat"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
name="total_trans_fat"
|
||||
value={total_trans_fat}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_carbs"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
name="total_carbs"
|
||||
value={total_carbs}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="total_fiber"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
name="total_fiber"
|
||||
value={total_fiber}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sugar"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
name="total_sugar"
|
||||
value={total_sugar}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_protein"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
name="total_protein"
|
||||
value={total_protein}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_sodium"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
name="total_sodium"
|
||||
value={total_sodium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_potassium"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
name="total_potassium"
|
||||
value={total_potassium}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="total_cholesterol"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
name="total_cholesterol"
|
||||
value={total_cholesterol}
|
||||
onChange={changeGoalHandler}
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size = "large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
</div>
|
||||
<br></br>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
<h1>
|
||||
|
||||
So Far This Week:
|
||||
</h2>
|
||||
</h1>
|
||||
|
||||
<h3>
|
||||
|
||||
Foods Eaten
|
||||
</h3>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table stickyHeader>
|
||||
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
|
||||
<TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
|
||||
<Table stickyHeader sx={{maxWidth:1400}}>
|
||||
<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 (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ width: 90 }} align="left">Cholesterol (mg)</TableCell>
|
||||
<TableRow sx={{maxWidth:1400}}>
|
||||
|
||||
|
||||
<TableCell style={{ maxWidth: 110}} align="left">Food</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
|
||||
<TableCell style={{ maxWidth: 70 }} align="left">Fat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 50 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 70 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ maxWidth: 80 }} align="left">Cholesterol (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>
|
||||
<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>
|
||||
{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>
|
||||
|
||||
Weekly Totals
|
||||
</h3>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table sx={{ maxWidth: 1200 }}>
|
||||
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
|
||||
<TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
|
||||
<Table stickyHeader sx={{maxWidth:1400}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="left">Calories</TableCell>
|
||||
<TableCell align="left">Fat (g)</TableCell>
|
||||
<TableCell align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell align="left">TransFat (g)</TableCell>
|
||||
<TableCell align="left">Carbs (g)</TableCell>
|
||||
<TableCell align="left">Fiber (g)</TableCell>
|
||||
<TableCell align="left">Sugar (g)</TableCell>
|
||||
<TableCell align="left">Protein (g)</TableCell>
|
||||
<TableCell align="left">Sodium (mg)</TableCell>
|
||||
<TableCell align="left">Potassium (mg)</TableCell>
|
||||
<TableCell align="left">Cholesterol (mg)</TableCell>
|
||||
<TableRow sx={{maxWidth:1400}}>
|
||||
|
||||
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
|
||||
<TableCell style={{ maxWidth: 70 }} align="left">Fat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">TransFat (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 50 }} align="left">Carbs (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 70 }} align="left">Fiber (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Sugar (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Protein (g)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Sodium (mg)</TableCell>
|
||||
<TableCell style={{ maxWidth: 90 }} align="left">Potassium (mg)</TableCell>
|
||||
<TableCell style={{ maxWidth: 80 }} align="left">Cholesterol (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>
|
||||
<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>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<h4>
|
||||
|
||||
At a glance
|
||||
</h4>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
|
||||
<Chip label="Calories" variant="outlined"/>
|
||||
<Chip label="Fat" variant="outlined"/>
|
||||
|
||||
@@ -442,136 +394,7 @@ const submitGoalHandler = evt => {
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>
|
||||
|
||||
Add to Food Journal
|
||||
</h2>
|
||||
<h3>
|
||||
On-Campus
|
||||
</h3>
|
||||
<form>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<TextField
|
||||
id="keywordsearch"
|
||||
label="Keyword"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
|
||||
<Button sx={{ m: 1}}
|
||||
type="search"
|
||||
variant="contained"
|
||||
size="medium">
|
||||
Search</Button>
|
||||
</form>
|
||||
|
||||
<h3>
|
||||
Off-Campus
|
||||
</h3>
|
||||
<form>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="food-input"
|
||||
label="Food Item"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
sx={{ paddingBottom: 1 }}
|
||||
id="calorie-input"
|
||||
label="Calories"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="fat-input"
|
||||
label="Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="saturated_fat-input"
|
||||
label="Saturated Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="trans_fat-input"
|
||||
label="Trans Fat (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="carbs-input"
|
||||
label="Carbs (g)"
|
||||
size="small"
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<TextField
|
||||
id="fiber-input"
|
||||
label="Fiber (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sugar-input"
|
||||
label="Sugar (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="protein-input"
|
||||
label="Protein (g)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="sodium-input"
|
||||
label="Sodium (mg)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="potassium-input"
|
||||
label="Potassium (mg)"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
id="cholesterol-input"
|
||||
label="Cholesterol (mg)"
|
||||
size="small"
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large">
|
||||
Submit</Button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 MiB After Width: | Height: | Size: 5.3 MiB |
Reference in New Issue
Block a user