4 files changed, 33 insertions, 13 deletions
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index d53777a5..89e04dde 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/UserPage.js
@@ -12,6 +12,7 @@ import LinkField from './form/LinkField';
 import { useTranslation } from './LocalizationProvider';
 import useUserAttributes from './attributes/useUserAttributes';
 import { sessionActions } from './store';
+import SelectField from './form/SelectField';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -90,7 +91,7 @@ const UserPage = () => {
                 <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>
@@ -101,7 +102,7 @@ const UserPage = () => {
                 <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>
@@ -112,13 +113,24 @@ const UserPage = () => {
                 <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 || ''}
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 || ''}
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js
index af90a73a..61d7ad3c 100644
--- a/modern/src/attributes/EditAttributesView.js
+++ b/modern/src/attributes/EditAttributesView.js
@@ -105,7 +105,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
   const convertToList = (attributes) => {
     const booleanList = [];
     const otherList = [];
-    const excludeAttributes = ['speedUnit', 'distanceUnit', 'volumeUnit'];
+    const excludeAttributes = ['speedUnit', 'distanceUnit', 'volumeUnit', 'timezone'];
     Object.keys(attributes || []).filter((key) => !excludeAttributes.includes(key)).forEach((key) => {
       const value = attributes[key];
       const type = getAttributeType(value);
diff --git a/modern/src/attributes/useUserAttributes.js b/modern/src/attributes/useUserAttributes.js
index 3c5ea019..9275596b 100644
--- a/modern/src/attributes/useUserAttributes.js
+++ b/modern/src/attributes/useUserAttributes.js
@@ -5,7 +5,7 @@ export default (t) => useMemo(() => ({
     name: t('attributeNotificationTokens'),
     type: 'string',
   },
-  'web.liveRouteLength': {
+  /*'web.liveRouteLength': {
     name: t('attributeWebLiveRouteLength'),
     type: 'number',
   },
@@ -44,9 +44,5 @@ export default (t) => useMemo(() => ({
   'ui.hidePositionAttributes': {
     name: t('attributeUiHidePositionAttributes'),
     type: 'string',
-  },
-  timezone: {
-    name: t('sharedTimezone'),
-    type: 'string',
-  },
+  },*/
 }), [t]);