Compare commits
16 Commits
admin
...
add-user-d
| Author | SHA1 | Date | |
|---|---|---|---|
| 6a9e677043 | |||
| caed17bc8e | |||
| d402a67266 | |||
| c1fe10ddc8 | |||
| 38d9267bff | |||
|
641eca074f | ||
|
9c583ce5e0 | ||
|
d9b0c827c8 | ||
|
|
e1befed115 | ||
|
|
0a1323da8a | ||
|
|
7e17e1c9e9 | ||
|
|
ab80301f31 | ||
|
|
c332594b40 | ||
|
|
fa8c2e7cf9 | ||
| ffe8dad9ff | |||
| 1e0f79387a |
27566
sports-matcher/package-lock.json
generated
27566
sports-matcher/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,7 +10,9 @@
|
|||||||
"@testing-library/jest-dom": "^5.16.2",
|
"@testing-library/jest-dom": "^5.16.2",
|
||||||
"@testing-library/react": "^12.1.3",
|
"@testing-library/react": "^12.1.3",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"bootstrap": "^5.1.3",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
"react-bootstrap": "^2.2.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.2",
|
"react-router-dom": "^6.2.2",
|
||||||
"react-scripts": "^5.0.0",
|
"react-scripts": "^5.0.0",
|
||||||
|
|||||||
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.
|
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`.
|
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>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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 |
@@ -2,10 +2,12 @@ import './App.css';
|
|||||||
import { Routes, Route, Link } from "react-router-dom";
|
import { Routes, Route, Link } from "react-router-dom";
|
||||||
import SignIn from './SignIn';
|
import SignIn from './SignIn';
|
||||||
import SignUp from './SignUp';
|
import SignUp from './SignUp';
|
||||||
|
import Home from './Home';
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Routes>
|
<Routes>
|
||||||
|
<Route path="" element={<Home />} />
|
||||||
<Route path="sign-in" element={<SignIn />} />
|
<Route path="sign-in" element={<SignIn />} />
|
||||||
<Route path="sign-up" element={<SignUp />} />
|
<Route path="sign-up" element={<SignUp />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
20
sports-matcher/src/CardSuggestedMatches.js
Normal file
20
sports-matcher/src/CardSuggestedMatches.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
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;
|
||||||
65
sports-matcher/src/Filter.js
Normal file
65
sports-matcher/src/Filter.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
30
sports-matcher/src/ListSuggestedMatch.js
Normal file
30
sports-matcher/src/ListSuggestedMatch.js
Normal file
@@ -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>);
|
||||||
|
}
|
||||||
19
sports-matcher/src/MatchesList.js
Normal file
19
sports-matcher/src/MatchesList.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
21
sports-matcher/src/ReportForm.js
Normal file
21
sports-matcher/src/ReportForm.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
sports-matcher/src/SearchBar.js
Normal file
10
sports-matcher/src/SearchBar.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,8 +8,18 @@ import Typography from '@mui/material/Typography';
|
|||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import { Link } from '@mui/material';
|
import { Link } from '@mui/material';
|
||||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
export default function SignIn() {
|
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 (
|
return (
|
||||||
<Container component="main" maxWidth="xs">
|
<Container component="main" maxWidth="xs">
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
@@ -27,15 +37,15 @@ export default function SignIn() {
|
|||||||
<Typography component="h1" variant="h5">
|
<Typography component="h1" variant="h5">
|
||||||
Sign in
|
Sign in
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box component="form" noValidate sx={{ mt: 1 }}>
|
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
|
||||||
<TextField
|
<TextField
|
||||||
margin="normal"
|
margin="normal"
|
||||||
required
|
required
|
||||||
fullWidth
|
fullWidth
|
||||||
id="email"
|
id="username"
|
||||||
label="Email Address"
|
label="Username"
|
||||||
name="email"
|
name="username"
|
||||||
autoComplete="email"
|
autoComplete="username"
|
||||||
autoFocus
|
autoFocus
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography';
|
|||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import { Link } from '@mui/material';
|
import { Link } from '@mui/material';
|
||||||
import { Grid } from '@mui/material';
|
import { Grid } from '@mui/material';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
export default function SignUp() {
|
export default function SignUp() {
|
||||||
return (
|
return (
|
||||||
|
|||||||
25
sports-matcher/src/UserDashboard.js
Normal file
25
sports-matcher/src/UserDashboard.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
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);
|
||||||
|
}
|
||||||
54
sports-matcher/src/matchinfo.js
Normal file
54
sports-matcher/src/matchinfo.js
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user