ydeng/csc309-team58
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ydeng:admin
Branches Tags
ydeng:main ydeng:develop ydeng:signup-page ydeng:admin_page ydeng:admin ydeng:restructure ydeng:Dashboard ydeng:login-page ydeng:match-search-queries ydeng:carousel-image-change ydeng:bigger-carousel ydeng:carousel ydeng:userdash-fixes ydeng:add-user-dashboard-page- ydeng:static-interfaces ydeng:authentication ydeng:chat ydeng:match-info
..
compare: ydeng:static-interfaces
Branches Tags
ydeng:main ydeng:develop ydeng:signup-page ydeng:admin_page ydeng:admin ydeng:restructure ydeng:Dashboard ydeng:login-page ydeng:match-search-queries ydeng:carousel-image-change ydeng:bigger-carousel ydeng:carousel ydeng:userdash-fixes ydeng:add-user-dashboard-page- ydeng:static-interfaces ydeng:authentication ydeng:chat ydeng:match-info

4 Commits
admin ... static-int

Author SHA1 Message Date
Harrison Deng
c1fe10ddc8 Removed package-lock.json. 2022-03-06 20:14:50 -06:00
Harrison Deng
38d9267bff Initial commit of static interfaces. 2022-03-06 20:12:31 -06:00
Harrison Deng
ffe8dad9ff Added simple suggested matches template. 2022-03-02 03:08:33 -06:00
Harrison Deng
1e0f79387a Some template design for horizontal Match information. 2022-03-02 02:24:36 -06:00
16 changed files with 225 additions and 27994 deletions
Expand all files Collapse all files

6
package-lock.json generated
View File

@@ -1,6 +0,0 @@
{
"name": "team58",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

27566
sports-matcher/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
sports-matcher/package.json
View File

@@ -12,7 +12,6 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "^5.0.0", "react-scripts": "^5.0.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },

4
sports-matcher/src/Admin.css
View File

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

249
sports-matcher/src/Admin.js
View File

@@ -1,249 +0,0 @@
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

17
sports-matcher/src/App.js
View File

@@ -1,16 +1,15 @@
import './App.css'; import './App.css';
import { Routes, Route, Link } from "react-router-dom"; import Filter from './Filter';
import SignIn from './SignIn'; import MatchesList from './MatchesList';
import SignUp from './SignUp'; import ReportForm from "./ReportForm";
import Admin from './Admin'; import SearchBar from './SearchBar';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<Routes> <main>
<Route path="sign-in" element={<SignIn />} /> <SearchBar />
<Route path="sign-up" element={<SignUp />} /> </main>
<Route path="admin" element={<Admin />} />
</Routes>
</div> </div>
); );
} }

20
sports-matcher/src/CardSuggestedMatches.js Normal file
View 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>
);
}

65
sports-matcher/src/Filter.js Normal file
View 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>
);
}

30
sports-matcher/src/ListSuggestedMatch.js Normal file
View 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>);
}

14
sports-matcher/src/MatchesList.js Normal file
View File

@@ -0,0 +1,14 @@
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" />
{/* TODO: Loop to populate */}
</List>
);
}

21
sports-matcher/src/ReportForm.js Normal file
View 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>
);
}

11
sports-matcher/src/SearchBar.js Normal file
View File

@@ -0,0 +1,11 @@
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>
<Button sx={{ margin: 1 }} variant="outlined">Filter</Button>
</div>
);
}

65
sports-matcher/src/SignIn.js
View File

@@ -1,65 +0,0 @@
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';
export default function SignIn() {
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 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
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>
)}

91
sports-matcher/src/SignUp.js
View File

@@ -1,91 +0,0 @@
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';
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>
)}

5
sports-matcher/src/index.js
View File

@@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <React.StrictMode>
<App /> <App />
</BrowserRouter>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );

54
sports-matcher/src/matchinfo.js Normal file
View 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>
);
}