From c8756bb655895618ec614b397e8eee6938831f4e Mon Sep 17 00:00:00 2001 From: MaysWind Date: Tue, 4 May 2021 02:15:01 +0800 Subject: [PATCH] change transaction time component --- src/Mobile.vue | 5 ++ src/lib/utils.js | 15 ++++++ src/locales/en.js | 19 +++++++ src/locales/zh_Hans.js | 19 +++++++ src/mobile-main.js | 70 ++++++++++++++++++++++++++ src/views/mobile/transactions/Edit.vue | 45 ++++++++++------- 6 files changed, 156 insertions(+), 17 deletions(-) diff --git a/src/Mobile.vue b/src/Mobile.vue index 9e6e793d..e6b5f72b 100644 --- a/src/Mobile.vue +++ b/src/Mobile.vue @@ -57,6 +57,11 @@ export default { iosSwipeBackAnimateShadow: false, mdSwipeBackAnimateShadow: false }, + calendar: { + locale: 'en', + openIn: 'customModal', + backdrop: true + }, serviceWorker: { path: self.$settings.isProduction() ? './sw.js' : undefined, scope: './', diff --git a/src/lib/utils.js b/src/lib/utils.js index 7318cdea..dcc5a2f0 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -80,6 +80,18 @@ function getTimezoneOffsetMinutes(timezone) { return getUtcOffsetMinutesByUtcOffset(utcOffset); } +function getBrowserTimezoneOffsetMinutes() { + return -new Date().getTimezoneOffset(); +} + +function getLocalDatetimeFromUnixTime(unixTime) { + return new Date(unixTime * 1000); +} + +function getUnixTimeFromLocalDatetime(datetime) { + return datetime.getTime() / 1000; +} + function getActualUnixTimeForStore(unixTime, utcOffset, currentUtcOffset) { return unixTime - (utcOffset - currentUtcOffset) * 60; } @@ -632,6 +644,9 @@ export default { getUtcOffsetByUtcOffsetMinutes, getTimezoneOffset, getTimezoneOffsetMinutes, + getBrowserTimezoneOffsetMinutes, + getLocalDatetimeFromUnixTime, + getUnixTimeFromLocalDatetime, getActualUnixTimeForStore, getDummyUnixTimeForLocalUsage, getCurrentUnixTime, diff --git a/src/locales/en.js b/src/locales/en.js index 929088b7..81e667d9 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -36,6 +36,11 @@ export default { 'symbol': '{symbol} {amount}' } }, + 'input-format': { + 'datetime': { + 'long': 'm/d/yyyy hh::mm A', + }, + }, 'datetime': { 'Monday': { 'short': 'Mon', @@ -66,39 +71,51 @@ export default { 'long': 'Sunday' }, 'January': { + 'short': 'Jan', 'long': 'January' }, 'February': { + 'short': 'Feb', 'long': 'February' }, 'March': { + 'short': 'Mar', 'long': 'March' }, 'April': { + 'short': 'Apr', 'long': 'April' }, 'May': { + 'short': 'May', 'long': 'May' }, 'June': { + 'short': 'Jun', 'long': 'June' }, 'July': { + 'short': 'Jul', 'long': 'July' }, 'August': { + 'short': 'Aug', 'long': 'August' }, 'September': { + 'short': 'Sep', 'long': 'September' }, 'October': { + 'short': 'Oct', 'long': 'October' }, 'November': { + 'short': 'Nov', 'long': 'November' }, 'December': { + 'short': 'Dec', 'long': 'December' } }, @@ -655,6 +672,8 @@ export default { 'Custom Date': 'Custom Date', 'Begin Time': 'Begin Time', 'End Time': 'End Time', + 'Select Date': 'Select Date', + 'Select Time': 'Select Time', 'Custom': 'Custom', 'Pie Chart': 'Pie Chart', 'Bar Chart': 'Bar Chart', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index 40a9ece2..27702a5c 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -36,6 +36,11 @@ export default { 'symbol': '{symbol} {amount}' } }, + 'input-format': { + 'datetime': { + 'long': 'yyyy年m月d日 HH::mm', + }, + }, 'datetime': { 'Monday': { 'short': '周一', @@ -66,39 +71,51 @@ export default { 'long': '星期日' }, 'January': { + 'short': '1月', 'long': '1月' }, 'February': { + 'short': '2月', 'long': '2月' }, 'March': { + 'short': '3月', 'long': '3月' }, 'April': { + 'short': '4月', 'long': '4月' }, 'May': { + 'short': '5月', 'long': '5月' }, 'June': { + 'short': '6月', 'long': '6月' }, 'July': { + 'short': '7月', 'long': '7月' }, 'August': { + 'short': '8月', 'long': '8月' }, 'September': { + 'short': '9月', 'long': '9月' }, 'October': { + 'short': '10月', 'long': '10月' }, 'November': { + 'short': '11月', 'long': '11月' }, 'December': { + 'short': '12月', 'long': '12月' } }, @@ -655,6 +672,8 @@ export default { 'Custom Date': '自定义日期', 'Begin Time': '开始时间', 'End Time': '结束时间', + 'Select Date': '选择日期', + 'Select Time': '选择时间', 'Custom': '自定义', 'Pie Chart': '饼图', 'Bar Chart': '条形图', diff --git a/src/mobile-main.js b/src/mobile-main.js index 0951d508..ed5eeff7 100644 --- a/src/mobile-main.js +++ b/src/mobile-main.js @@ -29,6 +29,8 @@ import Framework7Radio from 'framework7/components/radio/radio'; import Framework7Toggle from 'framework7/components/toggle/toggle'; import Framework7SmartSelect from 'framework7/components/smart-select/smart-select'; import Framework7Grid from 'framework7/components/grid/grid'; +import Framework7Calendar from 'framework7/components/calendar/calendar'; +import Framework7Picker from 'framework7/components/picker/picker'; import Framework7InfiniteScroll from 'framework7/components/infinite-scroll/infinite-scroll'; import Framework7PullToRefresh from 'framework7/components/pull-to-refresh/pull-to-refresh'; import Framework7Searchbar from 'framework7/components/searchbar/searchbar'; @@ -121,6 +123,8 @@ Framework7.use(Framework7Radio); Framework7.use(Framework7Toggle); Framework7.use(Framework7SmartSelect); Framework7.use(Framework7Grid); +Framework7.use(Framework7Calendar); +Framework7.use(Framework7Picker); Framework7.use(Framework7InfiniteScroll); Framework7.use(Framework7PullToRefresh); Framework7.use(Framework7Searchbar); @@ -199,6 +203,72 @@ Vue.prototype.$locale = { defaultTimezoneOffsetMinutes: utils.getTimezoneOffsetMinutes(), getDefaultLanguage: getDefaultLanguage, getAllLanguages: getAllLanguages, + getAllLongMonthNames: function () { + return [ + i18n.t('datetime.January.long'), + i18n.t('datetime.February.long'), + i18n.t('datetime.March.long'), + i18n.t('datetime.April.long'), + i18n.t('datetime.May.long'), + i18n.t('datetime.June.long'), + i18n.t('datetime.July.long'), + i18n.t('datetime.August.long'), + i18n.t('datetime.September.long'), + i18n.t('datetime.October.long'), + i18n.t('datetime.November.long'), + i18n.t('datetime.December.long') + ]; + }, + getAllShortMonthNames: function () { + return [ + i18n.t('datetime.January.short'), + i18n.t('datetime.February.short'), + i18n.t('datetime.March.short'), + i18n.t('datetime.April.short'), + i18n.t('datetime.May.short'), + i18n.t('datetime.June.short'), + i18n.t('datetime.July.short'), + i18n.t('datetime.August.short'), + i18n.t('datetime.September.short'), + i18n.t('datetime.October.short'), + i18n.t('datetime.November.short'), + i18n.t('datetime.December.short') + ]; + }, + getAllLongWeekdayNames: function () { + return [ + i18n.t('datetime.Sunday.long'), + i18n.t('datetime.Monday.long'), + i18n.t('datetime.Tuesday.long'), + i18n.t('datetime.Wednesday.long'), + i18n.t('datetime.Thursday.long'), + i18n.t('datetime.Friday.long'), + i18n.t('datetime.Saturday.long') + ]; + }, + getAllShortWeekdayNames: function () { + return [ + i18n.t('datetime.Sunday.short'), + i18n.t('datetime.Monday.short'), + i18n.t('datetime.Tuesday.short'), + i18n.t('datetime.Wednesday.short'), + i18n.t('datetime.Thursday.short'), + i18n.t('datetime.Friday.short'), + i18n.t('datetime.Saturday.short') + ]; + }, + getInputTimeIntlDateTimeFormatOptions: function () { + const hourMinuteFormat = i18n.t('input-format.datetime.long'); + const is24HourFormat = hourMinuteFormat.indexOf('H') > 0; + const hour2Digits = (hourMinuteFormat.indexOf('HH') > 0) || (hourMinuteFormat.indexOf('hh') > 0); + const minute2Digits = hourMinuteFormat.indexOf(':mm') > 0; + + return { + hour12: !is24HourFormat, + hour: hour2Digits ? '2-digit' : 'numeric', + minute: minute2Digits ? '2-digit' : 'numeric' + } + }, getLanguage: getLanguage, setLanguage: function (locale) { if (settings.getLanguage() !== locale) { diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue index d9504b19..65dcb75f 100644 --- a/src/views/mobile/transactions/Edit.vue +++ b/src/views/mobile/transactions/Edit.vue @@ -196,10 +196,21 @@ @@ -295,7 +306,7 @@ export default { transaction: { type: defaultType, unixTime: now, - time: self.$utilities.formatUnixTime(now, 'YYYY-MM-DDTHH:mm'), + time: self.$utilities.getLocalDatetimeFromUnixTime(now), timeZone: currentTimezone, utcOffset: self.$utilities.getTimezoneOffsetMinutes(currentTimezone), expenseCategory: '', @@ -362,8 +373,8 @@ export default { defaultCurrency() { return this.$store.getters.currentUserDefaultCurrency; }, - defaultTimezoneOffset() { - return this.$locale.defaultTimezoneOffset; + defaultFirstDayOfWeek() { + return this.$store.getters.currentUserFirstDayOfWeek; }, allTimezones() { return this.$locale.getAllTimezones(true); @@ -526,13 +537,17 @@ export default { } }, 'transaction.time': function (newValue) { - if (!newValue) { - newValue = this.$utilities.formatUnixTime(this.$utilities.getCurrentUnixTime(), 'YYYY-MM-DDTHH:mm'); - this.transaction.time = newValue; + if (this.$utilities.isArray(newValue)) { + newValue = newValue[0]; } - if (this.$utilities.formatUnixTime(this.transaction.unixTime, 'YYYY-MM-DDTHH:mm') !== newValue) { - this.transaction.unixTime = this.$utilities.getUnixTime(newValue); + if (!newValue) { + newValue = this.$utilities.getLocalDatetimeFromUnixTime(this.$utilities.getCurrentUnixTime()); + this.transaction.time = [newValue]; + } + + if (this.$utilities.getUnixTimeFromLocalDatetime(newValue) !== this.transaction.unixTime) { + this.transaction.unixTime = this.$utilities.getUnixTimeFromLocalDatetime(newValue); } }, 'transaction.timeZone': function (newValue) { @@ -656,8 +671,8 @@ export default { if (self.mode === 'edit' || self.mode === 'view') { self.transaction.utcOffset = transaction.utcOffset; self.transaction.timeZone = null; - self.transaction.unixTime = self.$utilities.getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes()); - self.transaction.time = self.$utilities.formatUnixTime(self.transaction.unixTime, 'YYYY-MM-DDTHH:mm'); + self.transaction.unixTime = self.$utilities.getDummyUnixTimeForLocalUsage(transaction.time, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes()); + self.transaction.time = [self.$utilities.getLocalDatetimeFromUnixTime(self.transaction.unixTime)]; } self.transaction.sourceAccountId = transaction.sourceAccountId; @@ -706,7 +721,7 @@ export default { const submitTransaction = { type: self.transaction.type, - time: self.$utilities.getActualUnixTimeForStore(self.transaction.unixTime, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes()), + time: self.$utilities.getActualUnixTimeForStore(self.transaction.unixTime, self.transaction.utcOffset, self.$utilities.getBrowserTimezoneOffsetMinutes()), sourceAccountId: self.transaction.sourceAccountId, sourceAmount: self.transaction.sourceAmount, destinationAccountId: '0', @@ -913,10 +928,6 @@ export default { text-overflow: ellipsis; } -.transaction-edit-time input[type="datetime-local"] { - max-width: inherit; -} - .transaction-edit-timezone-name { padding-left: 4px; }