Timezone compensation
This commit is contained in:
parent
9cb0b1b55b
commit
93b5946ffe
|
|
@ -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) {
|
|||
<Grid item xs={4}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
|
||||
onChange={(newValue) => {
|
||||
setStartTime(newValue);
|
||||
// console.log(new Date(newValue).toUTCString());
|
||||
}}
|
||||
onChange={setStartTime}
|
||||
renderInput={(params) => <TextField id="startDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
|
|
@ -128,10 +123,7 @@ function TournamentForm(props) {
|
|||
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={endTime}
|
||||
onChange={(newValue) => {
|
||||
setEndTime(newValue);
|
||||
// console.log(new Date(newValue).toUTCString());
|
||||
}}
|
||||
onChange={setEndTime}
|
||||
renderInput={(params) => <TextField id="endDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
<Grid item xs={4}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DateTimePicker label={"Start Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm" inputFormat="yyyy-MM-dd HH:mm" value={startTime}
|
||||
onChange={(newValue) => {
|
||||
setStartTime(newValue);
|
||||
console.log(new Date(newValue).toUTCString());
|
||||
}}
|
||||
onChange={setStartTime}
|
||||
renderInput={(params) => <TextField id="editStartDate" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
|
|
@ -147,19 +150,13 @@ function ManageTournament(props) {
|
|||
<Grid item xs={4}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DateTimePicker label={"End Time"} inputVariant="outlined" ampm={false} mask="____-__-__ __:__" format="yyyy-MM-dd HH:mm:" inputFormat="yyyy-MM-dd HH:mm" value={endTime}
|
||||
onChange={(newValue) => {
|
||||
setEndTime(newValue);
|
||||
console.log(new Date(newValue).toUTCString());
|
||||
}}
|
||||
onChange={setEndTime}
|
||||
renderInput={(params) => <TextField id="editEndDate" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
{/* <TextField type="datetime-local" id="editStartDate" label="Edit Start Time" InputLabelProps={{shrink: true,}}/>
|
||||
<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>
|
||||
|
|
@ -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 = <>
|
||||
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</>
|
||||
|
||||
return (
|
||||
<>
|
||||
<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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TournamentManager(props) {
|
||||
const { tournamentId } = useParams();
|
||||
|
||||
|
|
@ -221,8 +194,6 @@ export default function TournamentManager(props) {
|
|||
<Button variant="contained" color="error" onClick={deleteTournament(tournamentId)} sx={{margin: "auto 5px"}} endIcon={<DeleteIcon />}>
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = <>
|
||||
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</>
|
||||
|
||||
return (
|
||||
<>
|
||||
<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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonLink(props) {
|
||||
return (
|
||||
|
|
@ -14,10 +39,17 @@ function ButtonLink(props) {
|
|||
export default function TournamentBar(props) {
|
||||
const { tournamentId } = useParams();
|
||||
return (
|
||||
<Paper sx={{width: "90vw", margin: "10px auto"}} component={Stack} direction="row" justifyContent="center">
|
||||
<Paper sx={{width: "90vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
|
||||
<Stack direction="row" paddingTop={'0.5%'}>
|
||||
<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" />
|
||||
</Stack>
|
||||
<Stack direction="row" paddingBottom={'0.5%'}>
|
||||
<ClipboardButton clipboardContent={"https://discord.gg/asura"} name="Discord Invite Link" />
|
||||
<ClipboardButton clipboardContent={"https://asura.feal.no/tournament/" + tournamentId} name="Tournament Link" />
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue