From 777cb52ae2564808bd7b3aaf9ae91fb8d560e382 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Thu, 4 May 2017 10:32:37 +0800
Subject: [PATCH] load ranking data finished

---
 modules/core/client/app/trans-string-cn.js    |  10 +-
 modules/core/client/app/trans-string-en.js    |  12 +-
 modules/core/client/less/mt.less              |  76 +++++--
 .../controllers/ranking.client.controller.js  |  11 +-
 .../client/views/ranking.client.view.html     | 193 ++++++++++++++----
 .../views/view-torrent.client.view.html       |  20 +-
 6 files changed, 258 insertions(+), 64 deletions(-)

diff --git a/modules/core/client/app/trans-string-cn.js b/modules/core/client/app/trans-string-cn.js
index eff13e81..7e007f34 100644
--- a/modules/core/client/app/trans-string-cn.js
+++ b/modules/core/client/app/trans-string-cn.js
@@ -89,7 +89,15 @@
       STARTED: '开始时间',
       ACTIVE: '活动状态',
       CLIENT: '客户端',
-      CONNECTABLE: '可连接'
+      CONNECTABLE: '可连接',
+
+      //ranking
+      UPLOAD: '已上传',
+      DOWNLOAD: '已下载',
+      SEEDED: '正在做种',
+      LEECHED: '正在下载',
+      SCORE: '积分',
+      JOINED: '加入时间'
     },
 
     //page title
diff --git a/modules/core/client/app/trans-string-en.js b/modules/core/client/app/trans-string-en.js
index e6152a39..91f8c0c0 100644
--- a/modules/core/client/app/trans-string-en.js
+++ b/modules/core/client/app/trans-string-en.js
@@ -81,7 +81,7 @@
       VOTES: 'Votes',
 
       //peer
-      USERNAME: 'Username',
+      USERNAME: 'DisplayName',
       UPLOADED: 'Uploaded/Speed',
       DOWNLOADED: 'Downloaded/Speed',
       RATIO: 'Ratio',
@@ -89,7 +89,15 @@
       STARTED: 'Started',
       ACTIVE: 'Active',
       CLIENT: 'Client',
-      CONNECTABLE: 'Connectable'
+      CONNECTABLE: 'Connectable',
+
+      //ranking
+      UPLOAD: 'Uploaded',
+      DOWNLOAD: 'Downloaded',
+      SEEDED: 'Seeded',
+      LEECHED: 'Leeched',
+      SCORE: 'Score',
+      JOINED: 'Joined'
     },
 
     //page title
diff --git a/modules/core/client/less/mt.less b/modules/core/client/less/mt.less
index bc9405ca..1324ab5a 100644
--- a/modules/core/client/less/mt.less
+++ b/modules/core/client/less/mt.less
@@ -224,6 +224,16 @@
     }
 }
 
