Added temp date pickers, we love fns

This commit is contained in:
Kristoffer Juelsenn 2022-04-06 17:03:32 +02:00
parent 61f053ef6d
commit d790ed3df7
3 changed files with 52 additions and 21 deletions

View File

@ -8,13 +8,15 @@
"name": "tournament-server",
"version": "1.0.0",
"dependencies": {
"@date-io/date-fns": "^2.11.0",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.76",
"@mui/lab": "^5.0.0-alpha.61",
"@mui/material": "^5.5.2",
"@mui/styled-engine-sc": "^5.5.2",
"bootstrap": "^5.1.3",
"date-fns": "^2.27.0",
"iarn": "0.0.0",
"less": "^4.1.2",
"react": "^17.0.2",
@ -5574,6 +5576,18 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -19441,6 +19455,11 @@
"whatwg-url": "^8.0.0"
}
},
"date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
},
"debug": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",

View File

@ -6,13 +6,15 @@
"private": true,
"homepage": "",
"dependencies": {
"@date-io/date-fns": "^2.11.0",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.1",
"@mui/lab": "^5.0.0-alpha.76",
"@mui/lab": "^5.0.0-alpha.61",
"@mui/material": "^5.5.2",
"@mui/styled-engine-sc": "^5.5.2",
"bootstrap": "^5.1.3",
"date-fns": "^2.27.0",
"iarn": "0.0.0",
"less": "^4.1.2",
"react": "^17.0.2",

View File

@ -5,6 +5,9 @@ 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 DatePicker from '@mui/lab/DatePicker';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
function postTournament(showError, tournamentName, tournamentDescription, tournamentStartDate, tournamentEndDate, tournamentMaxTeams) {
if (!tournamentName || tournamentName === "") {
@ -98,6 +101,8 @@ function TournamentForm(props) {
{ value: 7, label: "128",}
];
const [value, setValue] = React.useState([null, null]);
return (
<>
<form>
@ -106,26 +111,31 @@ function TournamentForm(props) {
<TextField type="text" id="nameInput" label="Tournament Name" placeholder="Tournament Name" InputLabelProps={{shrink: true}}/>
{/* <InputLabel htmlFor="descriptionInput">Description: </InputLabel */}
<TextField type="text" multiline={true} id="descriptionInput" label="Description" placeholder="Description" InputLabelProps={{shrink: true}}/>
{/* <Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1} justifyContent="center" wrap="wrap">
<Grid item xs={3}>
<Typography>Edit Image:</Typography>
</Grid>
<Grid item xs={2}>
<Container>
<label htmlFor="editImage">
<Button variant="contained" component="span" endIcon={<FileUploadIcon />}>
Upload
</Button>
<input accept="image/*" id="editImage" multiple type="file" style={{ display: 'none' }} />
</label>
</Container>
</Grid>
</Grid>
</Box> */}
<Box>
<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%"}} />
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Start Time"
value={value}
id="startDatePicker"
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="End Time"
value={value}
id="endDatePicker"
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
{/* <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%"}} /> */}
</Box>
<InputLabel id="max-teams-label">Maximum number of teams</InputLabel>