ydeng/sports-matcher
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 {
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 Container from '@mui/material/Container';
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={() => {
alert('clicked');
}} variant="contained">Edit</Button>;
}
DeleteButtonClick() {
deleteButtonClick() {
return (
<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">
<button type="submit">Submit</button>
</form>)
}
DeleteButton() {
deleteButton() {
return <Button onClick={() => {
alert('User deleted.');
}} variant="contained">Delete</Button>;
}
PardonButton() {
matchDeleteButton() {
return <Button onClick={() => {
alert('Match deleted.');
}} variant="contained">Delete</Button>;
}
pardonButton() {
return <Button onClick={() => {
alert('User pardoned.');
}} variant="contained">Pardon</Button>;
@ -85,8 +93,8 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
</TableRow>
)
})
@ -102,9 +110,9 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.PardonButton()}</TableCell>
<TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
<TableCell>{this.pardonButton()}</TableCell>
</TableRow>
)
})
@ -120,8 +128,8 @@ class AdminTable extends React.Component {
<TableCell>{date}</TableCell>
<TableCell>{location}</TableCell>
<TableCell>{description}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.matchDeleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
</TableRow>
)
})
@ -208,7 +216,8 @@ class AdminTable extends React.Component {
render() {
return (
<div>
<h1 id='title'>Administration</h1>
<Navbar></Navbar>
<h1 className='Title'>Administration</h1>
<div className='ButtonList'>
<Button onClick={() => {
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 SignIn from './SignIn';
import SignUp from './SignUp';
import Admin from './Admin';
import Home from './Home';
function App() {
return (
@ -10,6 +11,7 @@ function App() {
<Route path="" element={<Home />} />
<Route path="sign-in" element={<SignIn />} />
<Route path="sign-up" element={<SignUp />} />
<Route path="admin" element={<Admin />} />
</Routes>
</div>
);

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

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