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

Merge pull request #3 from csc309-winter-2022/admin

Browse Source 
admin functionality
This commit is contained in:
Arjun Sahni 2022-03-06 20:51:53 -05:00 committed by GitHub
commit 641eca074f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,4 @@
.MainTable {
padding : 20px;
}

249
sports-matcher/src/Admin.js Normal file
View File

@ -0,0 +1,249 @@
import * as React from 'react';
import './Admin.css';
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';
class AdminTable extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [
{ id: 1, username: 'username1', name: 'name1', email: 'user1@email.com', phone: '123-456-7890' },
{ id: 2, username: 'username2', name: 'name2', email: 'user2@email.com', phone: '123-456-7890' },
{ id: 3, username: 'username3', name: 'name3', email: 'user3@email.com', phone: '123-456-7890' },
{ id: 4, username: 'username4', name: 'name4', email: 'user4@email.com', phone: '123-456-7890' }
],
suspendedUsers: [
{ id: 1, username: 'suspended1', name: 's1', email: 's1@email.com', phone: '123-456-7890' },
{ id: 2, username: 'suspended2', name: 's2', email: 's2@email.com', phone: '123-456-7890' },
{ id: 3, username: 'suspended3', name: 's3', email: 's3@email.com', phone: '123-456-7890' },
{ id: 4, username: 'suspended4', name: 's4', email: 's4@email.com', phone: '123-456-7890' }
],
matches: [
{ id: 1, sport: "Tennis", date: '08/08/2021', location: 'toronto', description: 'Tennis match' },
{ id: 2, sport: "Basketball", date: '09/09/2021', location: 'toronto', description: 'Basketball match' }
],
buttonColors: ['black', '', '']
}
}
EditButton() {
return <Button onClick={() => {
alert('clicked');
}} variant="contained">Edit</Button>;
}
DeleteButtonClick() {
return (
<Container component="main" maxWidth="xs">
<Typography>Are you sure you want to delete this user?</Typography>
<Button onClick={() => {
alert('User deleted');
}} variant="contained">Yes</Button>
</Container>
)
}
NewDeleteButtonClick() {
return (<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>)
}
DeleteButton() {
return <Button onClick={() => {
alert('User deleted.');
}} variant="contained">Delete</Button>;
}
PardonButton() {
return <Button onClick={() => {
alert('User pardoned.');
}} variant="contained">Pardon</Button>;
}
userTableData() {
return this.state.users.map((user) => {
const { id, username, name, email, phone } = user;
return (
<TableRow>
<TableCell>{id}</TableCell>
<TableCell>{username}</TableCell>
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
</TableRow>
)
})
}
suspendedUserTableData() {
return this.state.suspendedUsers.map((user) => {
const { id, username, name, email, phone } = user
return (
<TableRow>
<TableCell>{id}</TableCell>
<TableCell>{username}</TableCell>
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.PardonButton()}</TableCell>
</TableRow>
)
})
}
matchTableData() {
return this.state.matches.map((match) => {
const { id, sport, date, location, description } = match
return (
<TableRow>
<TableCell>{id}</TableCell>
<TableCell>{sport}</TableCell>
<TableCell>{date}</TableCell>
<TableCell>{location}</TableCell>
<TableCell>{description}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
</TableRow>
)
})
}
matchTableHead() {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Sport</TableCell>
<TableCell>Date</TableCell>
<TableCell>Location</TableCell>
<TableCell>Description</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
);
}
suspendedUserTableHead() {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Username</TableCell>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Phone</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
);
}
userTableHead() {
return (
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Username</TableCell>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
<TableCell>Phone</TableCell>
<TableCell></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
);
}
selectTable() {
this.setState({ buttonColors: ['', '', ''] });
}
renderTableHead() {
if (this.state.buttonColors[0] === 'black') {
return this.matchTableHead();
} else if (this.state.buttonColors[1] === 'black') {
return this.userTableHead();
} else {
return this.suspendedUserTableHead();
}
}
renderTableData() {
if (this.state.buttonColors[0] === 'black') {
return this.matchTableData();
} else if (this.state.buttonColors[1] === 'black') {
return this.userTableData();
} else {
return this.suspendedUserTableData();
}
}
render() {
return (
<div>
<h1 id='title'>Administration</h1>
<div className='ButtonList'>
<Button onClick={() => {
this.setState({ buttonColors: ['black', '', ''] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[0],
}} variant="outlined">Matches</Button>
<Button onClick={() => {
this.setState({ buttonColors: ['', 'black', ''] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[1],
}} variant="outlined">Users</Button>
<Button onClick={() => {
this.setState({ buttonColors: ['', '', 'black'] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[2],
}} variant="outlined">Suspended Users</Button></div>
<div className='MainTable'>
<TableContainer
component={Paper}
variant="outlined"
>
<Table>
{this.renderTableHead()}
<TableBody>
{this.renderTableData()}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
)
}
}
export default AdminTable