support swipe tab pages in task detail page

This commit is contained in:
MaysWind 2016-05-25 01:30:02 +08:00
parent 2e44b47d31
commit 1b66822f44
7 changed files with 84 additions and 32 deletions

View file

@ -26,7 +26,7 @@
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body class="hold-transition skin-aria-ng sidebar-mini fixed"> <body class="hold-transition skin-aria-ng sidebar-mini fixed">
<div class="wrapper" ng-controller="MainController" ng-swipe-left="hideSidebar()" ng-swipe-right="showSidebar()" ng-swipe-disable-mouse> <div class="wrapper" ng-controller="MainController" ng-swipe-left="swipeActions.leftSwipe()" ng-swipe-right="swipeActions.rightSwipe()" ng-swipe-disable-mouse>
<header class="main-header"> <header class="main-header">
<a class="logo" href="#"> <a class="logo" href="#">
<span class="logo-mini">Aria</span> <span class="logo-mini">Aria</span>

View file

@ -47,14 +47,6 @@
} }
}; };
$scope.showSidebar = function () {
angular.element('body').removeClass('sidebar-collapse').addClass('sidebar-open');
};
$scope.hideSidebar = function () {
angular.element('body').addClass('sidebar-collapse').removeClass('sidebar-open');
};
if (ariaNgSettingService.getGlobalStatRefreshInterval() > 0) { if (ariaNgSettingService.getGlobalStatRefreshInterval() > 0) {
globalStatRefreshPromise = $interval(function () { globalStatRefreshPromise = $interval(function () {
refreshGlobalStat(); refreshGlobalStat();

View file

@ -1,7 +1,8 @@
(function () { (function () {
'use strict'; 'use strict';
angular.module('ariaNg').controller('TaskDetailController', ['$scope', '$routeParams', '$interval', 'aria2RpcService', 'ariaNgSettingService', 'utils', function ($scope, $routeParams, $interval, aria2RpcService, ariaNgSettingService, utils) { angular.module('ariaNg').controller('TaskDetailController', ['$rootScope', '$scope', '$routeParams', '$interval', 'aria2RpcService', 'ariaNgSettingService', 'utils', function ($rootScope, $scope, $routeParams, $interval, aria2RpcService, ariaNgSettingService, utils) {
var tabOrders = ['overview', 'blocks', 'filelist', 'btpeers'];
var downloadTaskRefreshPromise = null; var downloadTaskRefreshPromise = null;
var refreshPeers = function (task) { var refreshPeers = function (task) {
@ -16,7 +17,7 @@
var peer = $scope.peers[i]; var peer = $scope.peers[i];
peer.completePercent = utils.estimateCompletedPercentFromBitField(peer.bitfield) * 100; peer.completePercent = utils.estimateCompletedPercentFromBitField(peer.bitfield) * 100;
} }
$scope.healthPercent = utils.estimateHealthPercentFromPeers(task, $scope.peers); $scope.healthPercent = utils.estimateHealthPercentFromPeers(task, $scope.peers);
} }
}) })
@ -30,6 +31,10 @@
if (task.status == 'active' && task.bittorrent) { if (task.status == 'active' && task.bittorrent) {
refreshPeers(task); refreshPeers(task);
} else {
if (tabOrders.indexOf('btpeers') >= 0) {
tabOrders.splice(tabOrders.indexOf('btpeers'), 1);
}
} }
$scope.task = utils.copyObjectTo(task, $scope.task); $scope.task = utils.copyObjectTo(task, $scope.task);
@ -44,6 +49,28 @@
$scope.healthPercent = 0; $scope.healthPercent = 0;
$scope.loadPromise = refreshDownloadTask(); $scope.loadPromise = refreshDownloadTask();
$rootScope.swipeActions.extentLeftSwipe = function () {
var tabIndex = tabOrders.indexOf($scope.context.currentTab);
if (tabIndex < tabOrders.length - 1) {
$scope.context.currentTab = tabOrders[tabIndex + 1];
return true;
} else {
return false;
}
};
$rootScope.swipeActions.extentRightSwipe = function () {
var tabIndex = tabOrders.indexOf($scope.context.currentTab);
if (tabIndex > 0) {
$scope.context.currentTab = tabOrders[tabIndex - 1];
return true;
} else {
return false;
}
};
if (ariaNgSettingService.getDownloadTaskRefreshInterval() > 0) { if (ariaNgSettingService.getDownloadTaskRefreshInterval() > 0) {
downloadTaskRefreshPromise = $interval(function () { downloadTaskRefreshPromise = $interval(function () {
refreshDownloadTask(); refreshDownloadTask();

View file

@ -37,7 +37,42 @@
}); });
}; };
var showSidebar = function () {
angular.element('body').removeClass('sidebar-collapse').addClass('sidebar-open');
};
var hideSidebar = function () {
angular.element('body').addClass('sidebar-collapse').removeClass('sidebar-open');
};
var isSidebarShowInSmallScreen = function () {
return angular.element('body').hasClass('sidebar-open');
};
$rootScope.swipeActions = {
leftSwipe: function () {
if (isSidebarShowInSmallScreen()) {
hideSidebar();
return;
}
if (!this.extentLeftSwipe ||
(angular.isFunction(this.extentLeftSwipe) && !this.extentLeftSwipe())) {
hideSidebar();
}
},
rightSwipe: function () {
if (!this.extentRightSwipe ||
(angular.isFunction(this.extentRightSwipe) && !this.extentRightSwipe())) {
showSidebar();
}
}
};
$rootScope.$on('$locationChangeStart', function (event) { $rootScope.$on('$locationChangeStart', function (event) {
delete $rootScope.swipeActions.extentLeftSwipe;
delete $rootScope.swipeActions.extentRightSwipe;
SweetAlert.close(); SweetAlert.close();
}); });

View file

@ -65,6 +65,8 @@
'Address': 'Address', 'Address': 'Address',
'Status': 'Status', 'Status': 'Status',
'Percent': 'Percent', 'Percent': 'Percent',
'Download / Upload Speed': 'Download / Upload Speed',
'No connected peers': 'No connected peers',
'Language': 'Language', 'Language': 'Language',
'Aria2 RPC Host': 'Aria2 RPC Host', 'Aria2 RPC Host': 'Aria2 RPC Host',
'Aria2 RPC Port': 'Aria2 RPC Port', 'Aria2 RPC Port': 'Aria2 RPC Port',

View file

@ -65,6 +65,8 @@
'Address': '地址', 'Address': '地址',
'Status': '状态', 'Status': '状态',
'Percent': '完成度', 'Percent': '完成度',
'Download / Upload Speed': '下载 / 上传速度',
'No connected peers': '没有连接到其他节点',
'Language': '语言', 'Language': '语言',
'Aria2 RPC Host': 'Aria2 RPC 主机', 'Aria2 RPC Host': 'Aria2 RPC 主机',
'Aria2 RPC Port': 'Aria2 RPC 端口', 'Aria2 RPC Port': 'Aria2 RPC 端口',

View file

@ -45,18 +45,10 @@
</div> </div>
<div class="row"> <div class="row">
<div class="setting-key col-sm-4"> <div class="setting-key col-sm-4">
<span translate>Completed Percent</span> <span ng-bind="('Completed Percent' | translate) + (task.status == 'active' && task.bittorrent ? ' (' + ('Health Percent' | translate) + ')' : '')"></span>
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<span ng-bind="(task.completePercent | percent: 2) + '%'"></span> <span ng-bind="(task.completePercent | percent: 2) + '%' + (task.status == 'active' && task.bittorrent ? ' (' + (healthPercent | percent: 2) + '%' + ')' : '')"></span>
</div>
</div>
<div class="row" ng-if="task.bittorrent">
<div class="setting-key col-sm-4">
<span translate>Health Percent</span>
</div>
<div class="setting-value col-sm-8">
<span ng-bind="(healthPercent | percent: 2) + '%'"></span>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -163,11 +155,8 @@
<div class="col-sm-2 col-xs-4"> <div class="col-sm-2 col-xs-4">
<span translate>Percent</span> <span translate>Percent</span>
</div> </div>
<div class="col-sm-2 col-xs-4"> <div class="col-sm-4 col-xs-4">
<span translate>Download Speed</span> <span translate>Download / Upload Speed</span>
</div>
<div class="col-sm-2 col-xs-4">
<span translate>Upload Speed</span>
</div> </div>
</div> </div>
</div> </div>
@ -182,13 +171,18 @@
<div class="col-sm-2 col-xs-4"> <div class="col-sm-2 col-xs-4">
<span ng-bind="(peer.completePercent | percent: 2) + '%'"></span> <span ng-bind="(peer.completePercent | percent: 2) + '%'"></span>
</div> </div>
<div class="col-sm-2 col-xs-4"> <div class="col-sm-4 col-xs-8">
<i class="fa fa-arrow-down visible-xs-inline-block"></i> <div class="task-download-speed">
<span class="task-download-speed" ng-bind="(peer.downloadSpeed | readableVolumn) + '/s'"></span> <i class="fa fa-arrow-down"></i>
<span ng-bind="(peer.downloadSpeed | readableVolumn) + '/s'"></span>&nbsp;
<i class="fa fa-arrow-up"></i>
<span ng-bind="(peer.uploadSpeed | readableVolumn) + '/s'"></span>
</div>
</div> </div>
<div class="col-sm-2 col-xs-4"> </div>
<i class="fa fa-arrow-up visible-xs-inline-block"></i> <div class="row" ng-if="!peers || peers.length < 1">
<span class="task-download-speed" ng-bind="(peer.uploadSpeed | readableVolumn) + '/s'"></span> <div class="col-sm-12 text-center">
<span translate>No connected peers</span>
</div> </div>
</div> </div>
</div> </div>