support change display order by clicking title, support order by download speed

app/index.html

@@ -62,35 +62,41 @@
                     </a>
                     <ul class="dropdown-menu" role="menu">
                         <li>
-                            <a class="pointer-cursor" ng-click="changeDisplayOrder('default')">
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('default:false')">
                                 <span translate>Default</span>
                                 <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('default')}"></i>
                             </a>
                         </li>
                         <li>
-                            <a class="pointer-cursor" ng-click="changeDisplayOrder('name')">
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('name:false')">
                                 <span translate>By File Name</span>
                                 <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('name')}"></i>
                             </a>
                         </li>
                         <li>
-                            <a class="pointer-cursor" ng-click="changeDisplayOrder('size')">
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('size:false')">
                                 <span translate>By File Size</span>
                                 <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('size')}"></i>
                             </a>
                         </li>
                         <li>
-                            <a class="pointer-cursor" ng-click="changeDisplayOrder('percent')">
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('percent:true')">
                                 <span translate>By Completed Percent</span>
                                 <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('percent')}"></i>
                             </a>
                         </li>
                         <li>
-                            <a class="pointer-cursor" ng-click="changeDisplayOrder('remain')">
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('remain:false')">
                                 <span translate>By Remain Time</span>
                                 <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('remain')}"></i>
                             </a>
                         </li>
+                        <li>
+                            <a class="pointer-cursor" ng-click="changeDisplayOrder('dspeed:false')">
+                                <span translate>By Download Speed</span>
+                                <i class="fa" ng-class="{'fa-check': isSetDisplayOrder('dspeed')}"></i>
+                            </a>
+                        </li>
                     </ul>
                 </li>
             </ul>

app/scripts/controllers/list.js

