college_archive/advanced_db
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed layout of page

Browse Source
This commit is contained in:
Sunrise
2023-04-30 01:55:36 -04:00
parent 2dfbf9abbd
commit cd1510f573
1 changed files with 355 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
db_app/src/components/Plan.js
View File

@@ -22,9 +22,13 @@ import MenuItem from '@mui/material/MenuItem';
import {red, green, lightBlue, lightGreen} from '@mui/material/colors'; import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles'; import { ThemeProvider, createTheme } from '@mui/material/styles';
import { ReactSession } from 'react-client-session'; 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';
const theme = createTheme({ const theme = createTheme({
palette: { palette: {
@@ -105,137 +109,360 @@ const handleSubmit = evt => {
} }
return ( return (
<ThemeProvider theme={theme}>
<div>
<AppBar position="static">
<Toolbar variant="dense">
<Button variant="h6" color="main" position="right" onClick={Home}>
Home
</Button>
<Button variant="h6" color="main" component="div" onClick={Menus}>
Menus
</Button>
<Button variant="h6"onClick={Past} >
Past Plans</Button>
<Button variant="h6" color="main" component="div" onClick={logout} sx={{
':hover': {
bgcolor: '#ffc6c4', // theme.palette.primary.main
color: 'red',
},
}}>
Log out
</Button>
</Toolbar>
</AppBar>
</div>
<div>
<h1>&nbsp; Your Plan</h1>
<h2>&nbsp; &nbsp;Goal for the week of: </h2>
<form>
<ThemeProvider theme={theme}> &nbsp; &nbsp;
<div> <TextField
<AppBar position="static"> sx={{ paddingBottom: 1 }}
<Toolbar variant="dense"> id="calorie-input"
<Button variant="h6" color="main" position="right" onClick={Home}> label="Calories"
Home</Button> size ="small"
<Button variant="h6" color="main" component="div" onClick={Menus}> />
Menus &nbsp; &nbsp;
</Button> <TextField
<Button variant="h6"onClick={Past} > id="fat-input"
Past Plans</Button> label="Fat (g)"
<Button variant="h6" color="main" component="div" onClick={logout} sx={{ size="small"
':hover': { />
bgcolor: '#ffc6c4', // theme.palette.primary.main &nbsp; &nbsp;
color: 'red', <TextField
}, id="saturated_fat-input"
}}> label="Saturated Fat (g)"
Log out size="small"
</Button> />
&nbsp; &nbsp;
</Toolbar> <TextField
</AppBar> id="trans_fat-input"
</div> label="Trans Fat (g)"
<div> size="small"
<h1>&nbsp; Your Plan</h1> />
<h2>&nbsp; &nbsp;Goal for the week of: </h2> &nbsp; &nbsp;
<TextField
<form> id="carbs-input"
<>&nbsp; &nbsp;</> label="Carbs (g)"
<TextField size="small"
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>
<br></br> <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;
<div> <Button
<h2> type="submit"
variant="contained"
size = "large">
Submit</Button>
</form>
</div>
<br></br>
<div>
<h2>
&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="lect">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>
<h3> &nbsp; &nbsp;
On-Campus
</h3>
<form>
&nbsp; &nbsp; &nbsp; &nbsp;
So Far This Week: <FormControl sx={{minWidth:170 }}>
</h2> <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
</div> <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>
<div>
<h2>
&nbsp; &nbsp; &nbsp; &nbsp;
Add to Food Journal <TextField
</h2> id="keywordsearch"
<h3> &nbsp; &nbsp; &nbsp; label="Keyword"
On-Campus size="medium"
</h3> />
<h3> &nbsp; &nbsp; &nbsp;
Off-Campus
</h3>
</div>
&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> </ThemeProvider>
); );