From f1382a2f95588ae85d410c2a38c0fe80d2df0ad8 Mon Sep 17 00:00:00 2001
From: fzlins <fzlins2013@gmail.com>
Date: Fri, 9 Dec 2022 10:07:22 -0500
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E5=88=97=E5=92=8C=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA=E5=81=9A?=
 =?UTF-8?q?=E7=A7=8D=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resource/i18n/en.json      |   2 +
 resource/i18n/zh-CN.json   |   2 +
 src/options/views/Home.vue | 194 ++++++++++++++++++++++---------------
 3 files changed, 119 insertions(+), 79 deletions(-)

diff --git a/resource/i18n/en.json b/resource/i18n/en.json
index a9fc4f0ee..f1c21cef3 100644
--- a/resource/i18n/en.json
+++ b/resource/i18n/en.json
@@ -166,6 +166,8 @@
       "userName": "User name",
       "userLevel": "User level",
       "levelRequirements": "Level requirements",
+      "seedingPoints": "Seeding Points",
+      "selectColumns": "Select Columns",
       "week": "Expressed in weeks",
       "timeline": "Time line",
       "settings": "Settings",
diff --git a/resource/i18n/zh-CN.json b/resource/i18n/zh-CN.json
index 20cb27669..ca7d8aae2 100644
--- a/resource/i18n/zh-CN.json
+++ b/resource/i18n/zh-CN.json
@@ -163,6 +163,8 @@
       "userName": "用户名称",
       "userLevel": "用户等级",
       "levelRequirements": "等级要求",
+      "seedingPoints": "保种积分",
+      "selectColumns": "过滤列",
       "week": "时间显示为周数",
       "timeline": "时间轴",
       "settings": "参数",
diff --git a/src/options/views/Home.vue b/src/options/views/Home.vue
index 048b67b50..cf348a69c 100644
--- a/src/options/views/Home.vue
+++ b/src/options/views/Home.vue
@@ -54,9 +54,26 @@
                 :label="$t('home.week')"
                 @change="updateViewOptions"
               ></v-switch>
+              <v-switch
+                color="success"
+                v-model="showSeedingPoints"
+                :label="$t('home.seedingPoints')"
+                @change="updateViewOptions"
+              ></v-switch>
             </v-container>
           </v-card>
         </v-menu>
+        <v-select v-model="selectedHeaders" :items="headers" :label="$t('home.selectColumns')" multiple outlined return-object>
+            <template v-slot:selection="{ item, index }">
+              <v-chip v-if="index === 0">
+                <span>{{ item.text }}</span>
+              </v-chip>
+              <span
+                v-if="index === 1"
+                class="grey--text caption"
+              >(+{{ selectedHeaders.length - 1 }} others)</span>
+            </template>
+         </v-select>
 
         <!-- <AutoSignWarning /> -->
         <v-spacer></v-spacer>
@@ -74,7 +91,7 @@
 
       <v-data-table
         :search="filterKey"
-        :headers="headers"
+        :headers="showHeaders"
         :items="sites"
         :pagination.sync="pagination"
         item-key="host"
@@ -84,7 +101,7 @@
       >
         <template slot="items" slot-scope="props">
           <!-- 站点 -->
-          <td class="center">
+          <td v-if="showColumn('name')" class="center">
             <v-badge color="red messageCount" overlap>
               <template
                 v-slot:badge
@@ -118,7 +135,7 @@
               <span class="caption">{{ props.item.name }}</span>
             </a>
           </td>
-          <td>
+          <td v-if="showColumn('user.name')">
             <template v-if="showUserName">
               {{ props.item.user.name}}
               <template v-if="props.item.user.id">
@@ -129,7 +146,7 @@
               ****
             </template>
           </td>
-          <td>
+          <td v-if="showColumn('user.levelName')">
             {{ showUserLevel ? props.item.user.levelName : "****" }}
             <template v-if="showLevelRequirements">
               <template v-if="props.item.levelRequirements">
@@ -172,7 +189,7 @@
               </template>
             </template>
           </td>
-          <td class="number">
+          <td v-if="showColumn('user.uploaded')" class="number">
             <div>
               {{ props.item.user.uploaded | formatSize }}
               <v-icon small color="green darken-4">expand_less</v-icon>
@@ -182,11 +199,11 @@
               <v-icon small color="red darken-4">expand_more</v-icon>
             </div>
           </td>
-          <td class="number">{{ props.item.user.ratio | formatRatio }}</td>
-          <td class="number">{{ props.item.user.seeding }}</td>
-          <td class="number">{{ props.item.user.seedingSize | formatSize }}</td>
-          <td class="number">
-            <template v-if="props.item.user.seedingPoints">                
+          <td v-if="showColumn('user.ratio')" class="number">{{ props.item.user.ratio | formatRatio }}</td>
+          <td v-if="showColumn('user.seeding')" class="number">{{ props.item.user.seeding }}</td>
+          <td v-if="showColumn('user.seedingSize')" class="number">{{ props.item.user.seedingSize | formatSize }}</td>
+          <td v-if="showColumn('user.bonus')" class="number">
+            <template v-if="showSeedingPoints && props.item.user.seedingPoints">                
               <div>
                 魔力：{{ props.item.user.bonus | formatNumber }}
               </div>
@@ -198,12 +215,16 @@
               {{ props.item.user.bonus | formatNumber }}
             </template>
           </td>
-          <td class="number">{{ props.item.user.bonusPerHour | formatNumber }}</td>
-          <td
+          <td v-if="showColumn('user.bonusPerHour')" class="number">
+            <template v-if="props.item.user.bonusPerHour">    
+              {{ props.item.user.bonusPerHour | formatNumber }}
+            </template>
+          </td>
+          <td v-if="showColumn('user.joinDate')"
             class="number"
             :title="props.item.user.joinDateTime"
           >{{ props.item.user.joinTime | timeAgo(showWeek) }}</td>
