From ae1c05c94432b1515010f894c16be74e5dedf248 Mon Sep 17 00:00:00 2001
From: Sahni-Arjun <arjun.sahni@mail.utoronto.ca>
Date: Sun, 6 Mar 2022 20:49:04 -0500
Subject: [PATCH] admin functionality

---
 sports-matcher/src/Admin.css |   4 +
 sports-matcher/src/Admin.js  | 249 +++++++++++++++++++++++++++++++++++
 2 files changed, 253 insertions(+)
 create mode 100644 sports-matcher/src/Admin.css
 create mode 100644 sports-matcher/src/Admin.js

diff --git a/sports-matcher/src/Admin.css b/sports-matcher/src/Admin.css
new file mode 100644
index 0000000..59c9b92
--- /dev/null
+++ b/sports-matcher/src/Admin.css
@@ -0,0 +1,4 @@
+
+.MainTable {
+    padding : 20px;
+}
\ No newline at end of file
diff --git a/sports-matcher/src/Admin.js b/sports-matcher/src/Admin.js
new file mode 100644
index 0000000..9d48546
--- /dev/null
+++ b/sports-matcher/src/Admin.js
@@ -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
\ No newline at end of file