@@ -30,9 +30,15 @@
         };
 
         var processDownloadTask = function (task) {
-            var totalLength = parseInt(task.totalLength);
+            task.totalLength = parseInt(task.totalLength);
-            var completedLength = parseInt(task.completedLength);
+            task.completedLength = parseInt(task.completedLength);
-            var remainLength = totalLength - completedLength;
+            task.uploadSpeed = parseInt(task.uploadSpeed);
+            task.downloadSpeed = parseInt(task.downloadSpeed);
+            task.completePercent = task.completedLength / task.totalLength * 100;
+            task.idle = task.downloadSpeed == 0;
+
+            var remainLength = task.totalLength - task.completedLength;
+            task.remainTime = calculateDownloadRemainTime(remainLength, task.downloadSpeed);
 
             if (task.bittorrent && task.bittorrent.info) {
                 task.taskName = task.bittorrent.info.name;
@@ -41,11 +47,6 @@
             } else {
                 task.taskName = translateFilter('Unknown');
             }
-
-            task.fileSize = totalLength;
-            task.completePercent = completedLength / totalLength * 100;
-            task.idle = task.downloadSpeed == 0;
-            task.remainTime = calculateDownloadRemainTime(remainLength, task.downloadSpeed);
         };
 
         var refreshDownloadTask = function () {

app/scripts/controllers/main.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('MainController', ['$scope', '$interval', 'aria2RpcService', 'ariaNgSettingService', function ($scope, $interval, aria2RpcService, ariaNgSettingService) {
+    angular.module('ariaNg').controller('MainController', ['$scope', '$interval', 'aria2RpcService', 'ariaNgSettingService', 'utils', function ($scope, $interval, aria2RpcService, ariaNgSettingService, utils) {
         var globalStatRefreshPromise = null;
 
         var processStatResult = function (stat) {
@@ -26,12 +26,25 @@
 
         refreshGlobalStat();
 
-        $scope.changeDisplayOrder = function (type) {
+        $scope.changeDisplayOrder = function (type, autoSetReverse) {
-            ariaNgSettingService.setDisplayOrder(type);
+            var oldType = utils.parseOrderType(ariaNgSettingService.getDisplayOrder());
+            var newType = utils.parseOrderType(type);
+
+            if (autoSetReverse && newType.type == oldType.type) {
+                newType.reverse = !oldType.reverse;
+            }
+
+            ariaNgSettingService.setDisplayOrder(newType.getValue());
         };
 
-        $scope.isSetDisplayOrder = function (type) {
+        $scope.isSetDisplayOrder = function (type, reverse) {
-            return ariaNgSettingService.getDisplayOrder() === type;
+            var orderType = utils.parseOrderType(ariaNgSettingService.getDisplayOrder());
+
+            if (angular.isUndefined(reverse)) {
+                return orderType.type === type;
+            } else {
+                return orderType.type === type && orderType.reverse === reverse;
+            }
         };
 
         if (ariaNgSettingService.getGlobalStatRefreshInterval() > 0) {

app/scripts/core/utils.js

@@ -36,6 +36,17 @@
                 }
 
                 return path.substring(index + 1);
+            },
+            parseOrderType: function (value) {
+                var values = value.split(':');
+
+                return {
+                    type: values[0],
+                    reverse: values[1] === 'true',
+                    getValue: function () {
+                        return this.type + ":" + this.reverse.toString();
+                    }
+                }
             }
         };
     }]);

app/scripts/filters/taskOrderBy.js

@@ -1,20 +1,28 @@
 (function () {
     'use strict';
 
-    angular.module("ariaNg").filter('taskOrderBy', ['orderByFilter', function (orderByFilter) {
+    angular.module("ariaNg").filter('taskOrderBy', ['orderByFilter', 'utils', function (orderByFilter, utils) {
         return function (array, type) {
             if (!angular.isArray(array)) {
                 return array;
             }
             
-            if (type == 'name') {
+            var orderType = utils.parseOrderType(type);
-                return orderByFilter(array, ['taskName'], false);
+            
-            } else if (type == 'size') {
+            if (orderType == null) {
-                return orderByFilter(array, ['fileSize'], false);
+                return array;
-            } else if (type == 'percent') {
+            }
-                return orderByFilter(array, ['completePercent'], true);
+
-            } else if (type == 'remain') {
+            if (orderType.type == 'name') {
-                return orderByFilter(array, ['idle', 'remainTime'], false);
+                return orderByFilter(array, ['taskName'], orderType.reverse);
+            } else if (orderType.type == 'size') {
+                return orderByFilter(array, ['totalLength'], orderType.reverse);
+            } else if (orderType.type == 'percent') {
+                return orderByFilter(array, ['completePercent'], orderType.reverse);
+            } else if (orderType.type == 'remain') {
+                return orderByFilter(array, ['idle', 'remainTime'], orderType.reverse);
+            } else if (orderType.type == 'dspeed') {
+                return orderByFilter(array, ['downloadSpeed'], orderType.reverse);
             } else {
                 return array;
             }

app/scripts/langs/en-US.js

@@ -14,6 +14,7 @@
             'By File Size': 'By File Size',
             'By Completed Percent': 'By Completed Percent',
             'By Remain Time': 'By Remain Time',
+            'By Download Speed': 'By Download Speed',
             'Download': 'Download',
             'Downloading': 'Downloading',
             'Waiting': 'Waiting',

app/scripts/langs/zh-CN.js

@@ -14,6 +14,7 @@
             'By File Size': '按文件大小',
             'By Completed Percent': '按进度',
             'By Remain Time': '按剩余时间',
+            'By Download Speed': '按下载速度',
             'Download': '下载',
             'Downloading': '正在下载',
             'Waiting': '正在等待',

app/scripts/services/ariaNgSettingService.js

@@ -99,7 +99,7 @@
                 var value = getOption('displayOrder');
 
                 if (!value) {
-                    value = 'default';
+                    value = 'default:false';
                 }
 
                 return value;

app/styles/aria-ng.css

@@ -257,6 +257,11 @@ td {
     font-size: 12px;
 }
 
+.task-table .task-table-title a {
+    color: #000;
+    cursor: pointer;
+}
+
 .task-table > .task-table-body > div.row {
     padding: 8px;
     border-top: 1px solid #ddd;

app/views/list.html

@@ -5,30 +5,31 @@
                 <div class="col-sm-8">
                     <div class="row">
                         <div class="col-sm-8">
-                            <span translate>File Name</span>
+                            <a ng-click="changeDisplayOrder('name:false', true)" translate>File Name</a>
-                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('name')}"></i>
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('name', false), 'fa-sort-desc': isSetDisplayOrder('name', true)}"></i>
                         </div>
                         <div class="col-sm-4">
-                            <span translate>File Size</span>
+                            <a ng-click="changeDisplayOrder('size:false', true)" translate>File Size</a>
-                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('size')}"></i>
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('size', false), 'fa-sort-desc': isSetDisplayOrder('size', true)}"></i>
                         </div>
                     </div>
                 </div>
                 <div class="col-sm-2">
                     <div class="row">
                         <div class="col-sm-6">
-                            <span translate>Completed Percent</span>
+                            <a ng-click="changeDisplayOrder('percent:true', true)" translate>Completed Percent</a>
-                            <i class="fa" ng-class="{'fa-sort-desc': isSetDisplayOrder('percent')}"></i>
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('percent', false), 'fa-sort-desc': isSetDisplayOrder('percent', true)}"></i>
                         </div>
                         <div class="col-sm-6">
-                            <span translate>Remain Time</span>
+                            <a ng-click="changeDisplayOrder('remain:false', true)" translate>Remain Time</a>
-                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('remain')}"></i>
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('remain', false), 'fa-sort-desc': isSetDisplayOrder('remain', true)}"></i>
                         </div>
                     </div>
                 </div>
                 <div class="col-sm-2">
                     <div class="row">
-                        <span translate>Download Speed</span>
+                        <a ng-click="changeDisplayOrder('dspeed:false', true)" translate>Download Speed</a>
+                        <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('dspeed', false), 'fa-sort-desc': isSetDisplayOrder('dspeed', true)}"></i>
                     </div>
                 </div>
             </div>
@@ -38,7 +39,7 @@
                 <div class="col-sm-8">
                     <span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span>
                     <div class="task-files">
-                        <span ng-bind="task.fileSize | readableVolumn"></span>
+                        <span ng-bind="task.totalLength | readableVolumn"></span>
                         <a ng-href="#/task/detail/{{task.gid}}">
                             <span ng-bind="'(' + task.files.length + ' ' + ('Files' | translate) + ')'"></span>
                         </a>