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

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

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

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

@ -1,6 +1,6 @@
import * as React from "react";
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 FileUploadIcon from '@mui/icons-material/FileUpload';
@ -160,7 +160,7 @@ function TournamentForm(props) {
export default function TournamentCreator(props) {
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">
<TournamentForm />
</Paper>

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

@ -1,7 +1,8 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
// 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 { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
import FileUploadIcon from '@mui/icons-material/FileUpload';
@ -171,7 +172,8 @@ export default function TournamentManager(props) {
const { tournamentId } = useParams();
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">
<ManageTournament tournamentId={tournamentId} />
{/* <AnnounceButton /> */}

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

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

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

@ -1,15 +1,30 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
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 AddCircleIcon from '@mui/icons-material/AddCircle';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
function showError(error) {
alert("Something went wrong. \n" + 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 postCreate() {
let teamName = document.getElementById("teamNameInput").value;
@ -77,8 +92,8 @@ function TeamList(props) {
</b></TableCell>
{/* <TableCell align="right">{team.members}</TableCell> */}
<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="error" onClick={() => {props.onDelete(team.id); }}>Delete</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); }} endIcon={<DeleteIcon />}>Delete</Button>
</TableCell>
</TableRow>
@ -196,6 +211,8 @@ export default function TournamentTeams(props) {
return (
<>
<Appbar pageTitle="Edit teams" />
<TournamentBar pageTitle="Edit Teams" />
<ReturnButton />
<div className="tournamentTeams">
<TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
<TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />

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

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