ydeng/sports-matcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished admin frontend

Browse Source
This commit is contained in:
Sahni-Arjun 2022-04-06 22:09:03 -04:00
parent 54b01f81c5
commit 7c8e37aea8
4 changed files with 224 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sports-matcher/client/src/Layout.js
View File

@ -8,6 +8,7 @@ import { Container, Nav, NavbarBrand } from "react-bootstrap";
import NavbarToggle from "react-bootstrap/esm/NavbarToggle"; import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse"; import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Admin from "./pages/NewAdmin";
import Login from "./pages/Login"; import Login from "./pages/Login";
export default class Layout extends React.Component { export default class Layout extends React.Component {
@ -34,6 +35,7 @@ export default class Layout extends React.Component {
<Route path="/" element={<Welcome />} /> <Route path="/" element={<Welcome />} />
<Route path="/dashboard" element={<Dashboard />} /> <Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/admin" element={<Admin />} />
</Routes> </Routes>
</main> </main>
<footer> <footer>

252
sports-matcher/client/src/pages/Admin.js
View File

@ -1,252 +0,0 @@
/* eslint-disable react/jsx-key */
import React from "react";
import "../styles/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 key={user.id}>
<TableCell>{username}</TableCell>
<TableCell>{id}</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 key={user.id}>
<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 key={match.id}>
<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 (<h1>RANDOM TEXT</h1>); }
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;

210
sports-matcher/client/src/pages/NewAdmin.js Normal file
View File

@ -0,0 +1,210 @@
import React from "react";
import { Button, Table } from "react-bootstrap";
import "../styles/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";
// import { apiClient } from "../utils/httpClients.js";
// import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
// import { needUser } from "../utils/routing.js";
export default class Admin 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", "", ""]
};
}
DeleteButton() {
return <Button onClick={() => {
alert("User deleted.");
}} variant="outline-secondary">Delete</Button>;
}
PardonButton() {
return <Button onClick={() => {
alert("User pardoned.");
}} variant="outline-secondary">Pardon</Button>;
}
EditButton() {
return <Button onClick={() => {
alert("clicked");
}} variant="outline-secondary">Edit</Button>;
}
userTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
matchTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Sport</th>
<th>Date</th>
<th>Location</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
userTableData() {
return this.state.users.map((user) => {
const { id, username, name, email, phone } = user;
return (
<tr key={id}>
<td>{id}</td>
<td>{username}</td>
<td>{name}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
</tr>
);
});
}
susUserTableData() {
return this.state.suspendedUsers.map((user) => {
const { id, username, name, email, phone } = user;
return (
<tr key={id}>
<td>{id}</td>
<td>{username}</td>
<td>{name}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
<td>{this.PardonButton()}</td>
</tr>
);
});
}
matchTableData() {
return this.state.matches.map((match) => {
const { id, sport, date, location, description } = match;
return (
<tr key={id}>
<td>{id}</td>
<td>{sport}</td>
<td>{date}</td>
<td>{location}</td>
<td>{description}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
<td>{this.PardonButton()}</td>
</tr>
);
});
}
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.userTableHead();
}
}
renderTableData() {
if (this.state.buttonColors[0] === "black") {
return this.matchTableData();
} else if (this.state.buttonColors[1] === "black") {
return this.userTableData();
} else {
return this.susUserTableData();
}
}
render() {
return (
<React.Fragment>
<div className='center'>
<h1 id='title'>Administration</h1>
<Button className='somespace' onClick={() => {
this.setState({ buttonColors: ["black", "", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[0],
}} variant="outline-secondary">Matches</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "black", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[1],
}} variant="outline-secondary">Users</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "", "black"] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[2],
}} variant="outline-secondary">Suspended Users</Button></div>
<Table striped bordered hover>
{this.renderTableHead()}
<tbody>
{this.renderTableData()}
{/* {this.matchUserTableData()} */}
</tbody>
</Table>
</React.Fragment>
);
}
}

13
sports-matcher/client/src/styles/Admin.css
View File

@ -1,4 +1,15 @@
.MainTable { .MainTable {
padding : 20px; padding : 20px;
} }
.center {
text-align: center;
padding: 21px;
}
.somespace {
padding: 17px;
}