Tabs, and checkboxes
This commit is contained in:
Ava DeCroix
575
db_app/src/components/Past.js
Normal file
575
db_app/src/components/Past.js
Normal file
@@ -0,0 +1,575 @@
|
||||
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 Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
|
||||
|
||||
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: lightGreen[700],
|
||||
apple: red[500],
|
||||
},
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
function ThisWeek() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const Home = () => {
|
||||
navigate('/Plan');
|
||||
}
|
||||
const Menus = () => {
|
||||
navigate('/Menus');
|
||||
}
|
||||
const Past = () => {
|
||||
navigate('/Past');
|
||||
}
|
||||
const navigateLogin = () => {
|
||||
navigate('/');
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
ReactSession.set("net_id", "");
|
||||
navigateLogin();
|
||||
|
||||
}
|
||||
|
||||
const Log = () => {
|
||||
navigate('/LogMeals')
|
||||
}
|
||||
|
||||
const Progress = () => {
|
||||
navigate('/ThisWeek')
|
||||
}
|
||||
//get the start of each week and reformat to Oracle date type
|
||||
function weekStart(){
|
||||
var date_str = new Date();
|
||||
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
||||
var weekday = days[date_str.getDay()]
|
||||
|
||||
if (weekday != 'Sunday'){
|
||||
return;
|
||||
}
|
||||
|
||||
var date_str = new Date();
|
||||
var curr_day = String(date_str.getDate()).padStart(2, '0');
|
||||
const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
|
||||
|
||||
var curr_month = months[date_str.getMonth()];
|
||||
var curr_year = String(date_str.getFullYear());
|
||||
var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
|
||||
|
||||
return db_date;
|
||||
}
|
||||
|
||||
const net_id = ReactSession.get("net_id");
|
||||
|
||||
//to 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: "",
|
||||
}
|
||||
);
|
||||
|
||||
const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber,
|
||||
total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput
|
||||
|
||||
const changeGoalHandler = evt =>{
|
||||
setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
|
||||
}
|
||||
|
||||
const submitGoalHandler = evt => {
|
||||
evt.preventDefault();
|
||||
console.log(goalInput)
|
||||
Axios.post("http://3.219.93.142:8000/api/",
|
||||
{
|
||||
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]
|
||||
}).then((response) => {
|
||||
console.log(response);
|
||||
console.log(response.status);
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
//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: "",
|
||||
}
|
||||
);
|
||||
|
||||
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 changeoffCampusHandler = evt => {
|
||||
setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
|
||||
}
|
||||
|
||||
const submitoffCampusHandler = evt => {
|
||||
evt.preventDefault();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
|
||||
<AppBar position="static">
|
||||
<Toolbar variant="dense">
|
||||
<Button variant="h6" color="main" position="right" onClick={Home}>
|
||||
Home
|
||||
</Button>
|
||||
<Button variant="h6" color="main" component="div" onClick={Menus}>
|
||||
Menus
|
||||
</Button>
|
||||
<Button variant="h6"onClick={Past} >
|
||||
Past Plans</Button>
|
||||
<Button variant="h6" color="main" component="div" onClick={logout} sx={{
|
||||
':hover': {
|
||||
bgcolor: '#ffc6c4', // theme.palette.primary.main
|
||||
color: 'red',
|
||||
},
|
||||
}}>
|
||||
Log out
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<AppBar className='bar' position="static">
|
||||
<Toolbar>
|
||||
<Button variant="h2" color="main" onClick={Home}>
|
||||
Plan for {net_id}
|
||||
</Button>
|
||||
<Button variant="h2" color="main" onClick={Log}>Log Meals</Button>
|
||||
<Button variant="h2" color="main" onClick={Progress}>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>
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user