zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change transaction time component

Browse Source
This commit is contained in:
MaysWind
2021-05-04 02:15:01 +08:00
parent 112180f77f
commit c8756bb655
6 changed files with 156 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Mobile.vue
+5
View File
@@ -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: './',
src/lib/utils.js
+15
View File
@@ -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,
src/locales/en.js
+19
View File
@@ -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',
src/locales/zh_Hans.js
+19
View File
@@ -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': '条形图',
src/mobile-main.js
+70
View File
@@ -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) {
src/views/mobile/transactions/Edit.vue
+28 -17
View File
@@ -196,10 +196,21 @@
<f7-list-input
:label="$t('Transaction Time')"
type="datetime-local"
type="datepicker"
class="transaction-edit-time"
:calendar-params="{
timePicker: true,
dateFormat: $t('input-format.datetime.long'),
firstDay: defaultFirstDayOfWeek,
toolbarCloseText: $t('Done'),
timePickerPlaceholder: $t('Select Time'),
timePickerFormat: $locale.getInputTimeIntlDateTimeFormatOptions(),
monthNames: $locale.getAllLongMonthNames(),
monthNamesShort: $locale.getAllShortMonthNames(),
dayNames: $locale.getAllLongWeekdayNames(),
dayNamesShort: $locale.getAllShortWeekdayNames()}"
:value="transaction.time"
@input="transaction.time = $event.target.value"
@calendar:change="transaction.time = $event"
>
</f7-list-input>
@@ -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;
}