Bugfix: failed to query by host only.

sheepzh · sheepzh · commit ea5536edc406 · 2021-03-25T11:26:03.000+08:00
diff --git a/src/app/App.vue b/src/app/App.vue
@@ -3,15 +3,32 @@
     <el-container>
       <el-aside>
         <el-menu :default-active="$route.path">
-          <el-menu-item v-for="({title,route,icon}) in menu"
+          <template v-for="({title,route,icon,children}) in menu">
+            <el-submenu v-if="children&&children.length"
                         :key="title"
-                        :index="route"
-                        @click="openMenu(route, title)">
-            <i :class="`el-icon-${icon}`"></i>
-            <span slot="title">
-              {{ $t(title) }}
-            </span>
-          </el-menu-item>
+                        :index='route'>
+              <template slot="title">
+                <i :class="`el-icon-${icon}`" />
+                <span> {{ $t(title) }}</span>
+              </template>
+              <el-menu-item v-for="child in children"
+                            :key="title+'-'+child.title"
+                            :index="child.route"
+                            @click="openMenu(child.route, child.title)">
+                <i :class="`el-icon-${child.icon}`"></i>
+                <span slot="title"> {{ $t(child.title) }} </span>
+              </el-menu-item>
+            </el-submenu>
+            <el-menu-item v-else
+                          :key="title"
+                          :index="route"
+                          @click="openMenu(route, title)">
+              <i :class="`el-icon-${icon}`"></i>
+              <span slot="title">
+                {{ $t(title) }}
+              </span>
+            </el-menu-item>
+          </template>
         </el-menu>
       </el-aside>
       <el-container class="app-container">
