diff --git a/src/client/src/TournamentCreator.js b/src/client/src/TournamentCreator.js index b2b1cd2..00a6a8b 100644 --- a/src/client/src/TournamentCreator.js +++ b/src/client/src/TournamentCreator.js @@ -17,11 +17,11 @@ function postTournament(showError, tournamentName, tournamentDescription, tourna showError("Tournament description cannot be empty"); return; } - if (!tournamentStartDate || tournamentStartDate === "") { + if (!tournamentStartDate || tournamentStartDate === "" || tournamentStartDate === 0) { showError("Tournament start date cannot be empty"); return; } - if (!tournamentEndDate || tournamentEndDate === "") { + if (!tournamentEndDate || tournamentEndDate === "" || tournamentEndDate === 0) { showError("Tournament end date cannot be empty"); return; } @@ -75,15 +75,14 @@ function TournamentForm(props) { setMaxTeamsExponent(event.target.value); } - const [startTime, setStartTime] = React.useState([new Date(), new Date()]); - const [endTime, setEndTime] = React.useState([new Date(), new Date()]); + const [startTime, setStartTime] = React.useState(new Date()); + const [endTime, setEndTime] = React.useState(new Date()); function submitTournament(event) { event.preventDefault(); - console.log(maxTeamsExponent) let maxTeams = Math.pow(2, maxTeamsExponent); - let tournamentStart = new Date(startTime).toUTCString(); - let tournamentEnd = new Date(endTime).toUTCString(); + let tournamentStart = new Date(startTime).valueOf() - new Date().getTimezoneOffset() * 60000; + let tournamentEnd = new Date(endTime).valueOf() - new Date().getTimezoneOffset() * 60000; postTournament( props.showError, document.getElementById("nameInput").value, @@ -92,7 +91,6 @@ function TournamentForm(props) { tournamentEnd, maxTeams ); - console.log(tournamentStart, tournamentEnd); } const marks = [ @@ -116,10 +114,7 @@ function TournamentForm(props) { { - setStartTime(newValue); - // console.log(new Date(newValue).toUTCString()); - }} + onChange={setStartTime} renderInput={(params) => } /> @@ -128,10 +123,7 @@ function TournamentForm(props) { { - setEndTime(newValue); - // console.log(new Date(newValue).toUTCString()); - }} + onChange={setEndTime} renderInput={(params) => } /> diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index 1196c06..0420b0f 100644 --- a/src/client/src/TournamentManager.js +++ b/src/client/src/TournamentManager.js @@ -49,14 +49,13 @@ let submitChanges = curryTournamentId => event => { return; } - tournamentStartDate = new Date(tournamentStartDate).toUTCString(); - tournamentEndDate = new Date(tournamentEndDate).toUTCString(); + tournamentStartDate = new Date(tournamentStartDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000; + tournamentEndDate = new Date(tournamentEndDate).valueOf() - new Date().getTimezoneOffset() * 60 * 1000; let formData = new FormData(); formData.append("name", tournamentName); formData.append("description", tournamentDescription); - // formData.append("image", tournamentImageFile); formData.append("startDate", tournamentStartDate); formData.append("endDate", tournamentEndDate); // formData.append("teamLimit", tournamentMaxTeams); @@ -104,8 +103,8 @@ let deleteTournament = tournamentId => event => { function ManageTournament(props) { - const [startTime, setStartTime] = React.useState([new Date(),null]); - const [endTime, setEndTime] = React.useState([new Date(),null]); + const [startTime, setStartTime] = React.useState(new Date()); + const [endTime, setEndTime] = React.useState(new Date()); React.useEffect(() => { fetch( @@ -119,11 +118,18 @@ function ManageTournament(props) { document.getElementById("editName").value = data.data.name; document.getElementById("editDesc").value = data.data.description; - setStartTime(data.data.startTime.slice(0, 16)); - setEndTime(data.data.endTime.slice(0, 16)); + // Get the time from the server, add the local timezone offset and set the input fields + let startDate = new Date(data.data.startTime.slice(0, 16)); + let endDate = new Date(data.data.endTime.slice(0, 16)); + let localTimeOffset = new Date().getTimezoneOffset() * 60*1000; // Minutes -> Milliseconds + startDate = new Date(startDate.getTime() - localTimeOffset); + endDate = new Date(endDate.getTime() - localTimeOffset); + + setStartTime(startDate); + setEndTime(endDate); }) .catch((err) => showError(err)); - }, [endTime, props.tournamentId, startTime]); + }, [props.tournamentId]); return ( <> @@ -136,10 +142,7 @@ function ManageTournament(props) { { - setStartTime(newValue); - console.log(new Date(newValue).toUTCString()); - }} + onChange={setStartTime} renderInput={(params) => } /> @@ -147,19 +150,13 @@ function ManageTournament(props) { { - setEndTime(newValue); - console.log(new Date(newValue).toUTCString()); - }} + onChange={setEndTime} renderInput={(params) => } /> - {/* - */} - @@ -175,30 +172,6 @@ function showError(error) { console.error(error); } -function ClipboardButton(props) { - const [open, setOpen] = React.useState(false); - function copyString() { - navigator.clipboard.writeText(props.clipboardContent || ""); - setOpen(true); - } - const handleClose = (event, reason) => { - if (reason === 'clickaway') { return } - setOpen(false); - }; - const closeAction = <> - - - - - - return ( - <> - - - - ); -} - export default function TournamentManager(props) { const { tournamentId } = useParams(); @@ -221,8 +194,6 @@ export default function TournamentManager(props) { - - diff --git a/src/client/src/components/TournamentBar.js b/src/client/src/components/TournamentBar.js index 153eb2c..b196488 100644 --- a/src/client/src/components/TournamentBar.js +++ b/src/client/src/components/TournamentBar.js @@ -1,7 +1,32 @@ 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" +import { Stack, Paper, Typography, Box, Button, Grid, Snackbar, IconButton } from "@mui/material" +import CloseIcon from '@mui/icons-material/Close'; + +function ClipboardButton(props) { + const [open, setOpen] = React.useState(false); + function copyString() { + navigator.clipboard.writeText(props.clipboardContent || ""); + setOpen(true); + } + const handleClose = (event, reason) => { + if (reason === 'clickaway') { return } + setOpen(false); + }; + const closeAction = <> + + + + + + return ( + <> + + + + ); +} function ButtonLink(props) { return ( @@ -14,10 +39,17 @@ function ButtonLink(props) { export default function TournamentBar(props) { const { tournamentId } = useParams(); return ( - + + + + + + + + ) } \ No newline at end of file