16 Commits

Author SHA1 Message Date
1e62ba70d1 Changed to showing visible participate button. 2022-03-07 20:51:25 -06:00
fba8212aeb Fixed access to dashboard page. 2022-03-07 20:49:43 -06:00
5c7e26a1a9 Added package-lock.json to .gitignore. 2022-03-07 20:37:10 -06:00
Arjun Sahni
e773477fb0 Merge pull request #5 from csc309-winter-2022/develop
Develop
2022-03-06 21:51:05 -05:00
Arjun Sahni
196c36444d Update README.md 2022-03-06 21:50:24 -05:00
Hansi Xu
329cc7c74f Merge branch 'main' of https://github.com/csc309-winter-2022/team58 2022-03-06 21:37:58 -05:00
Hansi Xu
30c407563d Fixed chat 2022-03-06 21:37:30 -05:00
Piyush Sharma
4f338a2005 Merge branch 'main' of https://github.com/csc309-winter-2022/team58 2022-03-06 21:35:14 -05:00
Piyush Sharma
b717c94e4e Added comment 2022-03-06 21:35:10 -05:00
Piyush Sharma
c7cd9481f3 Update README.md 2022-03-06 21:25:18 -05:00
Piyush Sharma
340acfa2ed Updated Readme 2022-03-06 21:22:50 -05:00
Sahni-Arjun
532b5d3876 minor changes 2022-03-06 21:13:11 -05:00
Sahni-Arjun
528cb80c1f minor changes, added navbar to admin 2022-03-06 21:01:56 -05:00
Arjun Sahni
a1ed8d14fa Merge pull request #4 from csc309-winter-2022/develop
Develop
2022-03-06 20:52:17 -05:00
Hansi Xu
7ea36e01e5 Merge branch 'develop' 2022-03-06 20:32:40 -05:00
Piyush Sharma
61c138f5c3 Merge pull request #2 from csc309-winter-2022/develop
Merging authentication and homepage into main branch
2022-03-06 20:27:55 -05:00
11 changed files with 162 additions and 112 deletions

View File

@@ -1 +1,21 @@
# team58
Sports Matcher is an application that allows users to connect with other athletes, schedule sports meets, and rent sports equipment!
**Built Using**
It is built using the React framework and the Material UI and React Bootstrap libraries.
**Instructions**
To use Sports Matcher, navigate to the sports-matcher directory in the repository and run the commands `npm i` and `npm start` in order. This should launch a localhost window in your browser which shows the homepage.
From here you can Sign In to your account using the username "admin" and password "admin" OR using the username "user" and password "user" as specified in the handout.
Signing in as 'admin' will take you to the admin page. You will be able to see a list of current matches, users and suspended users. You will need to click the appropriate button for the correct table to appear.
Every page has a navbar at the top. There is a chat and profile icon. Clicking on the chat icon will take you to the chat page. From the profile icon you can sign out.

View File

@@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json

View File

@@ -2,3 +2,7 @@
.MainTable {
padding : 20px;
}
.Title {
margin-top: 40px;
}

View File

