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

Code Refactoring, design iteration

This commit is contained in:
Felix Albrigtsen 2022-03-30 00:11:11 +02:00
parent c6ebbf1890
commit 2a3abb9bf3
11 changed files with 99 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import TournamentManager from "./TournamentManager.js";
import TournamentAnnouncement from "./TournamentAnnouncement";
import TournamentMatches from "./TournamentMatches";
import TournamentTeams from "./TournamentTeams";
import AppBar from './components/appbar';
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';
@ -45,12 +45,12 @@ function TournamentListItem(props) {
<Box sx={{flexGrow: 1}}>
<Grid container spacing={4} justifyContent="center" wrap="wrap">
<Grid item sx={4}>
<Grid item>
<Link to={`/tournament/${props.tournament.id}/manage`}>
<Button className="ManageButton" variant="contained" color="primary">Manage Tournament</Button>
</Link>
</Grid>
<Grid item sx={4}>
<Grid item >
<Link to={`/tournament/${props.tournament.id}`} >
<Button variant="contained" color="success">
View Tournament

2
src/client/src/TournamentAnnouncement.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';
function Announcement() {
return (

2
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';

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

@ -1,12 +1,17 @@
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 TournamentBar from "./components/tournamentbar";
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';
//Dependency for snackbar/popup
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
let submitChanges = curryTournamentId => event => {
event.preventDefault();
let tournamentId = curryTournamentId;
@ -68,10 +73,29 @@ let submitChanges = curryTournamentId => event => {
})
.catch((error) => showError(error));
}
let deleteTournament = tournamentId => event => {
event.preventDefault();
//TODO: https://mui.com/components/dialogs/
let certain = window.confirm("Are you sure? Click OK to delete tournament");
if (!certain) {
return;
}
fetch(process.env.REACT_APP_API_URL + `/tournament/${tournamentId}`, {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => {
if (data.status === "OK") {
alert("Tournament Deleted successfully");
window.location.href = "/";
} else {
showError(data.data);
}
})
.catch((error) => showError(error));
}
function ManageTournament(props) {
let [tournamentInfo, setTournamentInfo] = React.useState([]);
React.useEffect(() => {
fetch(
process.env.REACT_APP_API_URL + `/tournament/${props.tournamentId}`
@ -81,8 +105,6 @@ function ManageTournament(props) {
if (data.status !== "OK") {
showError(data.data);
}
setTournamentInfo(data.data);
document.getElementById("editName").value = data.data.name;
document.getElementById("editDesc").value = data.data.description;
document.getElementById("editStartDate").value = data.data.startTime.slice(0, 16);
@ -117,10 +139,9 @@ function ManageTournament(props) {
</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>
@ -131,40 +152,32 @@ function ManageTournament(props) {
);
}
function AnnounceButton(props) {
return (
<Link to="/tournament/manage/announcement">
<Button id="sendAnnon" variant="outlined" color="primary">
Send Tournament Announcement
</Button>
</Link>
);
}
function showError(error) {
alert("Something went wrong. \n" + error);
console.error(error);
}
function InviteButton(props) {
function event() {
copy();
alertSuccess();
function ClipboardButton(props) {
const [open, setOpen] = React.useState(false);
function copyString() {
navigator.clipboard.writeText(props.clipboardContent || "");
setOpen(true);
}
const copy = () => {
navigator.clipboard.writeText("discord.gg/asura");
const handleClose = (event, reason) => {
if (reason === 'clickaway') { return }
setOpen(false);
};
const alertSuccess = () =>
alert({ message: "Copied to clipboard.", type: "success" });
const closeAction = <>
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
<CloseIcon fontSize="small" />
</IconButton>
</>
return (
<Button
id="createInvLink"
onClick={event}
variant="outlined"
color="primary"
>
Copy Invite Link
</Button>
<>
<Button onClick={copyString} variant="outlined" color="primary" sx={{margin: "auto 5px"}} >Copy {props.name}</Button>
<Snackbar open={open} autoHideDuration={1500} onClose={handleClose} message={props.name + " copied to clipboard"} action={closeAction} />
</>
);
}
@ -177,8 +190,14 @@ export default function TournamentManager(props) {
<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} /> */}
<Box sx={{width: "100%"}}>
<Button variant="contained" color="error" onClick={deleteTournament(tournamentId)} sx={{margin: "auto 5px"}}>
Delete Tournament
</Button>
<ClipboardButton clipboardContent={"https://discord.gg/asura"} name="Discord Invite Link" />
<ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
</Box>
</Paper>
</>
);

2
src/client/src/TournamentMatches.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';
function MatchHistory() {

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

@ -1,7 +1,7 @@
import * as React from "react";
import { Link } from "react-router-dom";
import Appbar from './components/appbar';
import TournamentBar from "./components/tournamentbar";
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";
@ -186,8 +186,8 @@ export default function TournamentOverview(props) {
return (
<>
<Appbar pageTitle="Tournament matches" />
<TournamentBar pageTitle="Tournament Matches" />
<Appbar pageTitle="View Tournament" />
<TournamentBar pageTitle="View Tournament" />
<BracketViewer tournamentId={tournamentId} className="bracketViewer" />
</>
);

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

@ -1,7 +1,7 @@
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 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';
@ -205,7 +205,7 @@ export default function TournamentTeams(props) {
return (
<>
<Appbar pageTitle="Edit teams" />
<TournamentBar pageTitle="Edit Teams" />
<TournamentBar pageTitle="Manage Teams" />
<div className="tournamentTeams">
<TeamCreator tournamentId={tournamentId} teams={teams} onTeamCreated={getTeams} />
<TeamList teams={teams} setTeams={setTeams} selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId} />

14
src/client/src/components/appbar.js → src/client/src/components/Appbar.js
View File

@ -2,7 +2,7 @@ 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, Grid } from "@mui/material"
import MenuIcon from '@mui/icons-material/Menu';
import HomeImage from "./homeimage";
import logo from "./../Asura2222.png";
export default function Appbar(props) {
return (
@ -13,7 +13,10 @@ export default function Appbar(props) {
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2} justifyContent="space-between" alignItems="center" align="center">
<Grid item xs={2}>
<HomeImage sx={{width: "10%"}} />
<Link to="/">
<img sx={{width: "10%"}} src={logo} alt="Tournament logo" className="mainIcon"></img>
</Link>
{/* <Typography variant="h6" component="div">
<Link to="/" style={{ color:'white'}}>
Asura Tournaments
@ -24,13 +27,10 @@ export default function Appbar(props) {
<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%" }}>
{/* <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ width: "5%", padding: "5% 10%" }}>
<MenuIcon />
</IconButton>
</IconButton> */}
</Grid>
{/* <Button sx={{width: "5%", color: "white"}} onClick={History.goBack}>Back</Button> */}
{/* <Button color="inherit">Login</Button> */}
</Grid>
</Box>
</Toolbar>

23
src/client/src/components/TournamentBar.js Normal file
View File

@ -0,0 +1,23 @@
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"
function ButtonLink(props) {
return (
<Link to={`/tournament/${props.tournamentId}` + props.targetPath} >
<Button variant="contained" color="primary" disabled={props.activeTitle === props.title} sx={{margin: "15px", fontSize: "1.2em"}} >{props.title}</Button>
</Link>
);
}
export default function TournamentBar(props) {
const { tournamentId } = useParams();
return (
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
<ButtonLink targetPath="" tournamentId={tournamentId} activeTitle={props.pageTitle} title="View Tournament" />
<ButtonLink targetPath="/manage" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Edit Tournament" />
<ButtonLink targetPath="/teams" tournamentId={tournamentId} activeTitle={props.pageTitle} title="Manage Teams" />
</Paper>
)
}

11
src/client/src/components/homeimage.js
View File

@ -1,11 +0,0 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import logo from "./../Asura2222.png";
export default function HomeImage() {
return (
<Link to="/">
<img src={logo} alt="Tournament logo" className="mainIcon"></img>
</Link>
);
}

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

@ -1,51 +0,0 @@
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>
)
}
}