1 files changed, 15 insertions, 3 deletions
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 5d47c35b..139de08e 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -13,6 +13,7 @@ import useDeviceAttributes from '../attributes/useDeviceAttributes';
 import useUserAttributes from '../attributes/useUserAttributes';
 import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
+import SelectField from '../form/SelectField';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -113,7 +114,7 @@ const ServerPage = () => {
                   <InputLabel>{t('settingsSpeedUnit')}</InputLabel>
                   <Select
                     value={item.attributes.speedUnit || 'kn'}
-                    onChange={(event) => setItem({ ...item, attributes: { ...item.attributes, speedUnit: event.target.value } })}
+                    onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, speedUnit: e.target.value } })}
                   >
                     <MenuItem value="kn">{t('sharedKn')}</MenuItem>
                     <MenuItem value="kmh">{t('sharedKmh')}</MenuItem>
@@ -124,7 +125,7 @@ const ServerPage = () => {
                   <InputLabel>{t('settingsDistanceUnit')}</InputLabel>
                   <Select
                     value={item.attributes.distanceUnit || 'km'}
-                    onChange={(event) => setItem({ ...item, attributes: { ...item.attributes, distanceUnit: event.target.value } })}
+                    onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, distanceUnit: e.target.value } })}
                   >
                     <MenuItem value="km">{t('sharedKm')}</MenuItem>
                     <MenuItem value="mi">{t('sharedMi')}</MenuItem>
@@ -135,13 +136,24 @@ const ServerPage = () => {
                   <InputLabel>{t('settingsVolumeUnit')}</InputLabel>
                   <Select
                     value={item.attributes.volumeUnit || 'ltr'}
-                    onChange={(event) => setItem({ ...item, attributes: { ...item.attributes, volumeUnit: event.target.value } })}
+                    onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, volumeUnit: e.target.value } })}
                   >
                     <MenuItem value="ltr">{t('sharedLiter')}</MenuItem>
                     <MenuItem value="usGal">{t('sharedUsGallon')}</MenuItem>
                     <MenuItem value="impGal">{t('sharedImpGallon')}</MenuItem>
                   </Select>
                 </FormControl>
+                <SelectField
+                  margin="normal"
+                  value={item.attributes.timezone || ''}
+                  emptyValue={''}
+                  onChange={(e) => setItem({ ...item, attributes: { ...item.attributes, timezone: e.target.value } })}
+                  endpoint="/api/server/timezones"
+                  keyGetter={(it) => it}
+                  titleGetter={(it) => it}
+                  label={t('sharedTimezone')}
+                  variant="filled"
+                />
                 <TextField
                   margin="normal"
                   value={item.poiLayer || ''}