@@ -27,9 +44,20 @@ export default {
     return {
       menu: [
         {
-          title: 'menu.record',
-          route: '/record',
-          icon: 's-platform'
+          title: 'menu.data',
+          icon: 's-platform',
+          route: '/data',
+          children: [
+            {
+              title: 'menu.dataReport',
+              route: '/data/report',
+              icon: 'date'
+            }, {
+              title: 'menu.dataHistory',
+              route: '/data/history',
+              icon: 'stopwatch'
+            }
+          ]
         }, {
           title: 'menu.setting',
           route: '/setting',
@@ -39,7 +67,7 @@ export default {
     }
   },
   created () {
-    document.title = this.$t('menu.record')
+    document.title = this.$t('menu.data')
   },
   methods: {
     openMenu (route, title) {
diff --git a/src/app/components/Trender/index.vue b/src/app/components/Trender/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="content-container">
+    <div class="filter-container">
+      <el-select placeholder="ceshi"
+                 v-model="trenderDomain"
+                 multiple
+                 filterable
+                 remote
+                 :remote-method="queryDomainHandler"
+                 :loading="trenderSearching">
+        <el-option v-for="option in trenderDomainOptions"
+                   :key="option"
+                   :label="option"
+                   :value="option" />
+      </el-select>
+    </div>
+  </div>
+</template>
+<script>
+import timerService from '../../../service/timer-service'
+export default {
+  name: 'Trender',
+  data () {
+    return {
+      trenderDomain: '',
+      trenderSearching: false,
+      trenderDomainOptions: []
+    }
+  },
+  methods: {
+    queryDomainHandler (query) {
+      if (!query) {
+        this.trenderDomainOptions = []
+      } else {
+        this.trenderSearching = true
+        timerService.listDomains(query, domains => {
+          this.trenderDomainOptions = domains
+          this.trenderSearching = false
+        })
+      }
+    }
+  }
+}
+</script>
diff --git a/src/app/element.js b/src/app/element.js
@@ -8,7 +8,7 @@ import {
     Main, Menu, MenuItem, Message, MessageBox,
     Option,
     Pagination, Popconfirm,
-    Switch,
+    Select, Submenu, Switch,
     Table, TableColumn, TabPane, Tabs, Tag
 } from 'element-ui'
 
@@ -60,6 +60,10 @@ Vue.use(Popconfirm)
 import 'element-ui/lib/theme-chalk/popconfirm.css'
 import 'element-ui/lib/theme-chalk/popover.css'
 
+Vue.use(Select)
+import 'element-ui/lib/theme-chalk/select.css'
+Vue.use(Submenu)
+import 'element-ui/lib/theme-chalk/submenu.css'
 Vue.use(Switch)
 import 'element-ui/lib/theme-chalk/switch.css'
 
diff --git a/src/app/main.js b/src/app/main.js
@@ -4,6 +4,14 @@ import './element'
 import i18n from '../common/vue-i18n'
 import router from './router'
 import './styles/index.scss'
+import { openLog, closeLog } from '../common/logger'
+
+/**
+ * Manually open and close the log
+ * 
+ * @since 0.0.8
+ */
+window.timer = { openLog, closeLog }
 
 new Vue({
     el: '#app',
diff --git a/src/app/router.js b/src/app/router.js
@@ -6,10 +6,18 @@ Vue.use(VueRouter)
 const routes = [
     {
         path: '/',
-        redirect: '/record'
+        redirect: '/data'
     }, {
-        path: '/record',
-        component: () => import('./components/Record'),
+        path: '/data',
+        redirect: '/data/report',
+    },
+    // Needn't nested router 
+    {
+        path: '/data/report',
+        component: () => import('./components/Record')
+    }, {
+        path: '/data/history',
+        component: () => import('./components/Trender')
     }, {
         path: '/setting',
         component: () => import('./components/Setting'),
diff --git a/src/common/logger.ts b/src/common/logger.ts
@@ -12,6 +12,15 @@ export function log(...args: any) {
 /**
  * @since 0.0.4
  */
-export function openLog() {
+export function openLog(): string {
     OPEN_LOG = true
+    return 'Opened the log manually.'
+}
+
+/**
+ * @since 0.0.8
+ */
+export function closeLog(): string {
+    OPEN_LOG = false
+    return 'Closed the log manually.'
 }
diff --git a/src/database/timer-database.ts b/src/database/timer-database.ts
@@ -192,6 +192,12 @@ class TimeDatabase {
 
     }
 
+    /**
+     * Select without page
+     * 
+     * @param callback  callback
+     * @param param     param
+     */
     public select(callback: (result: Row[]) => void, param?: QueryParam) {
         log("selectByPage:{param}", param)
         param = param || new QueryParam()
@@ -240,9 +246,10 @@ class TimeDatabase {
     private filterBefore(date: string, host: string, val: WastePerDay, param: QueryParam) {
         const paramDate = param.date
         const paramHost = (param.host || '').trim()
-        if (paramDate !== undefined) {
-            if (paramHost && !host.includes(paramHost)) return false
 
+        if (paramHost && !host.includes(paramHost)) return false
+
+        if (paramDate !== undefined) {
             if (paramDate instanceof Date) {
                 const paramDateStr = formatTime(paramDate as Date, DATE_FORMAT)
                 if (paramDateStr !== date) {
diff --git a/src/locale/components/menu.js b/src/locale/components/menu.js
@@ -1,14 +1,20 @@
 module.exports = {
     zh_CN: {
-        record: '我的数据',
+        data: '我的数据',
+        dataReport: '报表明细',
+        dataHistory: '历史趋势',
         setting: '扩展选项'
     },
     en: {
-        record: 'My Records',
+        data: 'My datas',
+        dataReport: 'Report',
+        dataHistory: 'Historical trend',
         setting: 'Options'
     },
     ja: {
-        record: '私のデータ',
-        setting: '拡張設定'
+        data: '私のデータ',
+        dataReport: '報告する',
+        dataHistory: '歴史的傾向',
+        setting: '拡張設定',
     }
 }
diff --git a/src/service/timer-service.ts b/src/service/timer-service.ts
@@ -1,4 +1,4 @@
-import timeDatabase from '../database/timer-database'
+import timerDatabase, { QueryParam } from '../database/timer-database'
 import whitelistDatabase from '../database/whitelist-database'
 
 /**
@@ -8,20 +8,37 @@ import whitelistDatabase from '../database/whitelist-database'
 class TimeService {
 
     public addTotal(url: string, start: number) {
-        this.notInWhitelistThen(url, () => timeDatabase.addTotal(url, start))
+        this.notInWhitelistThen(url, () => timerDatabase.addTotal(url, start))
     }
 
     public addFocusAndTotal(url: string, focusStart: number, runStart: number) {
-        this.notInWhitelistThen(url, () => timeDatabase.addFocusAndTotal(url, focusStart, runStart))
+        this.notInWhitelistThen(url, () => timerDatabase.addFocusAndTotal(url, focusStart, runStart))
     }
 
     public addOneTime(url: string) {
-        this.notInWhitelistThen(url, () => timeDatabase.addOneTime(url))
+        this.notInWhitelistThen(url, () => timerDatabase.addOneTime(url))
     }
 
     private notInWhitelistThen(url: string, hook: () => void) {
         !!url && whitelistDatabase.includes(url, include => !include && hook())
     }
+
+    /**
+     * Query domain names
+     * 
+     * @param fuzzyQuery the part of domain name
+     * @param callback callback
+     * @since 0.0.8
+     */
+    public listDomains(fuzzyQuery: string, callback: (domains: Set<string>) => void) {
+        const param: QueryParam = new QueryParam()
+        param.host = fuzzyQuery
+        timerDatabase.select(rows => {
+            const result: Set<string> = new Set()
+            rows.forEach(row => result.add(row.host))
+            callback(result)
+        }, param)
+    }
 }
 
 export default new TimeService()
