diff options
Diffstat (limited to 'modern/src/settings/ServerPage.js')
| -rw-r--r-- | modern/src/settings/ServerPage.js | 99 |
1 files changed, 50 insertions, 49 deletions
diff --git a/modern/src/settings/ServerPage.js b/modern/src/settings/ServerPage.js index 80353deb..7bc2b203 100644 --- a/modern/src/settings/ServerPage.js +++ b/modern/src/settings/ServerPage.js @@ -28,12 +28,15 @@ import SettingsMenu from './components/SettingsMenu'; import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes'; import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes'; import { useCatch } from '../reactHelper'; +import { FormGroup } from '@material-ui/core'; const useStyles = makeStyles((theme) => ({ container: { marginTop: theme.spacing(2), }, buttons: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), display: 'flex', justifyContent: 'space-evenly', '& > *': { @@ -41,7 +44,10 @@ const useStyles = makeStyles((theme) => ({ }, }, details: { + display: 'flex', flexDirection: 'column', + gap: theme.spacing(2), + paddingBottom: theme.spacing(3), }, })); @@ -85,33 +91,29 @@ const ServerPage = () => { </AccordionSummary> <AccordionDetails className={classes.details}> <TextField - margin="normal" value={item.mapUrl || ''} onChange={(event) => setItem({ ...item, mapUrl: event.target.value })} label={t('mapCustomLabel')} /> <TextField - margin="normal" type="number" value={item.latitude || 0} onChange={(event) => setItem({ ...item, latitude: Number(event.target.value) })} label={t('positionLatitude')} /> <TextField - margin="normal" type="number" value={item.longitude || 0} onChange={(event) => setItem({ ...item, longitude: Number(event.target.value) })} label={t('positionLongitude')} /> <TextField - margin="normal" type="number" value={item.zoom || 0} onChange={(event) => setItem({ ...item, zoom: Number(event.target.value) })} label={t('serverZoom')} /> - <FormControl margin="normal" fullWidth> + <FormControl fullWidth> <InputLabel>{t('settingsCoordinateFormat')}</InputLabel> <Select label={t('settingsCoordinateFormat')} @@ -123,7 +125,7 @@ const ServerPage = () => { <MenuItem value="dms">{t('sharedDegreesMinutesSeconds')}</MenuItem> </Select> </FormControl> - <FormControl margin="normal" fullWidth> + <FormControl fullWidth> <InputLabel>{t('settingsSpeedUnit')}</InputLabel> <Select label={t('settingsSpeedUnit')} @@ -135,7 +137,7 @@ const ServerPage = () => { <MenuItem value="mph">{t('sharedMph')}</MenuItem> </Select> </FormControl> - <FormControl margin="normal" fullWidth> + <FormControl fullWidth> <InputLabel>{t('settingsDistanceUnit')}</InputLabel> <Select label={t('settingsDistanceUnit')} @@ -147,7 +149,7 @@ const ServerPage = () => { <MenuItem value="nmi">{t('sharedNmi')}</MenuItem> </Select> </FormControl> - <FormControl margin="normal" fullWidth> + <FormControl fullWidth> <InputLabel>{t('settingsVolumeUnit')}</InputLabel> <Select label={t('settingsVolumeUnit')} @@ -160,7 +162,6 @@ const ServerPage = () => { </Select> </FormControl> <SelectField - margin="normal" value={item.attributes.timezone || ''} emptyValue="" onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })} @@ -170,25 +171,25 @@ const ServerPage = () => { label={t('sharedTimezone')} /> <TextField - margin="normal" value={item.poiLayer || ''} onChange={(event) => setItem({ ...item, poiLayer: event.target.value })} label={t('mapPoiLayer')} /> <TextField - margin="normal" value={item.announcement || ''} onChange={(event) => setItem({ ...item, announcement: event.target.value })} label={t('serverAnnouncement')} /> - <FormControlLabel - control={<Checkbox checked={item.twelveHourFormat} onChange={(event) => setItem({ ...item, twelveHourFormat: event.target.checked })} />} - label={t('settingsTwelveHourFormat')} - /> - <FormControlLabel - control={<Checkbox checked={item.forceSettings} onChange={(event) => setItem({ ...item, forceSettings: event.target.checked })} />} - label={t('serverForceSettings')} - /> + <FormGroup> + <FormControlLabel + control={<Checkbox checked={item.twelveHourFormat} onChange={(event) => setItem({ ...item, twelveHourFormat: event.target.checked })} />} + label={t('settingsTwelveHourFormat')} + /> + <FormControlLabel + control={<Checkbox checked={item.forceSettings} onChange={(event) => setItem({ ...item, forceSettings: event.target.checked })} />} + label={t('serverForceSettings')} + /> + </FormGroup> </AccordionDetails> </Accordion> <Accordion> @@ -198,26 +199,28 @@ const ServerPage = () => { </Typography> </AccordionSummary> <AccordionDetails className={classes.details}> - <FormControlLabel - control={<Checkbox checked={item.registration} onChange={(event) => setItem({ ...item, registration: event.target.checked })} />} - label={t('serverRegistration')} - /> - <FormControlLabel - control={<Checkbox checked={item.readonly} onChange={(event) => setItem({ ...item, readonly: event.target.checked })} />} - label={t('serverReadonly')} - /> - <FormControlLabel - control={<Checkbox checked={item.deviceReadonly} onChange={(event) => setItem({ ...item, deviceReadonly: event.target.checked })} />} - label={t('userDeviceReadonly')} - /> - <FormControlLabel - control={<Checkbox checked={item.limitCommands} onChange={(event) => setItem({ ...item, limitCommands: event.target.checked })} />} - label={t('userLimitCommands')} - /> - <FormControlLabel - control={<Checkbox checked={item.disableReports} onChange={(event) => setItem({ ...item, disableReports: event.target.checked })} />} - label={t('userDisableReports')} - /> + <FormGroup> + <FormControlLabel + control={<Checkbox checked={item.registration} onChange={(event) => setItem({ ...item, registration: event.target.checked })} />} + label={t('serverRegistration')} + /> + <FormControlLabel + control={<Checkbox checked={item.readonly} onChange={(event) => setItem({ ...item, readonly: event.target.checked })} />} + label={t('serverReadonly')} + /> + <FormControlLabel + control={<Checkbox checked={item.deviceReadonly} onChange={(event) => setItem({ ...item, deviceReadonly: event.target.checked })} />} + label={t('userDeviceReadonly')} + /> + <FormControlLabel + control={<Checkbox checked={item.limitCommands} onChange={(event) => setItem({ ...item, limitCommands: event.target.checked })} />} + label={t('userLimitCommands')} + /> + <FormControlLabel + control={<Checkbox checked={item.disableReports} onChange={(event) => setItem({ ...item, disableReports: event.target.checked })} />} + label={t('userDisableReports')} + /> + </FormGroup> </AccordionDetails> </Accordion> <Accordion> @@ -236,16 +239,14 @@ const ServerPage = () => { </Accordion> </> )} - <FormControl fullWidth margin="normal"> - <div className={classes.buttons}> - <Button type="button" color="primary" variant="outlined" onClick={() => navigate(-1)}> - {t('sharedCancel')} - </Button> - <Button type="button" color="primary" variant="contained" onClick={handleSave}> - {t('sharedSave')} - </Button> - </div> - </FormControl> + <div className={classes.buttons}> + <Button type="button" color="primary" variant="outlined" onClick={() => navigate(-1)}> + {t('sharedCancel')} + </Button> + <Button type="button" color="primary" variant="contained" onClick={handleSave}> + {t('sharedSave')} + </Button> + </div> </Container> </PageLayout> ); |