add toolbar in statistics page

src/Mobile.vue

@@ -163,6 +163,15 @@ i.icon.la, i.icon.las, i.icon.lab {
     height: 13px;
 }
 
+.toolbar-item-auto-size .toolbar-inner {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+.toolbar-item-auto-size .toolbar-inner > .link {
+    width: auto;
+}
+
 .tabbar-text-with-ellipsis > span {
     display: block;
     width: 100%;

src/locales/en.js

@@ -485,6 +485,8 @@ export default {
     'Begin Time': 'Begin Time',
     'End Time': 'End Time',
     'Custom': 'Custom',
+    'Pie Chart': 'Pie Chart',
+    'Bar Chart': 'Bar Chart',
     'User': 'User',
     'Application': 'Application',
     'Details': 'Details',

src/locales/zh_Hans.js

@@ -485,6 +485,8 @@ export default {
     'Begin Time': '开始时间',
     'End Time': '结束时间',
     'Custom': '自定义',
+    'Pie Chart': '饼图',
+    'Bar Chart': '条形图',
     'User': '用户',
     'Application': '应用',
     'Details': '详情',

src/store/index.js

@@ -178,9 +178,8 @@ const stores = {
         transactionOverview: {},
         transactionOverviewStateInvalid: true,
         transactionStatisticsFilter: {
-            dateType: datetimeConstants.allDateRanges.ThisMonth.type,
-            startTime: 0,
-            endTime: 0,
+            startTime: -1,
+            endTime: -1,
             chartType: statisticsConstants.defaultChartType,
             chartLegendType: statisticsConstants.defaultChartLegendType,
         },
@@ -237,9 +236,8 @@ const stores = {
             state.transactionOverview = {};
             state.transactionOverviewStateInvalid = true;
 
-            state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
-            state.transactionStatisticsFilter.startTime = 0;
-            state.transactionStatisticsFilter.endTime = 0;
+            state.transactionStatisticsFilter.startTime = -1;
+            state.transactionStatisticsFilter.endTime = -1;
             state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType;
             state.transactionStatisticsFilter.chartLegendType = statisticsConstants.defaultChartLegendType;
             state.transactionStatistics = {};
@@ -786,12 +784,6 @@ const stores = {
             state.transactionStatistics = statistics;
         },
         [INIT_TRANSACTION_STATISTICS_FILTER] (state, filter) {
-            if (filter && utils.isNumber(filter.dateType)) {
-                state.transactionStatisticsFilter.dateType = filter.dateType;
-            } else {
-                state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
-            }
-
             if (filter && utils.isNumber(filter.startTime)) {
                 state.transactionStatisticsFilter.startTime = filter.startTime;
             } else {
@@ -817,10 +809,6 @@ const stores = {
             }
         },
         [UPDATE_TRANSACTION_STATISTICS_FILTER] (state, filter) {
-            if (filter && utils.isNumber(filter.dateType)) {
-                state.transactionStatisticsFilter.dateType = filter.dateType;
-            }
-
             if (filter && utils.isNumber(filter.startTime)) {
                 state.transactionStatisticsFilter.startTime = filter.startTime;
             }

src/views/mobile/statistics/Transaction.vue

@@ -7,6 +7,24 @@
                 <v-chart :options="chartData" v-if="chartData" />
             </f7-card-content>
         </f7-card>
+
+        <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
+            <f7-link>
+                <f7-icon f7="arrow_left_square"></f7-icon>
+            </f7-link>
+            <f7-link class="tabbar-text-with-ellipsis" popover-open=".date-popover-menu">
+                <span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ query | dateRange }}</span>
+            </f7-link>
+            <f7-link>
+                <f7-icon f7="arrow_right_square"></f7-icon>
+            </f7-link>
+            <f7-link class="tabbar-text-with-ellipsis" @click="setChartType($constants.statistics.allChartTypes.Pie)">
+                <span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Pie }">{{ $t('Pie Chart') }}</span>
+            </f7-link>
+            <f7-link class="tabbar-text-with-ellipsis" @click="setChartType($constants.statistics.allChartTypes.Bar)">
+                <span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
+            </f7-link>
+        </f7-toolbar>
     </f7-page>
 </template>
 
@@ -115,9 +133,9 @@ export default {
         const self = this;
         const router = self.$f7router;
 
-        const dateParam = self.$utilities.getDateRangeByDateType(self.query.dateType);
+        if (self.query.startTime < 0 || self.query.endTime < 0) {
+            const dateParam = self.$utilities.getDateRangeByDateType(self.$constants.datetime.allDateRanges.ThisMonth.type);
 
-        if (dateParam.minTime !== self.query.startTime || dateParam.maxTime !== self.query.endTime) {
             self.$store.dispatch('updateTransactionStatisticsFilter', {
                 startTime: dateParam.minTime,
                 endTime: dateParam.maxTime
@@ -161,6 +179,16 @@ export default {
                     self.$toast(error.message || error);
                 }
             });
+        },
+        setChartType(chartType) {
+            this.$store.dispatch('updateTransactionStatisticsFilter', {
+                chartType: chartType
+            });
+        }
+    },
+    filters: {
+        dateRange() {
+            return 'Date';
         }
     }
 };