Created user dashboard.

admin functionality

sports-matcher/src/Admin.css

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

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

sports-matcher/src/CardSuggestedMatches.js

@@ -0,0 +1,20 @@
+import { Stack, Typography } from "@mui/material";
+import MatchInfo from "./matchinfo";
+
+export default function CardSuggestedMatches() {
+    return (
+        <div style={{ padding: 25 }}>
+            <Typography variant="h4" component="div">
+                Suggested
+            </Typography>
+            <Stack sx={{ margin: 2 }} direction="row" spacing={2}>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+                <MatchInfo>
+                </MatchInfo>
+            </Stack >
+        </div>
+    );
+}

sports-matcher/src/Chat.js

@@ -0,0 +1,18 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+
+class Chat extends React.Component {
+    render() {
+        return (
+            <div class="chatbubble-container">                    
+                        <div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
+                            {this.props.message}
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Chat;

sports-matcher/src/ChatWindow.js

@@ -0,0 +1,113 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+import Chat from './Chat'
+import Contact from './Contact'
+import { useState } from "react";
+
+class ChatWindow extends React.Component {
+    render() {
+        return (
+            <div class="chatcomponent">
+                <UserList />
+                <MessageList />
+                <ChatInput />
+            </div>
+        )
+    }
+}
+
+class UserList extends React.Component {
+    
+    render() {
+        return (
+            <div class="contactlist">
+                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
+                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
+                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
+            </div>
+        )
+    }
+}
+
+class MessageList extends React.Component {
+    render() {
+        return (
+            <div class="messagelist">
+                <Chat message="Got time for tennis this week, Raiden?" side="right"/>
+                <Chat message="Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?" side="left" />
+                <Chat message="Aiight, see you at 4" side="right" />
+                <Chat message="As you wish." side="left" />
+                </div>
+        )
+    }
+}
+// class ChatWindow extends React.Component {
+//     render() {
+//         return (
+//             <div>
+//                 <ChatUserList />
+//                 {/* <MessageList /> */}
+//             </div>
+//         )
+//     }
+// }
+const ChatInput = () => {
+    const [message, setMessage] = useState( '' );
+    
+    // const onKeyPress = (e) => {
+    //     // if(e.key === 'Enter'){
+    //     //     e.preventDefault(); // Ensure it is only this code that runs
+    //     //     setMessage("")
+    //     // }
+    // }
+
+    const onKeyDown = (e) => {
+        const keyCode = e.which || e.keyCode;
+
+        // 13 represents the Enter key
+        if (keyCode === 13 && !e.shiftKey) {
+            e.preventDefault();
+            setMessage("")
+        }
+    }
+
+    return (
+        // onKeyPress={(e) => onKeyPress(e)}
+      <div>
+        <textarea
+           class="chatinput"
+           value={message}
+           placeholder="Press ENTER to send, SHIFT + ENTER for new line"
+           onChange={e => setMessage(e.target.value)}
+           
+           onKeyDown={onKeyDown}
+         />
+      </div>
+    );
+  };
+class ChatInput2 extends React.Component {
+    
+    constructor(props) {
+        super(props)
+        this.setState({inputVal : ""})
+    }
+
+    handleUserInput(e) {
+        this.setState(this.setState({inputVal : e.target.value}));
+    };
+
+    render() {
+        return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line"
+                onKeyPress={(e)=>this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
+        
+    }
+    onKeyPress(e) {
+        if(e.key === 'Enter'){
+            e.preventDefault(); // Ensure it is only this code that runs
+            this.setState({inputVal : ""});
+        }
+    }
+}
+export default ChatWindow;

sports-matcher/src/Contact.js

@@ -0,0 +1,38 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css';
+
+class Contact extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            selected : this.props.selected
+        }
+    }
+    onClick() {
+        // This toggling of the contact selection is for demo purposes only
+        // Once backend is implemented, only one contact can be selected
+        if (this.state.selected === "false") {
+            this.setState({selected : "true"})
+        } else {
+            this.setState({selected : "false"})
+        }
+        
+    }
+    render() {
+        return (
+            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
+                        <div class="profilepiccontainer">
+                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
+                                alt="profile" />
+                        </div>
+                        <div class="profilenamecontainer">
+                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Contact;

sports-matcher/src/Filter.js

@@ -0,0 +1,65 @@
+import { InputLabel, MenuItem, Select, TextField, FormControl } from "@mui/material";
+
+export default function Filter() {
+    return (
+        <div>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Sport</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Tennis</MenuItem>
+                    <MenuItem value={10}>Soccer</MenuItem>
+                    <MenuItem value={20}>Golf</MenuItem>
+                    <MenuItem value={30}>Basketball</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <InputLabel id="skill-level-label">Level</InputLabel>
+                <Select
+                    labelId="skill-level-label"
+                    id="skill-level"
+                    label="Skill level"
+                    sx={{ width: 100 }}
+                >
+                    <MenuItem value={-10}>Everyone</MenuItem>
+                    <MenuItem value={10}>Beginner</MenuItem>
+                    <MenuItem value={20}>Intermediate</MenuItem>
+                    <MenuItem value={30}>Professional</MenuItem>
+                </Select>
+            </FormControl>
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Date" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Time" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Location" variant="outlined" />
+            </FormControl>
+
+            <FormControl sx={{ margin: 2 }}>
+                <TextField id="outlined-basic" label="Radius" variant="outlined" />
+            </FormControl>
+        </div>
+    );
+}

sports-matcher/src/ListSuggestedMatch.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import SportsTennisIcon from '@mui/icons-material/SportsTennis';
+import { ListItemIcon } from '@mui/material';
+
+export default function ListSuggestedMatch() {
+    return (<ListItem alignItems="flex-start">
+        <ListItemIcon>
+            <SportsTennisIcon />
+        </ListItemIcon>
+        <ListItemText
+            primary="Tennis - King of The Court"
+            secondary={
+                <React.Fragment>
+                    <Typography
+                        sx={{ display: 'inline' }}
+                        component="span"
+                        variant="body2"
+                        color="text.primary"
+                    >
+                        12:30PM - 123 Alphabet St. Toronto ON.
+                    </Typography>
+                    {" — John Smith, Alfred Baker, and Samantha Wright"}
+                </React.Fragment>
+            }
+        />
+    </ListItem>);
+}

sports-matcher/src/MatchesList.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListSuggestedMatch from './ListSuggestedMatch';
+
+export default function MatchesList() {
+    return (
+        <List sx={{ width: '100%' }}>
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+            <ListSuggestedMatch></ListSuggestedMatch>
+            <Divider variant="inset" component="li" />
+        </List>
+    );
+}

sports-matcher/src/ReportForm.js

@@ -0,0 +1,21 @@
+import FormControl from "@mui/material/FormControl";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import TextField from "@mui/material/TextField";
+
+export default function ReportForm() {
+    return (
+        <FormControl sx={{ width: '80%' }}>
+            <OutlinedInput
+                sx={{ margin: 1 }}
+                placeholder="Please enter user email." />
+            <TextField
+                id="outlined-multiline-static"
+                label="Multiline"
+                multiline
+                rows={5}
+                sx={{ margin: 1 }}
+                defaultValue="Reason for suspension..."
+            />
+        </FormControl>
+    );
+}

sports-matcher/src/SearchBar.js

@@ -0,0 +1,10 @@
+import { Button, TextField } from "@mui/material";
+
+export default function SearchBar() {
+    return (
+        <div>
+            <TextField sx={{ margin: 1 }} id="standard-basic" label="Search" variant="outlined" />
+            <Button sx={{ margin: 1 }} variant="outlined">Search</Button>
+        </div>
+    );
+}

sports-matcher/src/UserDashboard.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import TextField from '@mui/material/TextField';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { Link } from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Filter from "./Filter";
+import SearchBar from "./SearchBar";
+import { useNavigate } from 'react-router-dom';
+import MatchesList from './MatchesList';
+
+export default function UserDashboard() {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <SearchBar></SearchBar>
+      <Filter></Filter>
+      <MatchesList></MatchesList>
+    </div>
+  );
+}

sports-matcher/src/chats.css

@@ -0,0 +1,108 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+.chatcomponent > * {
+    display: inline-block;
+}
+.contact {
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: 1px;
+    border-color:rgb(75, 75, 75);
+
+    background-color: rgb(80, 80, 80);
+    height: 70px;
+
+    user-select: none;
+}
+.contact.dark {
+    background-color: black;
+}
+.contactlist {
+    height: 500px;
+    width: 200px;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border-radius: 2%;
+    background: rgb(48, 45, 45);
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    text-align: center;
+}
+.messagelist {
+    height: 400px;
+    width: 800px;
+    top: 0px;
+    left: 200px;
+
+    position: absolute;
+    background-color: rgb(80, 80, 80);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.messagelist > * {
+    display: block;
+}
+.profilepiccontainer {
+    height: 60px;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    float: left;
+}
+.profilepic {
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+}
+.profilenamecontainer {
+    text-align: center;
+    padding: 7%;
+}
+.profilename {
+    color: white;
+}
+.chatbubble {
+	margin-top: 20px;
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+	width: auto;
+	height: auto;
+    padding: 10px;
+	
+    border-radius: 10px;
+}
+.left {
+    background-color: rgba(0, 57, 163, 0.637);
+    margin-right: 35px;
+    color: white;
+    float: auto;
+}
+.right {
+    background-color: khaki;
+    color: black;
+    margin-right: 35px;
+    float: right;
+}
+.chatbubble-container {
+    width: 800px;
+    height: auto;
+    float: left;
+}
+.chatinput {
+    background-color: rgb(75, 75, 75);
+    top: 400px;
+    left: 200px;
+    position: absolute;
+
+    height: 92px;
+    width: 793px;
+
+    color: antiquewhite;
+
+    border-width: 2px;
+    border-color: rgb(48, 45, 45);
+}

sports-matcher/src/matchinfo.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import { List, ListItemAvatar } from '@mui/material';
+import { ListItem } from '@mui/material';
+import { ListItemText } from '@mui/material';
+import PeopleIcon from '@mui/icons-material/People';
+import SportsIcon from '@mui/icons-material/Sports';
+import MapIcon from '@mui/icons-material/Map';
+import EventIcon from '@mui/icons-material/Event';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+
+export default function MatchInfo() {
+    return (
+        <Card sx={{ maxWidth: 400 }}>
+            <CardContent>
+                <Typography sx={{ fontSize: 24 }} component="div">
+                    King of the Court!
+                </Typography>
+                <List>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <SportsIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Sport" secondary="Tennis" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <PeopleIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Participants" secondary="John Smith, Bob Williams, and Candice Baker" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <MapIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Location" secondary="Athletic Center - 55 Harbord St, Toronto, ON M5S 2W6" />
+                    </ListItem>
+                    <ListItem>
+                        <ListItemAvatar>
+                            <EventIcon />
+                        </ListItemAvatar>
+                        <ListItemText primary="Time" secondary="1:00PM Tomorrow (January 13th)" />
+                    </ListItem>
+                </List>
+            </CardContent>
+            <CardActions>
+                <Button size="Medium">Participate</Button>
+            </CardActions>
+        </Card>
+    );
+}