Removed package-lock.json.

Initial commit of static interfaces.
Added simple suggested matches template.
2022-03-06 20:14:50 -06:00 · 2022-03-06 20:12:31 -06:00 · 2022-03-02 03:08:33 -06:00 · 2022-03-02 02:24:36 -06:00
19 changed files with 225 additions and 28007 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +0,0 @@
 {
  "name": "team58",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {}
 }
--- a/sports-matcher/package-lock.json
+++ b/sports-matcher/package-lock.json
--- a/sports-matcher/package.json
+++ b/sports-matcher/package.json
@@ -10,11 +10,8 @@
    "@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"
  },
--- a/sports-matcher/public/index.html
+++ b/sports-matcher/public/index.html
@@ -24,12 +24,6 @@
      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>
--- a/sports-matcher/src/App.js
+++ b/sports-matcher/src/App.js
@@ -1,16 +1,15 @@
 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 Home from './Home';
+import SearchBar from './SearchBar';
 function App() {
  return (
    <div className="App">
-      <Routes>
+      <main>
-        <Route path="" element={<Home />} />
+        <SearchBar />
-        <Route path="sign-in" element={<SignIn />} />
+      </main>
        <Route path="sign-up" element={<SignUp />} />
      </Routes>
    </div>
  );
 }
--- a/sports-matcher/src/CardSuggestedMatches.js
+++ b/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>
    );
 }
--- a/sports-matcher/src/Filter.js
+++ b/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>
    );
 }
--- a/sports-matcher/src/Home.css
+++ b/sports-matcher/src/Home.css
@@ -1,4 +0,0 @@
 h1, h2{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
 }
--- a/sports-matcher/src/Home.js
+++ b/sports-matcher/src/Home.js
@@ -1,46 +0,0 @@
 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>
    )
 }
--- a/sports-matcher/src/Homebar.js
+++ b/sports-matcher/src/Homebar.js
@@ -1,44 +0,0 @@
 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>
  );
 };
--- a/sports-matcher/src/ListSuggestedMatch.js
+++ b/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>);
 }
--- a/sports-matcher/src/MatchesList.js
+++ b/sports-matcher/src/MatchesList.js
@@ -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>
    );
 }
--- a/sports-matcher/src/Navbar.js
+++ b/sports-matcher/src/Navbar.js
@@ -1,153 +0,0 @@
 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>
  );
 };
--- a/sports-matcher/src/ReportForm.js
+++ b/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>
    );
 }
--- a/sports-matcher/src/SearchBar.js
+++ b/sports-matcher/src/SearchBar.js
@@ -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>
    );
 }
--- a/sports-matcher/src/SignIn.js
+++ b/sports-matcher/src/SignIn.js
@@ -1,75 +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';
 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>
            )}
--- a/sports-matcher/src/SignUp.js
+++ b/sports-matcher/src/SignUp.js
@@ -1,92 +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';
 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>
            )}
--- a/sports-matcher/src/index.js
+++ b/sports-matcher/src/index.js
@@ -1,14 +1,13 @@
 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(
-  <BrowserRouter>
+  <React.StrictMode>
    <App />
-  </BrowserRouter>,
+  </React.StrictMode>,
  document.getElementById('root')
 );
--- a/sports-matcher/src/matchinfo.js
+++ b/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>
    );
 }
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