Added a real loading icon

This commit is contained in:
Kristoffer Juelsenn 2022-04-09 14:02:59 +02:00
parent 9a27ca4a51
commit 3f6b62eef6
1 changed files with 11 additions and 4 deletions

View File

@ -112,27 +112,34 @@ function TournamentForm(props) {
<TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/> <TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/>
{/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */} {/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */}
<TextField type="text" multiline={true} id="descriptionInput" label="Description" placeholder="Description" InputLabelProps={{shrink: true}}/> <TextField type="text" multiline={true} id="descriptionInput" label="Description" placeholder="Description" InputLabelProps={{shrink: true}}/>
<Box> <Box flexGrow={1}>
<Grid container spacing={2} justifyContent="center">
<Grid item xs={4}>
<LocalizationProvider dateAdapter={AdapterDateFns}> <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} <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) => { onChange={(newValue) => {
setStartTime(newValue); setStartTime(newValue);
// console.log(new Date(newValue).toUTCString()); // console.log(new Date(newValue).toUTCString());
}} }}
renderInput={(params) => <TextField id="startDatePicker" {...params} />} renderInput={(params) => <TextField id="startDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
/> />
</LocalizationProvider> </LocalizationProvider>
</Grid>
<Grid item xs={4}>
<LocalizationProvider dateAdapter={AdapterDateFns}> <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} <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) => { onChange={(newValue) => {
setEndTime(newValue); setEndTime(newValue);
// console.log(new Date(newValue).toUTCString()); // console.log(new Date(newValue).toUTCString());
}} }}
renderInput={(params) => <TextField id="endDatePicker" {...params} />} renderInput={(params) => <TextField id="endDatePicker" {...params} sx={{margin: "0 2.5%"}} />}
/> />
</LocalizationProvider> </LocalizationProvider>
</Grid>
{/* <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} /> {/* <TextField type="datetime-local" id="startDatePicker" label="Start Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginRight: "2%"}} />
<TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginLeft: "2%"}} /> */} <TextField type="datetime-local" id="endDatePicker" label="End Time" InputLabelProps={{shrink: true}} sx={{width: "48%", marginLeft: "2%"}} /> */}
</Grid>
</Box> </Box>
<InputLabel id="max-teams-label">Maximum number of teams</InputLabel> <InputLabel id="max-teams-label">Maximum number of teams</InputLabel>