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

added new date inputs, not fully functional

Browse Source
This commit is contained in:
Kristoffer Juelsenn 2022-04-06 22:44:05 +02:00
parent 30637a158d
commit fa15dbd364
2 changed files with 67 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/client/src/TournamentCreator.js
View File

@ -4,7 +4,6 @@ import AppBar from "./components/AsuraBar";
import ErrorSnackbar from "./components/ErrorSnackbar";
import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
import FileUploadIcon from '@mui/icons-material/FileUpload';
import DateTimePicker from '@mui/lab/DateTimePicker';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
@ -90,6 +89,7 @@ function TournamentForm(props) {
endTime,
maxTeams
);
console.log(startTime, endTime);
}
const marks = [
@ -101,7 +101,8 @@ function TournamentForm(props) {
{ value: 7, label: "128",}
];
const [value, setValue] = React.useState([null, null]);
const [startValue, setStartValue] = React.useState(new Date());
const [endValue, setEndValue] = React.useState(new Date());
return (
<>
@ -114,24 +115,34 @@ function TournamentForm(props) {
<Box>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
label="Start Time"
value={value}
id="startDatePicker"
label={"Start Time"}
inputVariant="outlined"
ampm={false}
mask="____-__-__ __:__"
format="yyyy-MM-dd HH:mm"
inputFormat="yyyy-MM-dd HH:mm"
value={startValue}
onChange={(newValue) => {
setValue(newValue);
setStartValue(newValue);
console.log(new Date(newValue).toUTCString());
}}
renderInput={(params) => <TextField {...params} />}
renderInput={(params) => <TextField id="startDatePicker" {...params} />}
/>
</LocalizationProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
label="End Time"
value={value}
id="endDatePicker"
label={"End Time"}
inputVariant="outlined"
ampm={false}
mask="____-__-__ __:__"
format="yyyy-MM-dd HH:mm"
inputFormat="yyyy-MM-dd HH:mm"
value={endValue}
onChange={(newValue) => {
setValue(newValue);
setEndValue(newValue);
console.log(new Date(newValue).toUTCString());
}}
renderInput={(params) => <TextField {...params} />}
renderInput={(params) => <TextField id="endDatePicker" {...params} />}
/>
</LocalizationProvider>
{/* <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />

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

@ -6,9 +6,11 @@ import TournamentBar from "./components/TournamentBar";
import { useParams } from "react-router-dom";
import { Button, TextField, Grid, Box, Container, Paper, Stack } from "@mui/material";
import { Snackbar, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import FileUploadIcon from '@mui/icons-material/FileUpload';
import CloseIcon from '@mui/icons-material/Close';
import DeleteIcon from '@mui/icons-material/Delete';
import DateTimePicker from '@mui/lab/DateTimePicker';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
let submitChanges = curryTournamentId => event => {
event.preventDefault();
@ -113,9 +115,14 @@ function ManageTournament(props) {
document.getElementById("editDesc").value = data.data.description;
document.getElementById("editStartDate").value = data.data.startTime.slice(0, 16);
document.getElementById("editEndDate").value = data.data.endTime.slice(0, 16);
console.log(data.data.endTime);
console.log(data.data.endTime.slice(0, 16));
})
.catch((err) => showError(err));
}, []);
const [startValue, setStartValue] = React.useState();
const [endValue, setEndValue] = React.useState();
return (
<>
@ -123,9 +130,42 @@ function ManageTournament(props) {
<Stack sx={{minHeight: "30vh", margin: "10px auto"}} direction="column" justifyContent="center" spacing={2} align="center">
<TextField type="text" id="editName" label="Edit Name:" placeholder="Edit Name" InputLabelProps={{shrink: true}}/>
<TextField type="text" multiline={true} id="editDesc" label="Edit Description:" placeholder="Edit Description" InputLabelProps={{shrink: true}} />
<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}}/>
<Box>
<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={startValue}
onChange={(newValue) => {
setStartValue(newValue);
console.log(new Date(newValue).toUTCString());
}}
renderInput={(params) => <TextField id="editStartDate" {...params} />}
/>
</LocalizationProvider>
<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={endValue}
onChange={(newValue) => {
setEndValue(newValue);
console.log(new Date(newValue).toUTCString());
}}
renderInput={(params) => <TextField id="editEndDate" {...params} />}
/>
</LocalizationProvider>
</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