ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor changes, added navbar to admin

Browse Source
This commit is contained in:
Sahni-Arjun 2022-03-06 21:01:56 -05:00
parent a1ed8d14fa
commit 528cb80c1f
4 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sports-matcher/src/Admin.css
View File

@ -1,4 +1,8 @@
.MainTable { .MainTable {
padding : 20px; padding : 20px;
}
.Title {
margin-top: 40px;
} }

35
sports-matcher/src/Admin.js
View File

@ -4,6 +4,7 @@ import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container'; import Container from '@mui/material/Container';
import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material'; import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
import Navbar from './Navbar';
@ -36,14 +37,14 @@ class AdminTable extends React.Component {
} }
EditButton() { editButton() {
return <Button onClick={() => { return <Button onClick={() => {
alert('clicked'); alert('clicked');
}} variant="contained">Edit</Button>; }} variant="contained">Edit</Button>;
} }
DeleteButtonClick() { deleteButtonClick() {
return ( return (
<Container component="main" maxWidth="xs"> <Container component="main" maxWidth="xs">
@ -55,20 +56,27 @@ class AdminTable extends React.Component {
) )
} }
NewDeleteButtonClick() { newDeleteButtonClick() {
return (<form onsubmit="console.log('You clicked submit.'); return false"> return (<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form>) </form>)
} }
DeleteButton() { deleteButton() {
return <Button onClick={() => { return <Button onClick={() => {
alert('User deleted.'); alert('User deleted.');
}} variant="contained">Delete</Button>; }} variant="contained">Delete</Button>;
} }
PardonButton() { matchDeleteButton() {
return <Button onClick={() => {
alert('Match deleted.');
}} variant="contained">Delete</Button>;
}
pardonButton() {
return <Button onClick={() => { return <Button onClick={() => {
alert('User pardoned.'); alert('User pardoned.');
}} variant="contained">Pardon</Button>; }} variant="contained">Pardon</Button>;
@ -85,8 +93,8 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell> <TableCell>{name}</TableCell>
<TableCell>{email}</TableCell> <TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell> <TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell> <TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell> <TableCell>{this.editButton()}</TableCell>
</TableRow> </TableRow>
) )
}) })
@ -102,9 +110,9 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell> <TableCell>{name}</TableCell>
<TableCell>{email}</TableCell> <TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell> <TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell> <TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell> <TableCell>{this.editButton()}</TableCell>
<TableCell>{this.PardonButton()}</TableCell> <TableCell>{this.pardonButton()}</TableCell>
</TableRow> </TableRow>
) )
}) })
@ -120,8 +128,8 @@ class AdminTable extends React.Component {
<TableCell>{date}</TableCell> <TableCell>{date}</TableCell>
<TableCell>{location}</TableCell> <TableCell>{location}</TableCell>
<TableCell>{description}</TableCell> <TableCell>{description}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell> <TableCell>{this.matchDeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell> <TableCell>{this.editButton()}</TableCell>
</TableRow> </TableRow>
) )
}) })
@ -208,7 +216,8 @@ class AdminTable extends React.Component {
render() { render() {
return ( return (
<div> <div>
<h1 id='title'>Administration</h1> <Navbar></Navbar>
<h1 className='Title'>Administration</h1>
<div className='ButtonList'> <div className='ButtonList'>
<Button onClick={() => { <Button onClick={() => {
this.setState({ buttonColors: ['black', '', ''] }); this.setState({ buttonColors: ['black', '', ''] });

2
sports-matcher/src/App.js
View File

@ -2,6 +2,7 @@ import './App.css';
import { Routes, Route, Link } from "react-router-dom"; import { Routes, Route, Link } from "react-router-dom";
import SignIn from './SignIn'; import SignIn from './SignIn';
import SignUp from './SignUp'; import SignUp from './SignUp';
import Admin from './Admin';
import Home from './Home'; import Home from './Home';
function App() { function App() {
return ( return (
@ -10,6 +11,7 @@ function App() {
<Route path="" element={<Home />} /> <Route path="" element={<Home />} />
<Route path="sign-in" element={<SignIn />} /> <Route path="sign-in" element={<SignIn />} />
<Route path="sign-up" element={<SignUp />} /> <Route path="sign-up" element={<SignUp />} />
<Route path="admin" element={<Admin />} />
</Routes> </Routes>
</div> </div>
); );

40
sports-matcher/src/Navbar.js
View File

@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
const pages = ['Dashboard']; const pages = ['Dashboard'];
export default function Navbar(){ export default function Navbar() {
const [anchorElNav, setAnchorElNav] = React.useState(null); const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null); const [anchorElUser, setAnchorElUser] = React.useState(null);
@ -38,7 +38,7 @@ export default function Navbar(){
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<AppBar position="static" sx={{background: '#00226D'}}> <AppBar position="static" sx={{ background: '#00226D' }}>
<Container maxWidth="xl"> <Container maxWidth="xl">
<Toolbar disableGutters> <Toolbar disableGutters>
<Typography <Typography
@ -99,24 +99,24 @@ export default function Navbar(){
<Button <Button
key={page} key={page}
onClick={handleCloseNavMenu} onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}} sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
> >
{page} {page}
</Button> </Button>
))} ))}
</Box> </Box>
<Box sx={{ flexGrow: 0, marginRight: '1%'}}> <Box sx={{ flexGrow: 0, marginRight: '1%' }}>
<Tooltip title="Chats"> <Tooltip title="Chats">
<IconButton sx={{ p: 0}}> <IconButton sx={{ p: 0 }}>
<ForumIcon sx={{color: 'white'}}></ForumIcon> <ForumIcon sx={{ color: 'white' }}></ForumIcon>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</Box> </Box>
<Box sx={{ flexGrow: 0 }}> <Box sx={{ flexGrow: 0 }}>
<Tooltip title="Settings"> <Tooltip title="Settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}> <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<AccountCircle sx={{color: 'white'}}></AccountCircle> <AccountCircle sx={{ color: 'white' }}></AccountCircle>
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Menu <Menu
@ -135,15 +135,15 @@ export default function Navbar(){
open={Boolean(anchorElUser)} open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu} onClose={handleCloseUserMenu}
> >
<MenuItem onClick={handleCloseUserMenu}> <MenuItem onClick={handleCloseUserMenu}>
<Typography textAlign="center">Profile</Typography> <Typography textAlign="center">Profile</Typography>
</MenuItem> </MenuItem>
<MenuItem onClick={handleCloseUserMenu}> <MenuItem onClick={handleCloseUserMenu}>
<Typography textAlign="center">Account</Typography> <Typography textAlign="center">Account</Typography>
</MenuItem> </MenuItem>
<MenuItem onClick={() => navigate('sign-in')}> <MenuItem onClick={() => navigate('/sign-in')}>
<Typography textAlign="center">Sign Out</Typography> <Typography textAlign="center">Sign Out</Typography>
</MenuItem> </MenuItem>
</Menu> </Menu>
</Box> </Box>
</Toolbar> </Toolbar>