diff --git a/src/client/src/AdminsOverview.js b/src/client/src/AdminsOverview.js index ff13fbf..c9a7962 100644 --- a/src/client/src/AdminsOverview.js +++ b/src/client/src/AdminsOverview.js @@ -3,10 +3,12 @@ import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-r import Appbar from "./components/AsuraBar"; import ErrorSnackbar from "./components/ErrorSnackbar"; import LoginPage from "./LoginPage"; -import {Button, Box, TextField, Stack, InputLabel, Paper, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Typography, Select, MenuItem, FormControl} from '@mui/material'; +import { Button, Box, TextField, Stack, InputLabel, Paper, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Typography, Select, MenuItem, FormControl } from '@mui/material'; +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; import AddCircleIcon from '@mui/icons-material/AddCircle'; import DeleteIcon from '@mui/icons-material/Delete'; import EditIcon from '@mui/icons-material/Edit'; +import PropTypes from 'prop-types' function AdminCreator(props){ function postCreate(){ @@ -37,17 +39,17 @@ function AdminCreator(props){ } return ( - +
- - {/* */} - + + {/* */} +
@@ -55,17 +57,20 @@ function AdminCreator(props){ } function UserList(props){ - const deleteUsers = (userId) => { + const deleteUser = (userId) => { + openConfirmDialog(function() { fetch(process.env.REACT_APP_API_URL + `/users/${userId}`, {method: "DELETE"}) .then(res => res.json()) .then(data => { if(data.status !== "OK"){ showError(data.data); + console.log("UWU") return; } - props.setUsers(props.users.filter(user => user.id !== userId)); + props.onUserUpdated(); }) .catch(error => showError(error)); + }); } let updateRank = (asuraId) => event => { @@ -92,52 +97,99 @@ function UserList(props){ return(
- {/* TODO: scroll denne menyen, eventuelt søkefelt */} - - - - Name - Email - Rank - Actions +
+ + + Name + Email + Rank + Actions + + + + {props.users.map((user) => ( + + + + {user.name} + + + {user.email} + {/* TODO Drop down menu for selecting rank */} + + + + + + {/* {team.members} */} + + {/* */} + + - - - {props.users.map((user) => ( - - - - {user.name} - - - {user.email} - {/* TODO Drop down menu for selecting rank */} - - - - - - {/* {team.members} */} - - {/* */} - - - - ))} - -
+ ))} + +
) } +function ConfirmationDialogRaw(props) { + const { userId } = useParams(); + const { onClose, value: valueProp, open, ...other } = props; + const [value, setValue] = React.useState(valueProp); + + React.useEffect(() => { + if (!open) { + setValue(valueProp); + } + }, [valueProp, open]); + + const handleCancel = () => { + onClose(); + }; + const handleConfirm = () => { + onClose(); + props.handleconfirm(); + }; + + return ( + + Delete administrator? + + Are you sure you want to delete the administrator? This action is not reversible! + + + + + + + ); +} + +ConfirmationDialogRaw.propTypes = { + onClose: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, +}; + +// Confirmation window for "Delete user" +function openConfirmDialog(callback) {g_setDialogCallback(callback); g_setDialogOpen(true);} +let g_setDialogOpen = () => {}; +let g_setDialogCallback = (callback) => {}; + let showError = (message) => {}; - - export default function Users(props) { const [openError, setOpenError] = React.useState(false); @@ -149,6 +201,12 @@ export default function Users(props) { } const [users, setUsers] = React.useState([]); + const [dialogOpen, setDialogOpen] = React.useState(false); + const handleDialogClose = () => { setDialogOpen(false); }; + const [dialogOnConfirm, setDialogOnConfirm] = React.useState(() => {return function(){}}); + g_setDialogCallback = (callback) => { setDialogOnConfirm(()=>{ return callback })}; + g_setDialogOpen = (value) => { setDialogOpen(value); }; + function getUsers() { fetch(process.env.REACT_APP_API_URL + `/users/getUsers`) .then((res) => res.json()) @@ -186,6 +244,13 @@ export default function Users(props) { + ); } \ No newline at end of file diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js index 1e9d9bb..8e492f0 100644 --- a/src/client/src/FrontPage.js +++ b/src/client/src/FrontPage.js @@ -85,7 +85,7 @@ function TournamentListItem(props) { ) } else { return( - Starts in: + Starts in:
{ remainingDays > 0 ? {remainingDays} days : null } { remainingHours > 0 ? {remainingHours} hours : null } { remainingMins > 0 ? {remainingMins} mins : null } @@ -105,26 +105,26 @@ function TournamentListItem(props) { image="banner2.png" /> - {props.tournament.name} + {props.tournament.name} Start: {props.tournament.startTime.toLocaleString()} End: {props.tournament.endTime.toLocaleString()} - Players: {props.tournament.teamCount} / {props.tournament.teamLimit} + Particpants: {props.tournament.teamCount} / {props.tournament.teamLimit} Prize: {props.tournament.prize} - - { props.user.isLoggedIn ? + + { props.user.isLoggedIn && - : null + } @@ -182,7 +182,7 @@ function Home(props) { <> - + Tournaments { props.user.isLoggedIn ? : null diff --git a/src/client/src/ProfilePage.js b/src/client/src/ProfilePage.js index 16f1ee2..39195bf 100644 --- a/src/client/src/ProfilePage.js +++ b/src/client/src/ProfilePage.js @@ -12,7 +12,6 @@ export default function ProfilePage(props) { return (<> -

Your profile

@@ -23,6 +22,5 @@ export default function ProfilePage(props) {
- ) } \ No newline at end of file diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js index ca3fe6a..93e3c02 100644 --- a/src/client/src/TournamentCreator.js +++ b/src/client/src/TournamentCreator.js @@ -113,7 +113,7 @@ function TournamentForm(props) { - + - - + End: {props.tournament.endTime.toLocaleString()} - Players: {props.tournament.teamCount} / {props.tournament.teamLimit} + Participants: {props.tournament.teamCount} / {props.tournament.teamLimit} Prize: {props.tournament.prize} @@ -150,8 +150,8 @@ export default function TournamentHistory(props) { <> - - Past Tournaments + + Past Tournaments diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index cbae582..d0cddba 100644 --- a/src/client/src/TournamentManager.js +++ b/src/client/src/TournamentManager.js @@ -134,13 +134,13 @@ function ManageTournament(props) { return ( <>
- + - + - + { setDialogOpen(true); }; const handleDialogClose = () => { setDialogOpen(false); }; - showError = props.showError; - showSuccess = props.showSuccess; + const [openError, setOpenError] = React.useState(false); + const [errorMessage, setErrorMessage] = React.useState(""); + showError = (message) => { + setOpenError(false); + setErrorMessage(message); + setOpenError(true); + } if (!props.user.isLoggedIn) { return ; } @@ -229,7 +234,7 @@ export default function TournamentManager(props) { - + {/* */} */} - - { props.user.isManager && } + ); @@ -67,19 +67,19 @@ export default function Appbar(props) { - Tournament logo + { props.pageTitle !== "Asura Tournaments" && - + Home } - - {props.pageTitle || ""} + + {props.pageTitle || ""} { props.pageTitle !== "Login" ? diff --git a/src/client/src/components/TournamentBar.js b/src/client/src/components/TournamentBar.js index 06914a4..abb9452 100644 --- a/src/client/src/components/TournamentBar.js +++ b/src/client/src/components/TournamentBar.js @@ -3,6 +3,11 @@ 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, Snackbar, IconButton } from "@mui/material" import CloseIcon from '@mui/icons-material/Close'; +import MuiAlert from '@mui/material/Alert'; + +const Alert = React.forwardRef(function Alert(props, ref) { + return ; +}); function ClipboardButton(props) { const [open, setOpen] = React.useState(false); @@ -22,8 +27,12 @@ function ClipboardButton(props) { return ( <> - - + + + + {props.name + " copied to clipboard"} + + ); } @@ -31,7 +40,7 @@ function ClipboardButton(props) { function ButtonLink(props) { return ( - + ); } @@ -39,9 +48,9 @@ function ButtonLink(props) { export default function TournamentBar(props) { const { tournamentId } = useParams(); return ( - - - + + + diff --git a/src/client/src/components/tournamentBracket.css b/src/client/src/components/tournamentBracket.css index 2823d19..ac8f64f 100644 --- a/src/client/src/components/tournamentBracket.css +++ b/src/client/src/components/tournamentBracket.css @@ -6,7 +6,7 @@ flex-direction:row; justify-content: center; } - .round{ +.round{ display:flex; flex-direction:column; justify-content:center; @@ -14,13 +14,13 @@ list-style:none; padding:0; /* font-size: 1.5rem; */ - } - .round .spacer{ flex-grow:1;} - .round .spacer:first-child, - .round .spacer:last-child{ flex-grow:.5; } - .round .game-spacer{ - flex-grow:1; - } +} +.round .spacer{ flex-grow:1;} +.round .spacer:first-child, +.round .spacer:last-child{ flex-grow:.5; } +.round .game-spacer{ + flex-grow:1; +} /* * General Styles @@ -32,26 +32,44 @@ line-height:1.4em; } */ - li.game{ +li.game{ padding-left:20px; - } +} - .winner{ - color:green; - font-weight: bold; - } - .loser{ - color:grey; - } +.winner{ + color:green; + font-weight: bold; +} +.loser{ + color:grey; +} - li.game-top{ border-bottom:1px solid #aaa; } +li.game-top{ border-bottom:1px solid #aaa; } - li.game-spacer{ - border-right:1px solid #aaa; - min-height:10vh; - } +li.game-spacer{ + border-right:1px solid #aaa; + min-height:10vh; +} - li.game-bottom{ - border-top:1px solid #aaa; - } - \ No newline at end of file +li.game-bottom{ + border-top:1px solid #aaa; +} + + +.winnerDisplay { + display:flex; + flex-direction:row; + align-items: center; + border: 2px solid gray; + border-radius: 15px; + min-height: 10vh; + max-height: 40vh; + margin: auto 5px; + padding: 10px; +} +.winnerDisplay > p.winner { + color:green; +} +.winnerDisplay > div.winner { + margin-right: 10px; +} \ No newline at end of file diff --git a/src/client/src/index.css b/src/client/src/index.css index 8a0b7ef..6565c77 100644 --- a/src/client/src/index.css +++ b/src/client/src/index.css @@ -24,8 +24,6 @@ code { } .mainIcon{ - height: 65px; - width: 65px; border-radius: 50%; /* border: 5px dotted salmon; */ border: 3px solid #1ab35a;