add page settings page

This commit is contained in:
MaysWind
2023-06-24 20:01:47 +08:00
parent 1c39819112
commit 46a1eda029
5 changed files with 89 additions and 50 deletions
+3 -40
View File
@@ -44,15 +44,10 @@
<f7-list-item :title="$t('Exchange Rates Data')" :after="exchangeRatesLastUpdateDate" link="/exchange_rates"></f7-list-item>
<f7-list-item>
<span>{{ $t('Auto Update Exchange Rates Data') }}</span>
<span>{{ $t('Auto-update Exchange Rates Data') }}</span>
<f7-toggle :checked="isAutoUpdateExchangeRatesData" @toggle:change="isAutoUpdateExchangeRatesData = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Auto Get Current Geographic Location') }}</span>
<f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Enable Thousands Separator') }}</span>
<f7-toggle :checked="isEnableThousandsSeparator" @toggle:change="isEnableThousandsSeparator = $event"></f7-toggle>
@@ -70,25 +65,17 @@
</select>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Amount In Home Page') }}</span>
<f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Account Balance') }}</span>
<f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
</f7-list-item>
<f7-list-item>
<span>{{ $t('Show Total Amount In Transaction List Page') }}</span>
<f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
</f7-list-item>
<f7-list-item :title="$t('Page Settings')" link="/settings/page"></f7-list-item>
<f7-list-item :title="$t('Statistics Settings')" link="/statistic/settings"></f7-list-item>
<f7-list-item>
<span>{{ $t('Enable Animate') }}</span>
<span>{{ $t('Enable Animation') }}</span>
<f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
</f7-list-item>
@@ -172,14 +159,6 @@ export default {
isEnableApplicationLock() {
return this.settingsStore.appSettings.applicationLock;
},
isAutoGetCurrentGeoLocation: {
get: function () {
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
},
set: function (value) {
this.settingsStore.setAutoGetCurrentGeoLocation(value);
}
},
isEnableThousandsSeparator: {
get: function () {
return this.settingsStore.appSettings.thousandsSeparator;
@@ -196,14 +175,6 @@ export default {
this.settingsStore.setCurrencyDisplayMode(value);
}
},
showAmountInHomePage: {
get: function () {
return this.settingsStore.appSettings.showAmountInHomePage;
},
set: function (value) {
this.settingsStore.setShowAmountInHomePage(value);
}
},
showAccountBalance: {
get: function () {
return this.settingsStore.appSettings.showAccountBalance;
@@ -212,14 +183,6 @@ export default {
this.settingsStore.setShowAccountBalance(value);
}
},
showTotalAmountInTransactionListPage: {
get: function () {
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
},
set: function (value) {
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
}
},
isEnableAnimate: {
get: function () {
return this.settingsStore.appSettings.animate;
@@ -0,0 +1,64 @@
<template>
<f7-page>
<f7-navbar :title="$t('Page Settings')" :back-link="$t('Back')"></f7-navbar>
<f7-block-title class="margin-top">{{ $t('Overview Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item>
<span>{{ $t('Show Amount') }}</span>
<f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
</f7-list-item>
</f7-list>
<f7-block-title>{{ $t('Transaction List Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item>
<span>{{ $t('Show Monthly Total Amount') }}</span>
<f7-toggle :checked="showTotalAmountInTransactionListPage" @toggle:change="showTotalAmountInTransactionListPage = $event"></f7-toggle>
</f7-list-item>
</f7-list>
<f7-block-title>{{ $t('Transaction Edit Page') }}</f7-block-title>
<f7-list strong inset dividers>
<f7-list-item>
<span>{{ $t('Automatically Add Geolocation') }}</span>
<f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
</f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.js';
export default {
computed: {
...mapStores(useSettingsStore),
showAmountInHomePage: {
get: function () {
return this.settingsStore.appSettings.showAmountInHomePage;
},
set: function (value) {
this.settingsStore.setShowAmountInHomePage(value);
}
},
showTotalAmountInTransactionListPage: {
get: function () {
return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
},
set: function (value) {
this.settingsStore.setShowTotalAmountInTransactionListPage(value);
}
},
isAutoGetCurrentGeoLocation: {
get: function () {
return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
},
set: function (value) {
this.settingsStore.setAutoGetCurrentGeoLocation(value);
}
}
}
};
</script>