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

This commit is contained in:
MaysWind 2016-05-22 11:13:05 +08:00
parent f4678ad234
commit 7f232292d5
10 changed files with 85 additions and 38 deletions

View file

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

View file

@ -30,9 +30,15 @@
}; };
var processDownloadTask = function (task) { 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) { if (task.bittorrent && task.bittorrent.info) {
task.taskName = task.bittorrent.info.name; task.taskName = task.bittorrent.info.name;
@ -41,11 +47,6 @@
} else { } else {
task.taskName = translateFilter('Unknown'); 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 () { var refreshDownloadTask = function () {

View file

@ -1,7 +1,7 @@
(function () { (function () {
'use strict'; '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 globalStatRefreshPromise = null;
var processStatResult = function (stat) { var processStatResult = function (stat) {
@ -26,12 +26,25 @@
refreshGlobalStat(); 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) { if (ariaNgSettingService.getGlobalStatRefreshInterval() > 0) {

View file

@ -36,6 +36,17 @@
} }
return path.substring(index + 1); 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();
}
}
} }
}; };
}]); }]);

View file

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

View file

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

View file

@ -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': '按下载速度',
'Download': '下载', 'Download': '下载',
'Downloading': '正在下载', 'Downloading': '正在下载',
'Waiting': '正在等待', 'Waiting': '正在等待',

View file

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

View file

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

View file

@ -5,30 +5,31 @@
<div class="col-sm-8"> <div class="col-sm-8">
<div class="row"> <div class="row">
<div class="col-sm-8"> <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>
<div class="col-sm-4"> <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>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<div class="row"> <div class="row">
<div class="col-sm-6"> <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>
<div class="col-sm-6"> <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>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<div class="row"> <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> </div>
</div> </div>
@ -38,7 +39,7 @@
<div class="col-sm-8"> <div class="col-sm-8">
<span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span> <span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span>
<div class="task-files"> <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}}"> <a ng-href="#/task/detail/{{task.gid}}">
<span ng-bind="'(' + task.files.length + ' ' + ('Files' | translate) + ')'"></span> <span ng-bind="'(' + task.files.length + ' ' + ('Files' | translate) + ')'"></span>
</a> </a>