show time difference between the transaction timezone and the default timezone on the transaction edit/view page

This commit is contained in:
MaysWind
2023-06-15 01:31:29 +08:00
parent 28dc2e425a
commit 5b334eb2d5
4 changed files with 56 additions and 0 deletions
@@ -233,6 +233,7 @@
<f7-block class="list-item-custom-title no-padding no-margin">
<span>{{ `(${transactionDisplayTimezone})` }}</span>
<span class="transaction-edit-timezone-name" v-if="transaction.timeZone || transaction.timeZone === ''">{{ transactionDisplayTimezoneName }}</span>
<span class="transaction-edit-timezone-name" v-else-if="!transaction.timeZone && transaction.timeZone !== ''">{{ transactionTimezoneTimeDifference }}</span>
</f7-block>
</template>
</f7-list-item>
@@ -347,6 +348,7 @@ import {
} from '@/lib/common.js';
import {
getCurrentUnixTime,
getTimeDifferenceHoursAndMinutes,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffsetMinutes,
getUtcOffsetByUtcOffsetMinutes,
@@ -605,6 +607,36 @@ export default {
transactionDisplayTimezoneName() {
return getNameByKeyValue(this.allTimezones, this.transaction.timeZone, 'name', 'displayName');
},
transactionTimezoneTimeDifference() {
const defaultTimezoneOffset = getTimezoneOffsetMinutes();
const offsetTime = getTimeDifferenceHoursAndMinutes(this.transaction.utcOffset - defaultTimezoneOffset);
if (this.transaction.utcOffset > defaultTimezoneOffset) {
if (offsetTime.offsetMinutes) {
return this.$t('format.misc.hoursMinutesAheadOfDefaultTimezone', {
hours: offsetTime.offsetHours,
minutes: offsetTime.offsetMinutes
});
} else {
return this.$t('format.misc.hoursAheadOfDefaultTimezone', {
hours: offsetTime.offsetHours
});
}
} else if (this.transaction.utcOffset < defaultTimezoneOffset) {
if (offsetTime.offsetMinutes) {
return this.$t('format.misc.hoursMinutesBehindDefaultTimezone', {
hours: offsetTime.offsetHours,
minutes: offsetTime.offsetMinutes
});
} else {
return this.$t('format.misc.hoursBehindDefaultTimezone', {
hours: offsetTime.offsetHours
});
}
} else {
return this.$t('Same time as default timezone');
}
},
sourceAmountClass() {
const classes = {
'readonly': this.mode === 'view',