Merge pull request #5 from csc309-winter-2022/develop

Develop

sports-matcher/src/CardSuggestedMatches.js

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

sports-matcher/src/Filter.js

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

sports-matcher/src/ListSuggestedMatch.js

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

sports-matcher/src/MatchesList.js

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

sports-matcher/src/ReportForm.js

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

sports-matcher/src/SearchBar.js

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

sports-matcher/src/UserDashboard.js

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

sports-matcher/src/matchinfo.js

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