From f63b58906eec25fb8a7bbf8572e11693ab350f6d Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Wed, 22 May 2019 22:33:43 +0800
Subject: [PATCH] updated SiteList

---
 frontend/src/i18n/zh.js                  |  1 +
 frontend/src/store/modules/site.js       | 29 ++++++++
 frontend/src/store/modules/spider.js     | 15 +++-
 frontend/src/views/site/SiteList.vue     | 91 +++++++++++++++---------
 frontend/src/views/spider/SpiderList.vue | 74 ++++++++++++++-----
 5 files changed, 158 insertions(+), 52 deletions(-)

diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 17a0df1e..ea1caed6 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -137,6 +137,7 @@ export default {
   'Domain': '域名',
   'Category': '类别',
   'Select': '请选择',
+  'Select Main Category': '请选择主类别',
   'Select Category': '请选择类别',
   'Spider Count': '爬虫数',
   'Robots Protocol': 'Robots 协议',
diff --git a/frontend/src/store/modules/site.js b/frontend/src/store/modules/site.js
index d05b8de4..ec1de9f3 100644
--- a/frontend/src/store/modules/site.js
+++ b/frontend/src/store/modules/site.js
@@ -1,10 +1,18 @@
 import request from '../../api/request'
 
 const state = {
+  // site list
   siteList: [],
 
+  // main category list
+  mainCategoryList: [],
+
+  // (sub) category list
+  categoryList: [],
+
   // filter
   filter: {
+    mainCategory: undefined,
     category: undefined
   },
   keyword: '',
@@ -32,6 +40,12 @@ const mutations = {
   },
   SET_TOTAL_COUNT (state, value) {
     state.totalCount = value
+  },
+  SET_MAIN_CATEGORY_LIST (state, value) {
+    state.mainCategoryList = value
+  },
+  SET_CATEGORY_LIST (state, value) {
+    state.categoryList = value
   }
 }
 
@@ -48,6 +62,7 @@ const actions = {
       page_size: state.pageSize,
       keyword: state.keyword || undefined,
       filter: {
+        main_category: state.filter.mainCategory || undefined,
         category: state.filter.category || undefined
       }
     })
@@ -55,6 +70,20 @@ const actions = {
         commit('SET_SITE_LIST', response.data.items)
         commit('SET_TOTAL_COUNT', response.data.total_count)
       })
+  },
+  getMainCategoryList ({ state, commit }) {
+    return request.get('/sites/get/get_main_category_list')
+      .then(response => {
+        commit('SET_MAIN_CATEGORY_LIST', response.data.items)
+      })
+  },
+  getCategoryList ({ state, commit }) {
+    return request.get('/sites/get/get_category_list', {
+      'main_category': state.filter.mainCategory || undefined
+    })
+      .then(response => {
+        commit('SET_CATEGORY_LIST', response.data.items)
+      })
   }
 }
 
diff --git a/frontend/src/store/modules/spider.js b/frontend/src/store/modules/spider.js
index b7e702fd..a55f90f7 100644
--- a/frontend/src/store/modules/spider.js
+++ b/frontend/src/store/modules/spider.js
@@ -26,7 +26,10 @@ const state = {
   dailyStats: [],
 
   // spider node stats
-  nodeStats: []
+  nodeStats: [],
+
+  // filters
+  filterSite: ''
 }
 
 const getters = {}