@@ -4,6 +4,7 @@ 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 Navbar from './Navbar';
@@ -36,14 +37,14 @@ class AdminTable extends React.Component {
}
EditButton() {
editButton() {
return <Button onClick={() => {
alert('clicked');
}} variant="contained">Edit</Button>;
}
DeleteButtonClick() {
deleteButtonClick() {
return (
<Container component="main" maxWidth="xs">
@@ -55,20 +56,27 @@ class AdminTable extends React.Component {
)
}
NewDeleteButtonClick() {
newDeleteButtonClick() {
return (<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>)
}
DeleteButton() {
deleteButton() {
return <Button onClick={() => {
alert('User deleted.');
}} variant="contained">Delete</Button>;
}
PardonButton() {
matchDeleteButton() {
return <Button onClick={() => {
alert('Match deleted.');
}} variant="contained">Delete</Button>;
}
pardonButton() {
return <Button onClick={() => {
alert('User pardoned.');
}} variant="contained">Pardon</Button>;
@@ -85,8 +93,8 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
</TableRow>
)
})
@@ -102,9 +110,9 @@ class AdminTable extends React.Component {
<TableCell>{name}</TableCell>
<TableCell>{email}</TableCell>
<TableCell>{phone}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.PardonButton()}</TableCell>
<TableCell>{this.deleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
<TableCell>{this.pardonButton()}</TableCell>
</TableRow>
)
})
@@ -120,8 +128,8 @@ class AdminTable extends React.Component {
<TableCell>{date}</TableCell>
<TableCell>{location}</TableCell>
<TableCell>{description}</TableCell>
<TableCell>{this.DeleteButton()}</TableCell>
<TableCell>{this.EditButton()}</TableCell>
<TableCell>{this.matchDeleteButton()}</TableCell>
<TableCell>{this.editButton()}</TableCell>
</TableRow>
)
})
@@ -208,7 +216,8 @@ class AdminTable extends React.Component {
render() {
return (
<div>
<h1 id='title'>Administration</h1>
<Navbar></Navbar>
<h1 className='Title'>Administration</h1>
<div className='ButtonList'>
<Button onClick={() => {
this.setState({ buttonColors: ['black', '', ''] });

View File

@@ -2,14 +2,21 @@ import './App.css';
import { Routes, Route, Link } from "react-router-dom";
import SignIn from './SignIn';
import SignUp from './SignUp';
import Admin from './Admin';
import Home from './Home';
import ChatWindow from './ChatWindow';
import UserDashboard from "./UserDashboard";
function App() {
return (
<div className="App">
<Routes>
<Route path="" element={<Home />} />
<Route path="dashboard" element={<UserDashboard />} />
<Route path="sign-in" element={<SignIn />} />
<Route path="sign-up" element={<SignUp />} />
<Route path="admin" element={<Admin />} />
<Route path="chat-window" element={<ChatWindow />} />
</Routes>
</div>
);

View File

@@ -5,11 +5,13 @@ import './chats.css'
import Chat from './Chat'
import Contact from './Contact'
import { useState } from "react";
import Navbar from './Navbar';
class ChatWindow extends React.Component {
render() {
return (
<div class="chatcomponent">
<Navbar></Navbar>
<UserList />
<MessageList />
<ChatInput />

View File

@@ -3,7 +3,7 @@ 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';
import { Button, ListItemIcon } from '@mui/material';
export default function ListSuggestedMatch() {
return (<ListItem alignItems="flex-start">
@@ -23,6 +23,7 @@ export default function ListSuggestedMatch() {
12:30PM - 123 Alphabet St. Toronto ON.
</Typography>
{" — John Smith, Alfred Baker, and Samantha Wright"}
<Button size="Medium">Participate</Button>
</React.Fragment>
}
/>

View File

@@ -16,7 +16,7 @@ import { useNavigate } from 'react-router-dom';
const pages = ['Dashboard'];
export default function Navbar(){
export default function Navbar() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);
@@ -38,7 +38,7 @@ export default function Navbar(){
const navigate = useNavigate();
return (
<AppBar position="static" sx={{background: '#00226D'}}>
<AppBar position="static" sx={{ background: '#00226D' }}>
<Container maxWidth="xl">
<Toolbar disableGutters>
<Typography
@@ -95,28 +95,25 @@ export default function Navbar(){
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%'}}
onClick={() => { navigate("/dashboard") }}
sx={{ my: 2, color: 'white', display: 'block', textTransform: 'none', fontSize: '100%' }}
>
{page}
Dashboard
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0, marginRight: '1%'}}>
<Box sx={{ flexGrow: 0, marginRight: '1%' }}>
<Tooltip title="Chats">
<IconButton sx={{ p: 0}}>
<ForumIcon sx={{color: 'white'}}></ForumIcon>
<IconButton onClick={() => { navigate('/chat-window') }} 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 onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<AccountCircle sx={{ color: 'white' }}></AccountCircle>
</IconButton>
</Tooltip>
<Menu
@@ -141,7 +138,7 @@ export default function Navbar(){
<MenuItem onClick={handleCloseUserMenu}>
<Typography textAlign="center">Account</Typography>
</MenuItem>
<MenuItem onClick={() => navigate('sign-in')}>
<MenuItem onClick={() => navigate('/sign-in')}>
<Typography textAlign="center">Sign Out</Typography>
</MenuItem>
</Menu>

View File

@@ -14,10 +14,14 @@ export default function SignIn() {
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
// For Phase 1, we have hardcoded the usernames and passwords as specified in the handout
// For the upcoming phases, this will be changed to secure authentication
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
if(data.get('username') == "admin" && data.get('password') == "admin"){
navigate('/');
if (data.get('username') === "admin" && data.get('password') === "admin") {
navigate('/admin');
} else if (data.get('username') === "user" && data.get('password') === "user") {
navigate('/chat-window')
}
};
return (
@@ -72,4 +76,5 @@ export default function SignIn() {
</Box>
</Box>
</Container>
)}
)
}

View File

@@ -12,11 +12,13 @@ import Filter from "./Filter";
import SearchBar from "./SearchBar";
import { useNavigate } from 'react-router-dom';
import MatchesList from './MatchesList';
import Navbar from './Navbar';
export default function UserDashboard() {
const navigate = useNavigate();
return (
<div>
<Navbar></Navbar>
<SearchBar></SearchBar>
<Filter></Filter>
<MatchesList></MatchesList>

View File

@@ -10,7 +10,7 @@
border-color:rgb(75, 75, 75);
background-color: rgb(80, 80, 80);
height: 70px;
height: 80px;
user-select: none;
}
@@ -18,9 +18,9 @@
background-color: black;
}
.contactlist {
height: 500px;
width: 200px;
top: 0;
height: 90%;
width: 13%;
top: 10%;
left: 0;
box-sizing: border-box;
border-radius: 2%;
@@ -28,13 +28,14 @@
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
text-align: center;
}
.messagelist {
height: 400px;
width: 800px;
top: 0px;
left: 200px;
height: 70%;
width: 87%;
top: 10%;
left: 13%;
position: absolute;
background-color: rgb(80, 80, 80);
@@ -77,29 +78,29 @@
}
.left {
background-color: rgba(0, 57, 163, 0.637);
margin-right: 35px;
margin-left: 20px;
color: white;
float: auto;
float: left;
}
.right {
background-color: khaki;
color: black;
margin-right: 35px;
margin-right: 20px;
float: right;
}
.chatbubble-container {
width: 800px;
width: 100%;
height: auto;
float: left;
}
.chatinput {
background-color: rgb(75, 75, 75);
top: 400px;
left: 200px;
top: 80%;
left: 13%;
position: absolute;
height: 92px;
width: 793px;
height: 20%;
width: 87%;
color: antiquewhite;