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

Coding session - teams, style, appbar

This commit is contained in:
Felix Albrigtsen 2022-03-28 15:20:23 +02:00
parent 8527560333
commit cfe57274dd
7 changed files with 180 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,9 +28,7 @@ function CreateButton(props) {
function TournamentListItem(props) {
return (
<Container maxWidth="lg" align="start" sx={{
margin:'2.5% 0'
}}>
<Container maxWidth="lg" align="start" sx={{margin:'2.5% 0'}}>
<Paper elevation={8}>
<Card>
<CardMedia
@ -44,7 +42,7 @@ function TournamentListItem(props) {
<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 todo / {props.tournament.teamLimit} </Typography>
<Typography variant="h5" color="text.primary" gutterBottom> Players {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
<Box sx={{
margin: 'auto',
@ -52,7 +50,7 @@ function TournamentListItem(props) {
flexDirection: 'row',
justifyContent: 'center',
}} component="span">
<Box sx={{margin: '0 2% 0 2'}}>
<Box sx={{margin: '0 2% 0 2%'}}>
<Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
</Link>
@ -106,7 +104,7 @@ function TournamentList() {
function Home() {
return (
<React.StrictMode>
<Appbar />
<Appbar pageTitle="Tournaments" />
<main>
<Container align="center">
<CreateButton />

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

@ -2,7 +2,7 @@ import * as React from "react";
import { Link } from "react-router-dom";
import Appbar from './components/appbar';
import { useParams } from 'react-router-dom'
import { Button } from "@mui/material";
import { Button, Paper, Stack } from "@mui/material";
import "./components/tournamentBracket.css";
function MatchPair(props) {
@ -64,7 +64,6 @@ function Match(props) {
let setWinner = curryTeamId => event => {
let teamId = curryTeamId;
console.log(teamId);
if (!teamId || teamId == null) {
showError("No team selected");
return;
@ -157,7 +156,6 @@ function BracketViewer(props) {
console.error(data)
return;
}
console.log(data);
let teams = data.data;
setTeams(teams);
})
@ -186,13 +184,16 @@ export default function TournamentOverview(props) {
return (
<>
<Appbar />
<Link to={`/tournament/${tournamentId}/manage`}>
<Button className="ManageButton" variant="contained" color="rackley">Manage Tournament</Button>
</Link>
<Link to={`/tournament/${tournamentId}/teams`}>
<Button className="OverviewButton" variant="contained" color="grape">Manage Teams</Button>
</Link>
<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>
<BracketViewer tournamentId={tournamentId} className="bracketViewer" />
</>

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

@ -1,15 +1,60 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
import Appbar from "./components/appbar";
import { Button, TextField, Stack, MenuItem, 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';
function showError(error) {
alert("Something went wrong. \n" + error);
console.error(error);
}
function TeamList(props) {
function TeamCreator(props) {
function postCreate() {
let teamName = document.getElementById("teamNameInput").value;
if (!teamName) {
showError("Team name is required");
return;
}
let formData = new FormData();
formData.append("name", teamName);
let body = new URLSearchParams(formData)
fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}/createTeam`, {
method: "POST",
body: body
})
.then(res => res.json())
.then(data => {
if (data.status !== "OK") {
showError(data.data);
return;
}
document.getElementById("teamNameInput").value = "";
props.onTeamCreated();
}
)
}
return (
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
<div align="center">
<TextField id="teamNameInput" sx={{ width: "70%" }} label="Team Name" variant="outlined" />
{/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
<Button variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
<Box sx={{padding: "10px"}}>
Create Team
</Box>
<AddCircleIcon />
</Button>
</div>
</Paper>
)
}
function TeamList(props) {
return (
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
<div align="center" >
@ -32,7 +77,7 @@ 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="primary" onClick={() => props.setSelectedTeamId(team.id)}>Edit</Button>
<Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }}>Delete</Button>
</TableCell>
</TableRow>
@ -75,7 +120,7 @@ function TeamEditor(props) {
formData.append("name", document.getElementById("teamNameInput").value);
}
if (props.selectedTeamId == -1 || !team) {
if (props.selectedTeamId === -1 || !team) {
return (
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
<div align="center" >
@ -86,7 +131,31 @@ function TeamEditor(props) {
}
function nameInputChanged(event) {
setTeam({...team, name: event.target.value});
let newTeam = {...team};
newTeam.name = event.target.value;
setTeam(newTeam);
}
function saveTeam() {
let formData = new FormData();
formData.append("name", team.name);
console.log(team);
let body = new URLSearchParams(formData)
fetch(process.env.REACT_APP_BACKEND_URL + `/api/team/${team.id}/edit`, {
method: "POST",
body: body
})
.then(res => res.json())
.then(data => {
if (data.status !== "OK") {
showError(data.data);
return;
}
setTeam(data.data);
props.setTeams(props.teams.map(listTeam => listTeam.id === team.id ? team : listTeam));
props.setSelectedTeamId(-1);
}
);
}
return (
@ -94,8 +163,9 @@ function TeamEditor(props) {
<div align="center">
<h2><b>Edit Team:</b></h2>
<form>
<TextField id="teamNameInput" label="Team Name" value={team.name || ""} onChange={nameInputChanged} />
<TextField id="teamNameInput" label="Team Name" value={team.name || ""} onChange={nameInputChanged} sx={{width: "80%"}} />
<PlayerList players={players} setPlayers={setPlayers} />
<Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={saveTeam}>Save</Button>
</form>
</div>
</Paper>
@ -104,10 +174,10 @@ function TeamEditor(props) {
export default function TournamentTeams(props) {
const [teams, setTeams] = React.useState([]);
const [selectedTeamId, setselectedTeamId] = React.useState(-1);
const [selectedTeamId, setSelectedTeamId] = React.useState(-1);
const { tournamentId } = useParams();
React.useEffect(() => {
function getTeams() {
fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${tournamentId}/getTeams`)
.then((res) => res.json())
.then((data) => {
@ -118,14 +188,18 @@ export default function TournamentTeams(props) {
//setselectedTeamId(teams[0].id);
})
.catch((err) => showError(err));
}
React.useEffect(() => {
getTeams()
}, []);
return (
<>
<Appbar />
<Appbar pageTitle="Edit teams" />
<div className="tournamentTeams">
<TeamList teams={teams} selectedTeamId={selectedTeamId} setselectedTeamId={setselectedTeamId} />
<TeamEditor teams={teams} selectedTeamId={selectedTeamId} />
<TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
<TeamList teams={teams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
<TeamEditor teams={teams} setTeams={setTeams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />
</div>
</>
);

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

@ -1,32 +1,32 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import { AppBar, Typography, Toolbar, CssBaseline, Box, IconButton } from "@mui/material"
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 HomeImage from "./homeimage";
export default function Appbar() {
export default function Appbar(props) {
return (
<>
<CssBaseline />
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" color="primary">
<Toolbar>
<HomeImage />
<Typography variant="h6" component="div" sx={{
flexGrow: 1,
marginLeft: '2vw'
}}>
<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={{ mr: 2 }}
sx={{ marginRight: 2, width: "5%", marginLeft: "30%" }}
>
<Menu />
</IconButton>

59
src/client/src/createtournament.js
View File

@ -2,7 +2,8 @@ import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from "./components/appbar";
import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material'
import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid } from '@mui/material'
import FileUploadIcon from '@mui/icons-material/FileUpload';
function submitTournament(event) {
event.preventDefault();
@ -82,29 +83,33 @@ function TournamentForm(props) {
return (
<>
<form>
<Container maxWidth="md">
<InputLabel htmlFor="nameInput">Tournament Name: </InputLabel>
<TextField type="text" id="nameInput" variant="filled" label="Tournament Name" />
<InputLabel htmlFor="descriptionInput">Description: </InputLabel>
<TextField type="text" id="descriptionInput" variant="filled" label="Description"/>
<InputLabel htmlFor="editImage">
Tournament Image:
<br />
<Button variant="outlined" component="span" color="primary">
Upload
</Button>
</InputLabel>
<input
type="file"
id="editImage"
accept="image/png, image/jpeg, image/jpg, image/gif, image/svg"
style={{ display: 'none' }}
/>
<InputLabel htmlFor="startDatePicker">Start Time:</InputLabel>
<TextField type="datetime-local" id="startDatePicker" />
<Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={4} align="center">
{/* <InputLabel htmlFor="nameInput">Tournament Name: </InputLabel> */}
<TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/>
{/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */}
<TextField type="text" id="descriptionInput" label="Description" placeholder="Descrption" InputLabelProps={{shrink: true}}/>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={-20} justifyContent="center">
<Grid item xs={2}>
<Container>Edit Image:</Container>
</Grid>
<Grid item xs={2}>
<Container>
<label htmlFor="editImage">
<Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
Upload
</Button>
<input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
</label>
</Container>
</Grid>
</Grid>
</Box>
{/* <InputLabel htmlFor="startDatePicker">Start Time:</InputLabel> */}
<TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}}/>
<InputLabel htmlFor="endDatePicker">End Time:</InputLabel>
<TextField type="datetime-local" id="endDatePicker" />
{/* <InputLabel htmlFor="endDatePicker">End Time:</InputLabel> */}
<TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}}/>
<InputLabel id="max-teams-label">Maximum number of teams</InputLabel>
{/* <Select
@ -133,14 +138,14 @@ function TournamentForm(props) {
<option value={64}>64</option>
<option value={128}>128</option>
</select>
<Slider aria-label="Teams" defaultValue={1} valueLabelDisplay="auto" step={1} marks min={1} max={7} id="max-teams-slider" >
<Slider aria-label="Teams" defaultValue={1} valueLabelDisplay="auto" step={1} marks min={1} max={7} id="max-teams-slider" name="max-teams-slider" >
</Slider>
{/* go brrrr */}
<br /><br />
<Button type="submit" variant="contained" onClick={submitTournament} color="primary">Create Tournament!</Button>
</Container>
</Stack>
</form>
</>
);
@ -149,8 +154,10 @@ function TournamentForm(props) {
export default function CreateTournament(props) {
return (
<>
<Appbar />
<Appbar pageTitle="New tournament" />
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "20px auto", padding: "20px 0"}} component={Container} direction="column" align="center">
<TournamentForm />
</Paper>
</>
);
}

72
src/client/src/managetournament.js
View File

@ -3,7 +3,8 @@ import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import { AlertContainer, alert } from "react-custom-alert";
import Appbar from "./components/appbar";
import { useParams } from "react-router-dom";
import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material";
import { Button, TextField, Grid, Box, Container, Paper, Stack} from "@mui/material";
import FileUploadIcon from '@mui/icons-material/FileUpload';
let submitChanges = curryTournamentId => event => {
event.preventDefault();
@ -71,7 +72,6 @@ function ManageTournament(props) {
let [tournamentInfo, setTournamentInfo] = React.useState([]);
React.useEffect(() => {
console.log(props.tournamentId);
fetch(
process.env.REACT_APP_BACKEND_URL +
`/api/tournament/${props.tournamentId}`
@ -93,40 +93,40 @@ function ManageTournament(props) {
return (
<>
<form>
<Container>
<InputLabel htmlFor="editName">Edit name: </InputLabel>
<TextField type="text" id="editName" />
<InputLabel htmlFor="editDesc">Edit description: </InputLabel>
<TextField type="text" id="editDesc" />
<InputLabel htmlFor="editImage">
Edit image:
<br />
<Button variant="outlined" component="span" color="primary">
Upload
</Button>
</InputLabel>
<input
type="file"
id="editImage"
accept="image/png, image/jpeg, image/jpg, image/gif, image/svg"
style={{ display: "none" }}
/>
<InputLabel htmlFor="editStartDate">Edit Start Time:</InputLabel>
<TextField type="datetime-local" id="editStartDate" />
<InputLabel htmlFor="editEndDate">Edit End Time:</InputLabel>
<TextField type="datetime-local" id="editEndDate" />
<Button
type="submit"
variant="contained"
onClick={submitChanges(props.tournamentId)}
color="primary"
>
<form>
<Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={2} align="center">
{/* <InputLabel htmlFor="editName">Edit name: </InputLabel> */}
<TextField type="text" id="editName" label="Edit Name:" InputLabelProps={{shrink: true}}/>
{/* <InputLabel htmlFor="editDesc">Edit description: </InputLabel> */}
<TextField type="text" id="editDesc" label="Edit Description:" InputLabelProps={{shrink: true}} />
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={-20} justifyContent="center">
<Grid item xs={2}>
<Container>Edit Image:</Container>
</Grid>
<Grid item xs={2}>
<Container>
<label htmlFor="editImage">
<Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
Upload
</Button>
<input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
</label>
</Container>
</Grid>
</Grid>
</Box>
{/* <InputLabel htmlFor="editStartDate">Edit Start Time:</InputLabel> */}
<TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
{/* <InputLabel htmlFor="editEndDate">Edit End Time:</InputLabel> */}
<TextField type="datetime-local" id="editEndDate" label="Edit End Time" InputLabelProps={{shrink: true}}/>
<Button type="submit" variant="contained" onClick={submitChanges(props.tournamentId)} color="primary" >
Save Tournament Details
</Button>
</Container>
</form>
</Stack>
</form>
</>
);
}
@ -172,11 +172,13 @@ export default function TournamentManager(props) {
const { tournamentId } = useParams();
return (
<>
<Appbar />
<Appbar 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 />
<InviteButton />
<AlertContainer floatingTime={5000} />
</Paper>
</>
);
}

5
src/client/src/setupTests.js
View File

@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';