@@ -55,12 +58,20 @@ const mutations = {
   },
   SET_NODE_STATS (state, value) {
     state.nodeStats = value
+  },
+  SET_FILTER_SITE (state, value) {
+    state.filterSite = value
   }
 }
 
 const actions = {
   getSpiderList ({ state, commit }) {
-    return request.get('/spiders', {})
+    let params = {}
+    if (state.filterSite) {
+      params.site = state.filterSite
+    }
+    console.log(params)
+    return request.get('/spiders', params)
       .then(response => {
         commit('SET_SPIDER_LIST', response.data.items)
       })
diff --git a/frontend/src/views/site/SiteList.vue b/frontend/src/views/site/SiteList.vue
index 7cf3e936..ede3941e 100644
--- a/frontend/src/views/site/SiteList.vue
+++ b/frontend/src/views/site/SiteList.vue
@@ -7,11 +7,15 @@
                 class="filter-search"
                 v-model="keyword">
       </el-input>
+      <el-select v-model="filter.mainCategory" class="filter-category" :placeholder="$t('Select Main Category')"
+                 clearable>
+        <el-option v-for="op in mainCategoryList" :key="op" :value="op" :label="op"></el-option>
+      </el-select>
       <el-select v-model="filter.category" class="filter-category" :placeholder="$t('Select Category')" clearable>
         <el-option v-for="op in categoryList" :key="op" :value="op" :label="op"></el-option>
       </el-select>
       <el-button type="success"
-                 icon="el-icon-refresh"
+                 icon="el-icon-search"
                  class="btn refresh"
                  @click="onSearch">
         {{$t('Search')}}
@@ -25,24 +29,24 @@
               :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
               border>
       <template v-for="col in columns">
-        <el-table-column v-if="col.name === 'category'"
-                         :key="col.name"
-                         :label="$t(col.label)"
-                         :width="col.width"
-                         :align="col.align">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row[col.name]"
-                       :placeholder="$t('Select')"
-                       @change="onRowChange(scope.row)">
-              <el-option v-for="op in categoryList"
-                         :key="op"
-                         :value="op"
-                         :label="op">
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column v-else-if="col.name === 'domain'"
+        <!--<el-table-column v-if="col.name === 'category'"-->
+        <!--:key="col.name"-->
+        <!--:label="$t(col.label)"-->
+        <!--:width="col.width"-->
+        <!--:align="col.align">-->
+        <!--<template slot-scope="scope">-->
+        <!--<el-select v-model="scope.row[col.name]"-->
+        <!--:placeholder="$t('Select')"-->
+        <!--@change="onRowChange(scope.row)">-->
+        <!--<el-option v-for="op in categoryList"-->
+        <!--:key="op"-->
+        <!--:value="op"-->
+        <!--:label="op">-->
+        <!--</el-option>-->
+        <!--</el-select>-->
+        <!--</template>-->
+        <!--</el-table-column>-->
+        <el-table-column v-if="col.name === 'domain'"
                          :key="col.name"
                          :label="$t(col.label)"
                          :width="col.width"
@@ -150,25 +154,26 @@ export default {
   name: 'SiteList',
   data () {
     return {
-      categoryList: [
-        '新闻',
-        '搜索引擎',
-        '综合',
-        '金融',
-        '购物',
-        '社交',
-        '视频',
-        '音乐',
-        '资讯',
-        '政企官网',
-        '其他'
-      ],
+      // categoryList: [
+      //   '新闻',
+      //   '搜索引擎',
+      //   '综合',
+      //   '金融',
+      //   '购物',
+      //   '社交',
+      //   '视频',
+      //   '音乐',
+      //   '资讯',
+      //   '政企官网',
+      //   '其他'
+      // ],
       columns: [
         { name: 'rank', label: 'Rank', align: 'center', width: '80' },
         { name: 'name', label: 'Name', align: 'left', width: 'auto' },
         { name: 'domain', label: 'Domain', align: 'left', width: '150' },
         // { name: 'description', label: 'Description', align: 'left', width: 'auto' },
-        { name: 'category', label: 'Category', align: 'center', width: '180' },
+        { name: 'main_category', label: 'Main Category', align: 'center', width: '100' },
+        { name: 'category', label: 'Category', align: 'center', width: '100' },
         { name: 'spider_count', label: 'Spider Count', align: 'center', width: '60' },
         { name: 'has_robots', label: 'Robots Protocol', align: 'center', width: '65' },
         { name: 'home_response_time', label: 'Home Page Response Time (sec)', align: 'right', width: '80' },
@@ -180,6 +185,8 @@ export default {
     ...mapState('site', [
       'filter',
       'siteList',
+      'mainCategoryList',
+      'categoryList',
       'totalCount'
     ]),
     keyword: {
@@ -205,6 +212,18 @@ export default {
       set (value) {
         this.$store.commit('site/SET_PAGE_SIZE', value)
       }
+    },
+    mainCategory () {
+      return this.filter.mainCategory
+    }
+  },
+  watch: {
+    mainCategory () {
+      // reset category
+      this.filter.category = undefined
+
+      // get category list
+      this.$store.dispatch('site/getCategoryList')
     }
   },
   methods: {
@@ -248,7 +267,7 @@ export default {
         cls.push('status')
         if (row.home_http_status === undefined) {
           cls.push('info')
-        } else if (row.home_http_status === 200) {
+        } else if (row.home_http_status >= 200 && row.home_http_status < 300) {
           cls.push('success')
         } else {
           cls.push('danger')
@@ -272,6 +291,10 @@ export default {
   },
   created () {
     this.$store.dispatch('site/getSiteList')
+
+    this.$store.dispatch('site/getMainCategoryList')
+
+    this.$store.dispatch('site/getCategoryList')
   }
 }
 </script>
diff --git a/frontend/src/views/spider/SpiderList.vue b/frontend/src/views/spider/SpiderList.vue
index 3e0b4121..9628e28d 100644
--- a/frontend/src/views/spider/SpiderList.vue
+++ b/frontend/src/views/spider/SpiderList.vue
@@ -29,12 +29,20 @@
 
     <!--filter-->
     <div class="filter">
-      <el-input prefix-icon="el-icon-search"
-                :placeholder="$t('Search')"
-                class="filter-search"
-                v-model="filter.keyword"
-                @change="onSearch">
-      </el-input>
+      <!--<el-input prefix-icon="el-icon-search"-->
+      <!--:placeholder="$t('Search')"-->
+      <!--class="filter-search"-->
+      <!--v-model="filter.keyword"-->
+      <!--@change="onSearch">-->
+      <!--</el-input>-->
+      <div class="left">
+        <el-autocomplete v-model="filterSite"
+                         :placeholder="$t('Site')"
+                         clearable
+                         :fetch-suggestions="fetchSiteSuggestions"
+                         @select="onSiteSelect">
+        </el-autocomplete>
+      </div>
       <div class="right">
         <el-button type="primary" icon="fa fa-cloud" @click="onDeployAll">
           {{$t('Deploy All')}}
@@ -179,16 +187,31 @@ export default {
       'spiderForm'
     ]),
     filteredTableData () {
-      return this.spiderList.filter(d => {
-        if (!this.filter.keyword) return true
-        for (let i = 0; i < this.columns.length; i++) {
-          const colName = this.columns[i].name
-          if (d[colName] && d[colName].toLowerCase().indexOf(this.filter.keyword.toLowerCase()) > -1) {
-            return true
+      return this.spiderList
+        .filter(d => {
+          if (this.filterSite) {
+            return d.site === this.filterSite
           }
-        }
-        return false
-      })
+          return true
+        })
+      // .filter(d => {
+      //   if (!this.filter.keyword) return true
+      //   for (let i = 0; i < this.columns.length; i++) {
+      //     const colName = this.columns[i].name
+      //     if (d[colName] && d[colName].toLowerCase().indexOf(this.filter.keyword.toLowerCase()) > -1) {
+      //       return true
+      //     }
+      //   }
+      //   return false
+      // })
+    },
+    filterSite: {
+      get () {
+        return this.$store.state.spider.filterSite
+      },
+      set (value) {
+        this.$store.commit('spider/SET_FILTER_SITE', value)
+      }
     }
   },
   methods: {
@@ -324,13 +347,32 @@ export default {
         return false
       }
       return true
+    },
+    fetchSiteSuggestions (keyword, callback) {
+      this.$request.get('/sites', {
+        keyword: keyword,
+        page_num: 1,
+        page_size: 100
+      }).then(response => {
+        const data = response.data.items.map(d => {
+          d.value = `${d.name} | ${d.domain}`
+          return d
+        })
+        callback(data)
+      })
+    },
+    onSiteSelect (item) {
+      this.$store.commit('spider/SET_FILTER_SITE', item._id)
     }
   },
   created () {
+    // take site from params to filter
+    this.$store.commit('spider/SET_FILTER_SITE', this.$route.params.domain)
+
+    // fetch spider list
     this.$store.dispatch('spider/getSpiderList')
   },
   mounted () {
-    console.log(this.$route.params.domain)
   }
 }
 </script>