From 8a1a59d37eca230392907ed2b83c4fd7da0e193c Mon Sep 17 00:00:00 2001
From: yxlimo <yxlimo@gmail.com>
Date: Thu, 21 Nov 2024 14:03:30 +0800
Subject: [PATCH] feat: add sort in user timeline card

---
 resource/i18n/en.json                  | 28 +++++---
 resource/i18n/zh-CN.json               | 29 +++++---
 src/interface/common.ts                |  1 -
 src/options/views/UserDataTimeline.vue | 97 ++++++++++++++++++++------
 4 files changed, 118 insertions(+), 37 deletions(-)

diff --git a/resource/i18n/en.json b/resource/i18n/en.json
index 93f375816..0caea96c2 100644
--- a/resource/i18n/en.json
+++ b/resource/i18n/en.json
@@ -320,14 +320,26 @@
       },
       "updateat": "Update at: ",
       "user": {
-        "uploads": "Uploads: ",
-        "uploaded": "Uploaded: ",
-        "downloaded": "Downloaded: ",
-        "seedingSize": "Seeding size: ",
-        "averageSeedtime": "Average Seedtime: {day} day(s)",
-        "ratio": "Ratio: ",
-        "bonus": "Bonus: ",
-        "bonusPerHour": "Bonus per hour: "
+        "colonSeparator": ": ",
+        "uploads": "Uploads",
+        "uploaded": "Uploaded",
+        "downloaded": "Downloaded",
+        "seedingSize": "Seeding size",
+        "averageSeedtime": "Average Seedtime(Day)",
+        "ratio": "Ratio",
+        "bonus": "Bonus",
+        "bonusPerHour": "Bonus per hour"
+      },
+      "sortSites": {
+        "name": "Sort Sites",
+        "key": {
+          "label": "Sort By"
+        },
+        "order": {
+          "label": "Sort Order",
+          "asc": "ascending",
+          "dsc": "descending"
+        }
       },
       "inputDisplayName": "Please enter a name to display:",
       "inputShareMessage": "Please enter a message to display:"
diff --git a/resource/i18n/zh-CN.json b/resource/i18n/zh-CN.json
index c0ebf1909..4f920dbeb 100644
--- a/resource/i18n/zh-CN.json
+++ b/resource/i18n/zh-CN.json
@@ -314,14 +314,27 @@
       },
       "updateat": "数据更新于：",
       "user": {
-        "uploads": "发布数：",
-        "uploaded": "上传量：",
-        "downloaded": "下载量：",
-        "seedingSize": "做种量：",
-        "averageSeedtime": "均保时：{day} 天",
-        "ratio": "分享率：",
-        "bonus": "积分值：",
-        "bonusPerHour": "时　魔："
+        "colonSeparator": "：",
+        "uploads": "发布数",
+        "uploaded": "上传量",
+        "downloaded": "下载量",
+        "seedingSize": "做种量",
+        "averageSeedtime": "均保时（天）",
+        "ratio": "分享率",
+        "bonus": "积分值",
+        "bonusPerHour": "时　魔",
+        "joinTime": "加入时间"
+      },
+      "sortSites": {
+        "name": "站点排序",
+        "key": {
+          "label": "排序依据"
+        },
+        "order": {
+          "label": "排序方式",
+          "asc": "正序",
+          "dsc": "倒序"
+        }
       },
       "inputDisplayName": "请输入需要显示的名称：",
       "inputShareMessage": "请输入需要显示的信息："
diff --git a/src/interface/common.ts b/src/interface/common.ts
index 24b783c96..5bef12f6a 100644
--- a/src/interface/common.ts
+++ b/src/interface/common.ts
@@ -319,7 +319,6 @@ export interface Site {
   apiCdn?: string[];
   getInfoAjaxCache?: boolean;
 }
