felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Stable build, collaboration 29/03/2022 

Co-authored-by: krloer <krloer@users.noreply.github.com>
Co-authored-by: SgtPodding <SgtPodding@users.noreply.github.com>
Co-authored-by: Felix Albrigtsen <felixalbrigtsen@gmail.com>
This commit is contained in:
Kristoffer Juelsenn 2022-03-29 14:35:12 +02:00
parent 4d1ee2de62
commit e392072ec7
9 changed files with 144 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/.env
View File

@ -1,2 +1,2 @@
REACT_APP_API_URL=https://api.asura.feal.no REACT_APP_API_URL=https://asura.feal.no/api
BROWSER=none BROWSER=none

77
src/client/src/FrontPage.js
View File

@ -6,17 +6,16 @@ import TournamentManager from "./TournamentManager.js";
import TournamentAnnouncement from "./TournamentAnnouncement"; import TournamentAnnouncement from "./TournamentAnnouncement";
import TournamentMatches from "./TournamentMatches"; import TournamentMatches from "./TournamentMatches";
import TournamentTeams from "./TournamentTeams"; import TournamentTeams from "./TournamentTeams";
import Appbar from './components/appbar'; import AppBar from './components/appbar';
import { Button, Container, Typography, Box } from "@mui/material"; import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid } from "@mui/material";
import { Card, CardContent, CardMedia, Paper } from "@mui/material";
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
function CreateButton(props) { function CreateButton(props) {
return ( return (
<Link to="/create"> <Link to="/create">
<Button variant="contained" color="success" style={{ margin: '2.5% 0 0 0'}}> <Button variant="contained" color="success">
<Box sx={{ <Box sx={{
marginRight: '2%', paddingRight: '2%',
}}> }}>
Create Tournament Create Tournament
</Box> </Box>
@ -28,8 +27,7 @@ function CreateButton(props) {
function TournamentListItem(props) { function TournamentListItem(props) {
return ( return (
<Container maxWidth="lg" align="start" sx={{margin:'2.5% 0'}}> <Paper elevation={8} >
<Paper elevation={8}>
<Card> <Card>
<CardMedia <CardMedia
component="img" component="img"
@ -38,36 +36,32 @@ function TournamentListItem(props) {
// image="Asura_Rex.png" // image="Asura_Rex.png"
image="banner2.png" image="banner2.png"
/> />
<CardContent> <CardContent align="left">
<Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography> <Typography variant="h3" component="div" align="center">{props.tournament.name} </Typography>
<Typography variant="h5" color="text.primary">{props.tournament.description}</Typography> <Typography variant="h5" color="text.primary">{props.tournament.description}</Typography>
<Typography variant="body2" color="text.secondary"> Start: {props.tournament.startTime.toLocaleString()} </Typography> <Typography variant="body2" color="text.secondary"> Start: {props.tournament.startTime.toLocaleString()} </Typography>
<Typography variant="body2" color="text.secondary"> End: {props.tournament.endTime.toLocaleString()} </Typography> <Typography variant="body2" color="text.secondary"> End: {props.tournament.endTime.toLocaleString()} </Typography>
<Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography> <Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Box sx={{ <Box sx={{flexGrow: 1}}>
margin: 'auto', <Grid container spacing={4} justifyContent="center" wrap="wrap">
display: 'flex', <Grid item sx={4}>
flexDirection: 'row',
justifyContent: 'center',
}} component="span">
<Box sx={{margin: '0 2% 0 2%'}}>
<Link to={`/tournament/${props.tournament.id}/manage`}> <Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button> <Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
</Link> </Link>
</Box> </Grid>
<Box sx={{margin: '0 2% 0 2%'}}> <Grid item sx={4}>
<Link to={`/tournament/${props.tournament.id}`} > <Link to={`/tournament/${props.tournament.id}`} >
<Button variant="contained" color="success"> <Button variant="contained" color="success">
View Tournament View Tournament
</Button> </Button>
</Link> </Link>
</Box> </Grid>
</Grid>
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
</Paper> </Paper>
</Container>
); );
} }
@ -95,50 +89,32 @@ function TournamentList() {
}, []); }, []);
return <> return <>
<Stack spacing={3} sx={{margin: "10px auto"}}>
{tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)} {tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)}
</Stack>
</>; </>;
} }
//<ListElement name={data[i].name} competitors={data[i].teamLimit} date={data[i].startTime}/>
function Home() { function Home() {
return ( return (
<React.StrictMode> <>
<Appbar pageTitle="Tournaments" /> <AppBar pageTitle="Asura Tournaments" />
<main> <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
<Container align="center"> <Box component={Stack} direction="row" align="center" justifyContent="space-between" alignItems="center" sx={{flexGrow: 1}}>
{/* <CreateButton /> */}
<Typography variant="h3">Tournaments</Typography>
<CreateButton /> <CreateButton />
<Typography variant="h2" style={{margin:'2% 0'}}> </Box>
Tournaments <TournamentList />
</Typography>
<TournamentList />
{/* <ListElement
name="Weekend Warmup"
competitors="16"
date="29.04.2022"
/>
<ListElement
name="Saturday Showdown"
competitors="8"
date="30.04.2022"
/>
<ListElement
name="Sunday Funday"
competitors="64"
date="01.05.2022"
/> */}
</Container> </Container>
</main> </>
<footer className="footer"></footer>
</React.StrictMode>
); );
} }
export default function App() { export default function App() {
return ( return (
<Router> <React.StrictMode>
<Router>
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/create" element={<TournamentCreator />} /> <Route path="/create" element={<TournamentCreator />} />
@ -152,5 +128,6 @@ export default function App() {
/> />
</Routes> </Routes>
</Router> </Router>
</React.StrictMode>
); );
} }

4
src/client/src/TournamentCreator.js
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from "./components/appbar"; import AppBar from "./components/appbar";
import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material' import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material'
import FileUploadIcon from '@mui/icons-material/FileUpload'; import FileUploadIcon from '@mui/icons-material/FileUpload';
@ -160,7 +160,7 @@ function TournamentForm(props) {
export default function TournamentCreator(props) { export default function TournamentCreator(props) {
return ( return (
<> <>
<Appbar pageTitle="New tournament" /> <AppBar pageTitle="New tournament" />
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 20px"}} component={Container} direction="column" align="center"> <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 20px"}} component={Container} direction="column" align="center">
<TournamentForm /> <TournamentForm />
</Paper> </Paper>

6
src/client/src/TournamentManager.js
View File

@ -1,7 +1,8 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
// import { AlertContainer, alert } from "react-custom-alert"; // import { AlertContainer, alert } from "react-custom-alert";
import Appbar from "./components/appbar"; import AppBar from "./components/appbar";
import TournamentBar from "./components/tournamentbar";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material"; import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
import FileUploadIcon from '@mui/icons-material/FileUpload'; import FileUploadIcon from '@mui/icons-material/FileUpload';
@ -171,7 +172,8 @@ export default function TournamentManager(props) {
const { tournamentId } = useParams(); const { tournamentId } = useParams();
return ( return (
<> <>
<Appbar pageTitle="Edit Tournament" /> <AppBar pageTitle="Edit Tournament" />
<TournamentBar pageTitle="Edit Tournament"/>
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center"> <Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
<ManageTournament tournamentId={tournamentId} /> <ManageTournament tournamentId={tournamentId} />
{/* <AnnounceButton /> */} {/* <AnnounceButton /> */}

13
src/client/src/TournamentOverview.js
View File

@ -1,6 +1,7 @@
import * as React from "react"; import * as React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Appbar from './components/appbar'; import Appbar from './components/appbar';
import TournamentBar from "./components/tournamentbar";
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import { Button, Paper, Stack } from "@mui/material"; import { Button, Paper, Stack } from "@mui/material";
import "./components/tournamentBracket.css"; import "./components/tournamentBracket.css";
@ -164,6 +165,7 @@ function BracketViewer(props) {
return ( return (
(matches && teams) ? (matches && teams) ?
// <div sx={{width: "100vw", height: "80vh", overflow: "scroll"}} className="bracket">
<div className="bracket"> <div className="bracket">
{matches.map(tier => { {matches.map(tier => {
let tierNum = tier[0].tier; let tierNum = tier[0].tier;
@ -185,16 +187,7 @@ export default function TournamentOverview(props) {
return ( return (
<> <>
<Appbar pageTitle="Tournament matches" /> <Appbar pageTitle="Tournament matches" />
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center"> <TournamentBar pageTitle="Tournament Matches" />
<Link to={`/tournament/${tournamentId}/manage`} >
<Button className="ManageButton" variant="contained" color="rackley" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
</Link>
<Link to={`/tournament/${tournamentId}/teams`} >
<Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
</Link>
</Paper>
<BracketViewer tournamentId={tournamentId} className="bracketViewer" /> <BracketViewer tournamentId={tournamentId} className="bracketViewer" />
</> </>
); );

23
src/client/src/TournamentTeams.js
View File

@ -1,15 +1,30 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
import Appbar from "./components/appbar"; import Appbar from "./components/appbar";
import TournamentBar from "./components/tournamentbar";
import { Button, TextField, Stack, MenuItem, Box, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material"; import { Button, TextField, Stack, MenuItem, Box, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material";
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
function showError(error) { function showError(error) {
alert("Something went wrong. \n" + error); alert("Something went wrong. \n" + error);
console.error(error); console.error(error);
} }
function ReturnButton() {
const { tournamentId } = useParams();
return(
<Link to={`/tournament/${tournamentId}`}>
<Button type="button" variant="contained" color="primary" >
<Box>
Return to Tournament
</Box>
</Button>
</Link>
)
}
function TeamCreator(props) { function TeamCreator(props) {
function postCreate() { function postCreate() {
let teamName = document.getElementById("teamNameInput").value; let teamName = document.getElementById("teamNameInput").value;
@ -77,8 +92,8 @@ function TeamList(props) {
</b></TableCell> </b></TableCell>
{/* <TableCell align="right">{team.members}</TableCell> */} {/* <TableCell align="right">{team.members}</TableCell> */}
<TableCell align="center"> <TableCell align="center">
<Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)}>Edit</Button> <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)} endIcon={<EditIcon />}>Edit</Button>
<Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }}>Delete</Button> <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }} endIcon={<DeleteIcon />}>Delete</Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -196,6 +211,8 @@ export default function TournamentTeams(props) {
return ( return (
<> <>
<Appbar pageTitle="Edit teams" /> <Appbar pageTitle="Edit teams" />
<TournamentBar pageTitle="Edit Teams" />
<ReturnButton />
<div className="tournamentTeams"> <div className="tournamentTeams">
<TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} /> <TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
<TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} /> <TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />

47
src/client/src/components/appbar.js
View File

@ -1,39 +1,40 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton } from "@mui/material" import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid } from "@mui/material"
import Menu from '@mui/icons-material/Menu' import MenuIcon from '@mui/icons-material/Menu';
import HomeImage from "./homeimage"; import HomeImage from "./homeimage";
export default function Appbar(props) { export default function Appbar(props) {
return ( return (
<> <>
<CssBaseline /> <CssBaseline />
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" color="primary"> <AppBar position="static" color="primary">
<Toolbar> <Toolbar>
<HomeImage sx={{width: "10%"}} /> <Box sx={{ flexGrow: 1 }}>
<Typography variant="h6" component="div" sx={{ marginLeft: '2vw', width: "20%;" }}> <Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
<Link to="/" style={{ textDecoration:'none', color:'white'}}> <Grid item xs={2}>
Asura Tournaments <HomeImage sx={{width: "10%"}} />
</Link> {/* <Typography variant="h6" component="div">
</Typography> <Link to="/" style={{ color:'white'}}>
{/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */} Asura Tournaments
</Link>
</Typography> */}
</Grid>
<Grid item xs={8}>
<Typography component="div"><h2>{props.pageTitle || ""}</h2></Typography>
</Grid>
<Grid item xs={2}>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}>
<MenuIcon />
</IconButton>
</Grid>
<Typography component="div" sx={{margin: "auto auto"}}><h2>{props.pageTitle || ""}</h2></Typography> {/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
{/* <Button color="inherit">Login</Button> */}
<IconButton </Grid>
size="large" </Box>
edge="start"
color="inherit"
aria-label="menu"
sx={{ marginRight: 2, width: "5%", marginLeft: "30%" }}
>
<Menu />
</IconButton>
{/* <Button color="inherit">Login</Button> */}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box>
</> </>
); );
} }

9
src/client/src/components/nosuchpage.js Normal file
View File

@ -0,0 +1,9 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Home from '../FrontPage';
export default function NoSuchPage() {
}

51
src/client/src/components/tournamentbar.js Normal file
View File

@ -0,0 +1,51 @@
import * as React from "react";
import { useParams } from "react-router-dom";
import { BrowserRouter as Router, Link, Route, Routes, History } from "react-router-dom";
import { Stack, Paper, Typography, Box, Button, Grid } from "@mui/material"
export default function TournamentBar(props) {
const { tournamentId } = useParams()
if (props.pageTitle == "Edit Tournament") {
return(
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
<Link to={`/tournament/${tournamentId}/manage`} >
<Button className="ManageButton" variant="contained" color="primary" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
</Link>
<Link to={`/tournament/${tournamentId}/teams`} >
<Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
</Link>
<Link to={`/tournament/${tournamentId}`} >
<Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
</Link>
</Paper>
)
} else if (props.pageTitle == "Tournament Matches") {
return(
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
<Link to={`/tournament/${tournamentId}/manage`} >
<Button className="ManageButton" variant="contained" color="primary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
</Link>
<Link to={`/tournament/${tournamentId}/teams`} >
<Button className="OverviewButton" variant="contained" color="secondary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
</Link>
<Link to={`/tournament/${tournamentId}`} >
<Button className="OverviewButton" variant="contained" color="success" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
</Link>
</Paper>
)
} else if (props.pageTitle == "Edit Teams") {
return(
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
<Link to={`/tournament/${tournamentId}/manage`} >
<Button className="ManageButton" variant="contained" color="primary" sx={{margin: "15px", fontSize: "1.2em"}} >Manage Tournament</Button>
</Link>
<Link to={`/tournament/${tournamentId}/teams`} >
<Button className="OverviewButton" variant="contained" color="secondary" disabled={true} sx={{margin: "15px", fontSize: "1.2em"}} >Manage Teams</Button>
</Link>
<Link to={`/tournament/${tournamentId}`} >
<Button className="OverviewButton" variant="contained" color="success" sx={{margin: "15px", fontSize: "1.2em"}} >View Tournament</Button>
</Link>
</Paper>
)
}
}