+.table-valign-middle {
+    > tbody {
+        > tr {
+            > td {
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
 .tb-peers {
     background-color: #fff;
     thead {
@@ -359,24 +369,51 @@
     padding-left: 15px;
 }
 
-.nav-tabs {
-    > li {
-        > a {
-            margin-right: 5px;
-            padding: 10px 30px;
-            border-top: 3px solid #fff;
-            &:hover
-            &:focus {
-                border-top: 3px solid #ddd;
+.torrent-info-tabs {
+    .nav-tabs {
+        > li {
+            > a {
+                margin-right: 5px;
+                padding: 10px 30px;
+                border-top: 3px solid #fff;
+                &:hover
+                &:focus {
+                    border-top: 3px solid #ddd;
+                }
+            }
+            &.active {
+                > a {
+                    &,
+                    &:hover,
+                    &:focus {
+                        border-top: 3px solid @brand-danger;
+                        background-color: @comment-background-default;
+                    }
+                }
             }
         }
-        &.active {
+    }
+}
+
+.tab-ranking {
+    .nav-tabs {
+        > li {
             > a {
-                &,
-                &:hover,
+                margin-right: 5px;
+                padding: 10px 30px;
+                border-top: 3px solid #fff;
+                &:hover
                 &:focus {
-                    border-top: 3px solid @brand-danger;
-                    background-color: @comment-background-default;
+                    border-top: 3px solid #ddd;
+                }
+            }
+            &.active {
+                > a {
+                    &,
+                    &:hover,
+                    &:focus {
+                        border-top: 3px solid @brand-danger;
+                    }
                 }
             }
         }
@@ -444,4 +481,15 @@
 
 .page-header {
     padding-bottom: 0;
+}
+
+.ranking-user-img {
+    cursor: pointer;
+    border-radius: 3px;
+    height: 32px;
+    width: 32px;
+}
+
+.ranking-active-col {
+    color: @mt-base-color;
 }
\ No newline at end of file
diff --git a/modules/ranking/client/controllers/ranking.client.controller.js b/modules/ranking/client/controllers/ranking.client.controller.js
index f90e22d7..e2e5eafc 100644
--- a/modules/ranking/client/controllers/ranking.client.controller.js
+++ b/modules/ranking/client/controllers/ranking.client.controller.js
@@ -5,11 +5,18 @@
     .module('users.admin')
     .controller('RankingController', RankingController);
 
-  RankingController.$inject = ['$scope', 'RankingService'];
+  RankingController.$inject = ['$scope', 'RankingService', '$translate'];
 
-  function RankingController($scope, RankingService) {
+  function RankingController($scope, RankingService, $translate) {
     var vm = this;
 
+    vm.rankingTabs = [
+      {title: $translate.instant('PAGE_HEADER_RANKING_UPLOAD'), templateUrl: 'upload_ranking.html'},
+      {title: $translate.instant('PAGE_HEADER_RANKING_DOWNLOAD'), templateUrl: 'download_ranking.html'},
+      {title: $translate.instant('PAGE_HEADER_RANKING_RATIO'), templateUrl: 'ratio_ranking.html'},
+      {title: $translate.instant('PAGE_HEADER_RANKING_SCORE'), templateUrl: 'score_ranking.html'}
+    ];
+
     RankingService.get(function (data) {
       console.log(data);
 
diff --git a/modules/ranking/client/views/ranking.client.view.html b/modules/ranking/client/views/ranking.client.view.html
index 44f673b7..6897ec3f 100644
--- a/modules/ranking/client/views/ranking.client.view.html
+++ b/modules/ranking/client/views/ranking.client.view.html
@@ -1,49 +1,170 @@
 <section class="container padding-top-10" ng-controller="RankingController as vm" ng-init="vm.getRankingList();">
-    <div class="upload-ranking">
-        <div class="panel panel-default">
-            <div class="panel-heading text-center">{{'PAGE_HEADER_RANKING_UPLOAD' | translate}}</div>
-            <div class="panel-body">
-                <p>...</p>
-            </div>
-
-            <table class="table">
-            </table>
-        </div>
+    <div class="tab-ranking margin-top-30">
+        <uib-tabset>
+            <uib-tab index="$index" ng-repeat="tab in vm.rankingTabs">
+                <uib-tab-heading>
+                    {{tab.title}}
+                </uib-tab-heading>
+                <div ng-include="tab.templateUrl">
+                </div>
+            </uib-tab>
+        </uib-tabset>
     </div>
 
-    <div class="upload-ranking">
-        <div class="panel panel-default">
-            <div class="panel-heading text-center">{{'PAGE_HEADER_RANKING_DOWNLOAD' | translate}}</div>
-            <div class="panel-body">
-                <p>...</p>
-            </div>
 
-            <table class="table">
-            </table>
+    <script type="text/ng-template" id="upload_ranking.html">
+        <div class="padding-top-30">
+            <div class="table-responsive">
+                <table class="table table-hover table-striped table-valign-middle">
+                    <thead>
+                        <tr>
+                            <th class="text-center">#</th>
+                            <th class="text-center"></th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.USERNAME' | translate}}</th>
+                            <th class="text-center ranking-active-col">{{ 'TABLE_FIELDS.UPLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.DOWNLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.RATIO' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SCORE' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SEEDED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.LEECHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.FINISHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.JOINED' | translate}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="ranking-list-info" ng-repeat="user in vm.upload_ranking">
+                            <td class="text-center">{{$index + 1}}</td>
+                            <td class="text-center"><img class="ranking-user-img" title="{{user.displayName}}" ng-src="/{{user.profileImageURL}}"></td>
+                            <td class="text-center">{{user.displayName}}</td>
+                            <td class="text-center ranking-active-col">{{user.uploaded | bytes:2}}</td>
+                            <td class="text-center">{{user.downloaded | bytes:2}}</td>
+                            <td class="text-center">{{user.ratio}}</td>
+                            <td class="text-center">{{user.score}}</td>
+                            <td class="text-center">{{user.seeded}}</td>
+                            <td class="text-center">{{user.leeched}}</td>
+                            <td class="text-center">{{user.finished}}</td>
+                            <td class="text-center">{{user.created | life}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
-    </div>
+    </script>
 
-    <div class="upload-ranking">
-        <div class="panel panel-default">
-            <div class="panel-heading text-center">{{'PAGE_HEADER_RANKING_RATIO' | translate}}</div>
-            <div class="panel-body">
-                <p>...</p>
+    <script type="text/ng-template" id="download_ranking.html">
+        <div class="padding-top-30">
+            <div class="table-responsive">
+                <table class="table table-hover table-striped table-valign-middle">
+                    <thead>
+                        <tr>
+                            <th class="text-center">#</th>
+                            <th class="text-center"></th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.USERNAME' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.UPLOAD' | translate}}</th>
+                            <th class="text-center ranking-active-col">{{ 'TABLE_FIELDS.DOWNLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.RATIO' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SCORE' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SEEDED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.LEECHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.FINISHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.JOINED' | translate}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="ranking-list-info" ng-repeat="user in vm.download_ranking">
+                            <td class="text-center">{{$index + 1}}</td>
+                            <td class="text-center"><img class="ranking-user-img" title="{{user.displayName}}" ng-src="/{{user.profileImageURL}}"></td>
+                            <td class="text-center">{{user.displayName}}</td>
+                            <td class="text-center">{{user.uploaded | bytes:2}}</td>
+                            <td class="text-center ranking-active-col">{{user.downloaded | bytes:2}}</td>
+                            <td class="text-center">{{user.ratio}}</td>
+                            <td class="text-center">{{user.score}}</td>
+                            <td class="text-center">{{user.seeded}}</td>
+                            <td class="text-center">{{user.leeched}}</td>
+                            <td class="text-center">{{user.finished}}</td>
+                            <td class="text-center">{{user.created | life}}</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
-
-            <table class="table">
-            </table>
         </div>
-    </div>
+    </script>
 
-    <div class="upload-ranking">
-        <div class="panel panel-default">
-            <div class="panel-heading text-center">{{'PAGE_HEADER_RANKING_SCORE' | translate}}</div>
-            <div class="panel-body">
-                <p>...</p>
+    <script type="text/ng-template" id="ratio_ranking.html">
+        <div class="padding-top-30">
+            <div class="table-responsive">
+                <table class="table table-hover table-striped table-valign-middle">
+                    <thead>
+                        <tr>
+                            <th class="text-center">#</th>
+                            <th class="text-center"></th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.USERNAME' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.UPLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.DOWNLOAD' | translate}}</th>
+                            <th class="text-center ranking-active-col">{{ 'TABLE_FIELDS.RATIO' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SCORE' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SEEDED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.LEECHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.FINISHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.JOINED' | translate}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="ranking-list-info" ng-repeat="user in vm.ratio_ranking">
+                            <td class="text-center">{{$index + 1}}</td>
+                            <td class="text-center"><img class="ranking-user-img" title="{{user.displayName}}" ng-src="/{{user.profileImageURL}}"></td>
+                            <td class="text-center">{{user.displayName}}</td>
+                            <td class="text-center">{{user.uploaded | bytes:2}}</td>
+                            <td class="text-center">{{user.downloaded | bytes:2}}</td>
+                            <td class="text-center ranking-active-col">{{user.ratio}}</td>
+                            <td class="text-center">{{user.score}}</td>
+                            <td class="text-center">{{user.seeded}}</td>
+                            <td class="text-center">{{user.leeched}}</td>
+                            <td class="text-center">{{user.finished}}</td>
+                            <td class="text-center">{{user.created | life}}</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
+        </div>
+    </script>
 
-            <table class="table">
-            </table>
+    <script type="text/ng-template" id="score_ranking.html">
+        <div class="padding-top-30">
+            <div class="table-responsive">
+                <table class="table table-hover table-striped table-valign-middle">
+                    <thead>
+                        <tr>
+                            <th class="text-center">#</th>
+                            <th class="text-center"></th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.USERNAME' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.UPLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.DOWNLOAD' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.RATIO' | translate}}</th>
+                            <th class="text-center ranking-active-col">{{ 'TABLE_FIELDS.SCORE' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.SEEDED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.LEECHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.FINISHED' | translate}}</th>
+                            <th class="text-center">{{ 'TABLE_FIELDS.JOINED' | translate}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="ranking-list-info" ng-repeat="user in vm.score_ranking">
+                            <td class="text-center">{{$index + 1}}</td>
+                            <td class="text-center"><img class="ranking-user-img" title="{{user.displayName}}" ng-src="/{{user.profileImageURL}}"></td>
+                            <td class="text-center">{{user.displayName}}</td>
+                            <td class="text-center">{{user.uploaded | bytes:2}}</td>
+                            <td class="text-center">{{user.downloaded | bytes:2}}</td>
+                            <td class="text-center">{{user.ratio}}</td>
+                            <td class="text-center ranking-active-col">{{user.score}}</td>
+                            <td class="text-center">{{user.seeded}}</td>
+                            <td class="text-center">{{user.leeched}}</td>
+                            <td class="text-center">{{user.finished}}</td>
+                            <td class="text-center">{{user.created | life}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
-    </div>
+    </script>
 </section>
\ No newline at end of file
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 018df4b6..f5e9cca1 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -136,15 +136,17 @@
     </div>
 
     <div class="container">
-        <uib-tabset>
-            <uib-tab index="$index" ng-repeat="tab in vm.torrentTabs" disabled="tab.disabled" ng-show="tab.ng_show">
-                <uib-tab-heading>
-                    {{tab.title}} <span class="badge {{b.class}}" ng-repeat="b in tab.badges">{{b.value}}</span>
-                </uib-tab-heading>
-                <div class="tab-border-view" ng-include="tab.templateUrl">
-                </div>
-            </uib-tab>
-        </uib-tabset>
+        <div class="torrent-info-tabs">
+            <uib-tabset>
+                <uib-tab index="$index" ng-repeat="tab in vm.torrentTabs" disabled="tab.disabled" ng-show="tab.ng_show">
+                    <uib-tab-heading>
+                        {{tab.title}} <span class="badge {{b.class}}" ng-repeat="b in tab.badges">{{b.value}}</span>
+                    </uib-tab-heading>
+                    <div class="tab-border-view" ng-include="tab.templateUrl">
+                    </div>
+                </uib-tab>
+            </uib-tabset>
+        </div>
     </div>