-
 /**
  * desc & href 都不为空才被认为是有效链接
  * href 必须是网址
diff --git a/src/options/views/UserDataTimeline.vue b/src/options/views/UserDataTimeline.vue
index a6d07a5cd..7a6e81199 100644
--- a/src/options/views/UserDataTimeline.vue
+++ b/src/options/views/UserDataTimeline.vue
@@ -147,14 +147,14 @@
               <div>
                 <v-divider v-if="i>0" class="mb-2"></v-divider>
                 <div class="headline font-weight-light mb-2" v-if="showSiteName">{{ site.name }}</div>
-                <div v-if="showUserUploads && site.user.uploads && site.user.uploads > 0">{{ $t('timeline.user.uploads') }}{{ site.user.uploads }}</div>
-                <div>{{ $t('timeline.user.uploaded') }}{{ site.user.uploaded | formatSize}}</div>
-                <div>{{ $t('timeline.user.downloaded') }}{{ site.user.downloaded | formatSize }}</div>
-                <div>{{ $t('timeline.user.ratio') }}{{ site.user.ratio | formatRatio }}</div>
-                <div>{{ $t('timeline.user.seedingSize') }}{{ site.user.seedingSize | formatSize }} ({{ site.user.seeding }})</div>
-                <div v-if="site.user.averageSeedtime && site.user.averageSeedtime > 0">{{ $t('timeline.user.averageSeedtime', {day: site.user.averageSeedtime | formatInteger}) }}</div>
-                <div>{{ $t('timeline.user.bonus') }}{{ site.user.bonus | formatNumber }}</div>
-                <div v-if="site.user.bonusPerHour && site.user.bonusPerHour != 'N/A'">{{ $t('timeline.user.bonusPerHour') }}{{ site.user.bonusPerHour | formatNumber }}</div>
+                <div v-if="showUserUploads && site.user.uploads && site.user.uploads > 0">{{ $t('timeline.user.uploads') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.uploads }}</div>
+                <div>{{ $t('timeline.user.uploaded') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.uploaded | formatSize}}</div>
+                <div>{{ $t('timeline.user.downloaded') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.downloaded | formatSize }}</div>
+                <div>{{ $t('timeline.user.ratio') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.ratio | formatRatio }}</div>
+                <div>{{ $t('timeline.user.seedingSize') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.seedingSize | formatSize }} ({{ site.user.seeding }})</div>
+                <div v-if="site.user.averageSeedtime && site.user.averageSeedtime > 0">{{ $t('timeline.user.averageSeedtime') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.averageSeedtime | formatInteger }}</div>
+                <div>{{ $t('timeline.user.bonus') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.bonus | formatNumber }}</div>
+                <div v-if="site.user.bonusPerHour && site.user.bonusPerHour != 'N/A'">{{ $t('timeline.user.bonusPerHour') }}{{$t('timeline.user.colonSeparator')}}{{ site.user.bonusPerHour | formatNumber }}</div>
               </div>
             </v-timeline-item>
           </v-timeline>
@@ -220,12 +220,42 @@
           ></v-switch>
         </v-flex>
       </v-layout>
+      <v-divider />
+      <!-- 排序 -->
+      <h1 style="padding: 5px;">{{ $t('timeline.sortSites.name') }}</h1>
+<!--      SortBy-->
+      <h2 style="padding: 7px;">{{ $t('timeline.sortSites.key.label') }}</h2>
+      <v-radio-group v-model="siteSortBy" row class="ml-5">
+
+        <v-radio v-for="(key, i) in siteSortKeys" :key="i"
+            :label="$t('timeline.user.'+key)" color="success" :value="key"
+        ></v-radio>
+      </v-radio-group>
+<!--      sort order-->
+      <h2 style="padding: 7px;">{{ $t('timeline.sortSites.order.label') }}</h2>
+      <v-radio-group v-model="siteSortOrder" row class="ml-5">
+        <v-radio
+            :label="$t('timeline.sortSites.order.asc')" color="success" value="asc"
+        ></v-radio>
+        <v-radio
+            :label="$t('timeline.sortSites.order.dsc')" color="success" value="dsc"
+        ></v-radio>
+      </v-radio-group>
     </div>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
-import {Site, Dictionary, EAction, Options, EViewKey, ETagType, EUserDataRequestStatus} from "@/interface/common";
+import {
+  Site,
+  Dictionary,
+  EAction,
+  Options,
+  EViewKey,
+  ETagType,
+  EUserDataRequestStatus,
+  UserInfo
+} from "@/interface/common";
 import FileSaver from "file-saver";
 import domtoimage from 'dom-to-image';
 import Extension from "@/service/extension";
@@ -297,6 +327,9 @@ export default Vue.extend({
       showUserLevel: true,
       showUserUploads: true,
       showUid: true,
+      siteSortKeys: ["joinTime", "uploaded", "seedingSize", "ratio"],
+      siteSortBy: "joinTime",
+      siteSortOrder: "asc",
       blurSiteIcon: true,
       iconCache: {} as Dictionary<any>
     };
@@ -320,6 +353,14 @@ export default Vue.extend({
       }
     }
   },
+  watch: {
+    siteSortBy(newVal) {
+      this.datas = this.sortSitesByUserInfo(this.datas, newVal, this.siteSortOrder == "asc")
+    },
+    siteSortOrder(newVal) {
+      this.datas = this.sortSitesByUserInfo(this.datas, this.siteSortBy, newVal == "asc")
+    }
+  },
   methods: {
     filteredSitesByTags(sites: Site[]) {
       if (this.selectedTagValues.length === 0) return sites
@@ -535,24 +576,40 @@ export default Vue.extend({
           .diff(result.joinTimeInfo.time, "year", true)
           .toFixed(2);
       }
-
       this.infos = result;
 
-      // 按加入时间排序
-      this.datas = sites.sort((a, b) => {
+      this.datas = this.sortSitesByUserInfo(sites, this.siteSortBy, this.siteSortOrder == "asc")
+
+      console.log(this.datas)
+
+      this.infos.total.ratio = this.getRatio(this.infos.total);
 
-        if (!a.user || !b.user) {
+    },
+    sortSitesByUserInfo(sites: Site[], key: keyof UserInfo, ascending: boolean): Site[]{
+      return sites.sort((a, b) => {
+        if ((!a.user || !b.user) || (typeof a.user[key] != "number") ){
           return 0;
         }
-        const sortA = a.user.joinTime || 0;
-        const sortB = b.user.joinTime || 0;
+        let sortA = a.user[key] ? a.user[key] as number : 0
+        let sortB = b.user[key] ? b.user[key] as number : 0
 
-        if (sortA < sortB) return -1;
-        if (sortA > sortB) return 1;
-        return 0;
+        // handle the condition of ratio is infinitely
+        if ((key == "ratio") && (this.ratioIsInfinitely(sortA) || this.ratioIsInfinitely(sortB))) {
+          if (this.ratioIsInfinitely(sortA) && this.ratioIsInfinitely(sortB)) {
+            return 0
+          }
+          if (this.ratioIsInfinitely(sortA)) {
+            return ascending ? 1: -1
+          }
+          if (this.ratioIsInfinitely(sortB)) {
+            return ascending ? -1: 1
+          }
+        }
+        return ascending ? sortA - sortB : sortB - sortA;
       });
-
-      this.infos.total.ratio = this.getRatio(this.infos.total);
+    },
+    ratioIsInfinitely(v: number): boolean {
+      return v > 10000 || v == -1
     },
     getRatio(info: any): number {
       let downloaded = info.downloaded as number;