code refactor

src/lib/i18n.js

@@ -441,20 +441,27 @@ function getAllTimezones(includeSystemDefault, translateFn) {
     const allTimezoneInfos = [];
 
     for (let i = 0; i < allTimezones.length; i++) {
+        const utcOffset = (allTimezones[i].timezoneName !== timezone.utcTimezoneName ? getTimezoneOffset(allTimezones[i].timezoneName) : '');
+        const displayName = translateFn(`timezone.${allTimezones[i].displayName}`);
+
         allTimezoneInfos.push({
             name: allTimezones[i].timezoneName,
-            utcOffset: (allTimezones[i].timezoneName !== timezone.utcTimezoneName ? getTimezoneOffset(allTimezones[i].timezoneName) : ''),
+            utcOffset: utcOffset,
             utcOffsetMinutes: getTimezoneOffsetMinutes(allTimezones[i].timezoneName),
-            displayName: translateFn(`timezone.${allTimezones[i].displayName}`)
+            displayName: displayName,
+            displayNameWithUtcOffset: `(UTC${utcOffset}) ${displayName}`
         });
     }
 
     if (includeSystemDefault) {
+        const defaultDisplayName = translateFn('System Default');
+
         allTimezoneInfos.push({
             name: '',
             utcOffset: defaultTimezoneOffset,
             utcOffsetMinutes: defaultTimezoneOffsetMinutes,
-            displayName: translateFn('System Default')
+            displayName: defaultDisplayName,
+            displayNameWithUtcOffset: `(UTC${defaultTimezoneOffset}) ${defaultDisplayName}`
         });
     }
 

src/views/mobile/SettingsPage.vue

@@ -33,9 +33,8 @@
                 :title="$t('Timezone')"
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
                 <select v-model="timeZone">
-                    <option :value="tz.name"
+                    <option :value="tz.name" :key="tz.name"
-                            :key="tz.name"
+                            v-for="tz in allTimezones">{{ tz.displayNameWithUtcOffset }}</option>
-                            v-for="tz in allTimezones">{{ `(UTC${tz.utcOffset}) ${tz.displayName}` }}</option>
                 </select>
             </f7-list-item>
 

src/views/mobile/transactions/EditPage.vue

@@ -225,9 +225,8 @@
                 :header="$t('Transaction Time Zone')"
                 smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Transaction Time Zone'), popupCloseLinkText: $t('Done') }">
                 <select v-model="transaction.timeZone">
-                    <option :value="timezone.name"
+                    <option :value="timezone.name" :key="timezone.name"
-                            :key="timezone.name"
+                            v-for="timezone in allTimezones">{{ timezone.displayNameWithUtcOffset }}</option>
-                            v-for="timezone in allTimezones">{{ `(UTC${timezone.utcOffset}) ${timezone.displayName}` }}</option>
                 </select>
                 <template #title>
                     <f7-block class="list-item-custom-title no-padding no-margin">