-          <td class="number">
+          <td v-if="showColumn('user.lastUpdateTime')" class="number">
             <v-btn
               depressed
               small
@@ -211,7 +232,7 @@
               :title="$t('home.statistic')"
             >{{ props.item.user.lastUpdateTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</v-btn>
           </td>
-          <td class="center">
+          <td v-if="showColumn('user.lastUpdateStatus')" class="center">
             <v-progress-circular
               indeterminate
               :width="3"
@@ -279,6 +300,68 @@ export default Vue.extend({
     return {
       loading: false,
       items: [] as any[],
+      selectedHeaders: [] as any[],
+      headers:[
+        {
+          text: this.$t("home.headers.site"),
+          align: "center",
+          value: "name",
+          width: "110px"
+        },
+        {
+          text: this.$t("home.headers.userName"),
+          align: "left",
+          value: "user.name",
+          width: ""
+        },
+        {
+          text: this.$t("home.headers.levelName"),
+          align: "left",
+          value: "user.levelName"
+        },
+        {
+          text: this.$t("home.headers.activitiyData"),
+          align: "right",
+          value: "user.uploaded",
+          width: "120px"
+        },
+        {
+          text: this.$t("home.headers.ratio"),
+          align: "right",
+          value: "user.ratio"
+        },
+        {
+          text: this.$t("home.headers.seeding"),
+          align: "right",
+          value: "user.seeding"
+        },
+        {
+          text: this.$t("home.headers.seedingSize"),
+          align: "right",
+          value: "user.seedingSize"
+        },
+        {
+          text: this.$t("home.headers.bonus"),
+          align: "right",
+          value: "user.bonus"
+        },
+        {
+          text: this.$t("home.headers.bonusPerHour"),
+          align: "right",
+          value: "user.bonusPerHour"
+        },
+        {
+          text: this.$t("home.headers.joinTime"),
+          align: "right",
+          value: "user.joinTime"
+        },
+        {
+          text: this.$t("home.headers.lastUpdateTime"),
+          align: "right",
+          value: "user.lastUpdateTime"
+        },
+        { text: this.$t("home.headers.status"), align: "center", value: "user.lastUpdateStatus" }
+      ],
       pagination: {
         rowsPerPage: -1
       },
@@ -295,12 +378,20 @@ export default Vue.extend({
       showSiteName: true,
       showUserLevel: true,
       showLevelRequirements: true,
+      showSeedingPoints: true,
       showWeek: false
     };
   },
   created() {
+    this.selectedHeaders = this.headers;
     this.init();
   },
+  computed: {
+    //Done to get the ordered headers
+    showHeaders() : any[] {
+      return this.headers.filter(s => this.selectedHeaders.includes(s));
+    }
+  },
 
   /**
    * 当前组件激活时触发
@@ -313,6 +404,14 @@ export default Vue.extend({
   },
 
   methods: {
+    showColumn(val : string){
+      for (var header of this.headers.filter(s => this.selectedHeaders.includes(s)))
+      {
+        if (header.value === val)
+          return true;
+      }
+      return false;
+    },
     resetSites() {
       this.sites = [];
       this.options.sites.forEach((site: Site) => {
@@ -354,6 +453,7 @@ export default Vue.extend({
         showSiteName: true,
         showUserLevel: true,
         showLevelRequirements: true,
+        showSeedingPoints: true,
         showWeek: false
       });
       Object.assign(this, viewOptions);
@@ -670,6 +770,7 @@ export default Vue.extend({
           showSiteName: this.showSiteName,
           showUserLevel: this.showUserLevel,
           showLevelRequirements: this.showLevelRequirements,
+          showSeedingPoints: this.showSeedingPoints,
           showWeek: this.showWeek
         }
       });
@@ -697,71 +798,6 @@ export default Vue.extend({
       }
       return number.toFixed(2);
     }
-  },
-
-  computed: {
-    headers(): Array<any> {
-      return [
-        {
-          text: this.$t("home.headers.site"),
-          align: "center",
-          value: "name",
-          width: "110px"
-        },
-        {
-          text: this.$t("home.headers.userName"),
-          align: "left",
-          value: "user.name"
-        },
-        {
-          text: this.$t("home.headers.levelName"),
-          align: "left",
-          value: "user.levelName"
-        },
-        {
-          text: this.$t("home.headers.activitiyData"),
-          align: "right",
-          value: "user.uploaded",
-          width: "120px"
-        },
-        {
-          text: this.$t("home.headers.ratio"),
-          align: "right",
-          value: "user.ratio"
-        },
-        {
-          text: this.$t("home.headers.seeding"),
-          align: "right",
-          value: "user.seeding"
-        },
-        {
-          text: this.$t("home.headers.seedingSize"),
-          align: "right",
-          value: "user.seedingSize"
-        },
-        {
-          text: this.$t("home.headers.bonus"),
-          align: "right",
-          value: "user.bonus"
-        },
-        {
-          text: this.$t("home.headers.bonusPerHour"),
-          align: "right",
-          value: "user.bonusPerHour"
-        },
-        {
-          text: this.$t("home.headers.joinTime"),
-          align: "right",
-          value: "user.joinTime"
-        },
-        {
-          text: this.$t("home.headers.lastUpdateTime"),
-          align: "right",
-          value: "user.lastUpdateTime"
-        },
-        { text: this.$t("home.headers.status"), align: "center", value: "user.lastUpdateStatus" }
-      ];
-    }
   }
 });
 </script>