Merged with latest dev branch.
This commit is contained in:
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "team58",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
@@ -10,8 +10,11 @@
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^12.1.3",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^2.2.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^6.2.2",
|
||||
"react-scripts": "^5.0.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
|
||||
BIN
sports-matcher/public/chief.jpg
Normal file
BIN
sports-matcher/public/chief.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
sports-matcher/public/freeman.jpg
Normal file
BIN
sports-matcher/public/freeman.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -24,6 +24,12 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
BIN
sports-matcher/public/shogun.jpg
Normal file
BIN
sports-matcher/public/shogun.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
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
|
||||
@@ -1,15 +1,16 @@
|
||||
import './App.css';
|
||||
import Filter from './Filter';
|
||||
import MatchesList from './MatchesList';
|
||||
import ReportForm from "./ReportForm";
|
||||
import SearchBar from './SearchBar';
|
||||
|
||||
import { Routes, Route, Link } from "react-router-dom";
|
||||
import SignIn from './SignIn';
|
||||
import SignUp from './SignUp';
|
||||
import Home from './Home';
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<main>
|
||||
<SearchBar />
|
||||
</main>
|
||||
<Routes>
|
||||
<Route path="" element={<Home />} />
|
||||
<Route path="sign-in" element={<SignIn />} />
|
||||
<Route path="sign-up" element={<SignUp />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
18
sports-matcher/src/Chat.js
Normal file
18
sports-matcher/src/Chat.js
Normal file
@@ -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;
|
||||
113
sports-matcher/src/ChatWindow.js
Normal file
113
sports-matcher/src/ChatWindow.js
Normal file
@@ -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;
|
||||
38
sports-matcher/src/Contact.js
Normal file
38
sports-matcher/src/Contact.js
Normal file
@@ -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;
|
||||
4
sports-matcher/src/Home.css
Normal file
4
sports-matcher/src/Home.css
Normal file
@@ -0,0 +1,4 @@
|
||||
h1, h2{
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: black;
|
||||
}
|
||||
46
sports-matcher/src/Home.js
Normal file
46
sports-matcher/src/Home.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import Homebar from './Homebar';
|
||||
import { Carousel } from 'react-bootstrap';
|
||||
import './Home.css';
|
||||
export default function Home() {
|
||||
return(
|
||||
<React.Fragment>
|
||||
<Homebar></Homebar>
|
||||
<Carousel>
|
||||
<Carousel.Item>
|
||||
<img
|
||||
src='https://d39l2hkdp2esp1.cloudfront.net/img/photo/148976/148976_00_2x.jpg'
|
||||
alt="Connect Slide"
|
||||
style={{ height: '680px', width: '2000px'}}
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<h1>Connect</h1>
|
||||
<h2>Connect with other athletes in your area!</h2>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<img
|
||||
src='https://www.groovypost.com/wp-content/uploads/2021/08/sports-calendar-featured.jpg'
|
||||
alt="Schedule Slide"
|
||||
style={{ height: '680px', width: '2000px' }}
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<h1>Schedule</h1>
|
||||
<h2>Schedule sport meets with other athletes!</h2>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
<Carousel.Item>
|
||||
<img
|
||||
src='https://i.pinimg.com/736x/dd/80/c3/dd80c3136a96c2fbf6004aef8e9619f3.jpg'
|
||||
alt="Rent Slide"
|
||||
style={{ height: '680px', width: '2000px' }}
|
||||
/>
|
||||
<Carousel.Caption>
|
||||
<h1>Rent</h1>
|
||||
<h2>Rent sports equipment from other athletes!</h2>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
</Carousel>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
44
sports-matcher/src/Homebar.js
Normal file
44
sports-matcher/src/Homebar.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import Button from '@mui/material/Button';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export default function Navbar(){
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{background: '#00226D'}}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ mr: 2, fontSize: '200%', textAlign: 'center', flexGrow: 1, marginLeft: '10%'}}
|
||||
>
|
||||
Sports Matcher
|
||||
</Typography>
|
||||
<Box sx={{display: { xs: 'none', md: 'flex' }}}>
|
||||
<Button
|
||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
||||
onClick={() => navigate('sign-up')}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
<Button
|
||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
||||
onClick={() => navigate('sign-in')}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
153
sports-matcher/src/Navbar.js
Normal file
153
sports-matcher/src/Navbar.js
Normal file
@@ -0,0 +1,153 @@
|
||||
import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Box from '@mui/material/Box';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import Container from '@mui/material/Container';
|
||||
import Button from '@mui/material/Button';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import AccountCircle from '@mui/icons-material/AccountCircle';
|
||||
import ForumIcon from '@mui/icons-material/Forum';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const pages = ['Dashboard'];
|
||||
|
||||
export default function Navbar(){
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{background: '#00226D'}}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ mr: 2, display: { xs: 'none', md: 'flex' }, fontSize: '150%', borderRight: '0.05em solid black', borderColor: 'white', paddingRight: '1.5em' }}
|
||||
>
|
||||
Sports Matcher
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
{pages.map((page) => (
|
||||
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center">{page}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="div"
|
||||
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
||||
>
|
||||
Sports Matcher
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' }, marginLeft: '2%' }}>
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page}
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%'}}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0, marginRight: '1%'}}>
|
||||
<Tooltip title="Chats">
|
||||
<IconButton sx={{ p: 0}}>
|
||||
<ForumIcon sx={{color: 'white'}}></ForumIcon>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 0 }}>
|
||||
<Tooltip title="Settings">
|
||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0}}>
|
||||
<AccountCircle sx={{color: 'white'}}></AccountCircle>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
sx={{ mt: '30px' }}
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">Profile</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseUserMenu}>
|
||||
<Typography textAlign="center">Account</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate('sign-in')}>
|
||||
<Typography textAlign="center">Sign Out</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
75
sports-matcher/src/SignIn.js
Normal file
75
sports-matcher/src/SignIn.js
Normal file
@@ -0,0 +1,75 @@
|
||||
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 { useNavigate } from 'react-router-dom';
|
||||
|
||||
export default function SignIn() {
|
||||
const navigate = useNavigate();
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
// eslint-disable-next-line no-console
|
||||
if(data.get('username') == "admin" && data.get('password') == "admin"){
|
||||
navigate('/');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'primary.main' }}>
|
||||
<AccountCircleIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
Sign in
|
||||
</Typography>
|
||||
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="username"
|
||||
label="Username"
|
||||
name="username"
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
<Link href="/sign-up" underline="always">
|
||||
{"Don't have an account?"}
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
)}
|
||||
92
sports-matcher/src/SignUp.js
Normal file
92
sports-matcher/src/SignUp.js
Normal file
@@ -0,0 +1,92 @@
|
||||
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 AccountBoxIcon from '@mui/icons-material/AccountBox';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { Link } from '@mui/material';
|
||||
import { Grid } from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export default function SignUp() {
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ m: 1, bgcolor: 'info.main' }}>
|
||||
<AccountBoxIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
Sign up
|
||||
</Typography>
|
||||
<Box component="form" noValidate sx={{ mt: 1 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
autoComplete="given-name"
|
||||
name="firstName"
|
||||
required
|
||||
fullWidth
|
||||
id="firstName"
|
||||
label="First Name"
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
id="lastName"
|
||||
label="Last Name"
|
||||
name="lastName"
|
||||
autoComplete="family-name"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email Address"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color='info'
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
<Link href="/sign-in" underline="always">
|
||||
{'Already have an account?'}
|
||||
</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
)}
|
||||
108
sports-matcher/src/chats.css
Normal file
108
sports-matcher/src/chats.css
Normal file
@@ -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);
|
||||
}
|
||||
@@ -1,13 +1,14 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
</BrowserRouter>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user