admin functionality
This commit is contained in:
Sahni-Arjun
parent
4c75dc2c75
commit
ae1c05c944
4
sports-matcher/src/Admin.css
Normal file
4
sports-matcher/src/Admin.css
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
.MainTable {
|
||||
padding : 20px;
|
||||
}
|
||||
249
sports-matcher/src/Admin.js
Normal file
249
sports-matcher/src/Admin.js
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user