q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed download ctx with angular templates updated

Browse Source
This commit is contained in:
hamza zia 2013-01-19 22:46:22 +05:00
parent 3f468d8fb2
commit 6481737c61
4 changed files with 254 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
angular.html
View File

@ -1,6 +1,7 @@
<!doctype>
<html>
<!-- {{{ head -->
<head>
<link rel="icon" href="favicon.ico" />
@ -48,9 +49,11 @@
<script src="js/init.js"></script>
</head>
<!-- }}} -->
<body>
<!-- {{{ header -->
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
@ -131,73 +134,132 @@
</div>
</div>
</div>
<!-- }}} -->
<div role="main" class="container" ng-controller="DownloadCtrl">
<div id="active_downloads">
<table class="active-download" ng-repeat="download in getDownloads()">
<tbody>
<tr>
<td data-toggle="collapse" data-target=".download-detail .collapse" class="download-overview">
<b class="download-name">{{download.name}}</b>
<table ng-repeat="download in getDownloads()" class="download" data-gid="{{download.gid}}">
<tbody>
<tr>
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<b class="download-name">{{download.name}}</b>
</td>
<td class="download-controls" rowspan="2">
<div class="btn-group">
<button ng-show="download.booleans.can_pause" class="btn download_pause"><i class="icon-pause"></i></button>
<button ng-show="download.booleans.can_play" class="btn download_play"><i class="icon-play"></i></button>
<button ng-show="download.booleans.can_restart" class="btn download_restart"><i class="icon-repeat"></i></button>
<button class="btn download_remove hidden-phone"><i class="icon-stop"></i></button>
<ul class="stats hidden-phone pull-right">
<li class="label label-success">Time left: <span class="download-eta">{{(download.totalLength-download.completedLength)/download.downloadSpeed}}</span></li>
<li class="label label-success">Download Speed: <span class="download-down_speed">{{download.downloadSpeed}}</span></li>
<li class="label label-success">Progress: <span class="download-down_speed">{{(download.completedLength / download.totalLength)*100}}%</span></li>
<button ng-show="download.booleans.has_settings" class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<i class="caret"></i>
</button>
<ul class="dropdown-menu">
<li ng-show="download.booleans.has_settings"><a href="#" class="download_settings visible-phone"><i class="icon-cog"></i> Settings</a></li>
<li ng-show="download.booleans.bittorrent"><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
<li><a href="#" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
<li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
</ul>
<div class="progress full-progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{(download.completedLength / download.totalLength)*100}}%;"></div>
</div>
</td>
</tr>
<tr>
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<ul class="stats pull-left">
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone hidden-tablet">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success">ETA: <span class="download-eta">{{download.eta}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{download.percentage}}</span>%</li>
<li ng-show="download.booleans.can_pause" class="label label-success">Speed: <span class="download-downloadSpeed">{{download.downloadSpeed}}</span></li>
<li ng-show="download.booleans.bittorrent" class="label">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
<li ng-show="download.booleans.is_complete" class="label">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_complete" class="label hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
<li ng-show="download.booleans.is_complete" class="label">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
<li ng-show="download.booleans.is_removed" class="label label-warning">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_removed" class="label label-warning hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
<li ng-show="download.booleans.is_removed" class="label label-warning">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
<li ng-show="download.booleans.is_error" class="label label-important">Status: <span class="download-status">{{download.status}}</span></li>
<li ng-show="download.booleans.is_error" class="label label-important hidden-phone">Path: <span class="download-dir">{{download.dir}}</span></li>
<li ng-show="download.booleans.is_error" class="label label-important">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
</ul>
</td>
</tr>
<tr>
<td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse">
<div ng-show="download.booleans.can_pause" class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_play" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_error" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_removed" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
<div ng-show="download.booleans.is_complete" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-detail">
<td colspan="2">
<div class="collapse more_info">
<canvas class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;"></canvas>
<ul class="stats">
<li class="label">Status: <span class="download-status">{{download.status}}</span></li>
<li class="label">GID: <span class="download-gid">{{download.gid}}</span></li>
<li class="label">Dir: <span class="download-dir">{{download.dir}}</span></li>
<li class="label">Size: <span class="download-totalLength">{{download.totalLength}}</span></li>
<li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</span></li>
<li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{download.eta}}</span></li>
<li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed}}</span></li>
<li class="label" ng-show="download.booleans.bittorrent">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed}}</span></li>
<li class="label" ng-show="download.booleans.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength}}</span></li>
<li class="label">Connections: <span class="download-connections">{{download.connections}}</span></li>
</ul>
<h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone">
<li class="label" ng-repeat="file in download.files">{{download.download.path}} ({{download.download.length}})</li>
</ul>
<div>
<div class="active_graph"></div>
</div>
</td>
<td class="download-controls">
<div class="btn-group">
<button class="btn btn-mini download_pause"><i class="icon-pause"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a><i class="icon-cog"></i> Settings</a></li>
<li><a><i class="icon-list-alt"></i> Peers</a></li>
<li><a data-toggle="collapse" data-target=".download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
<li><a href="#"><i class="icon-remove"></i> Remove</a></li>
</ul>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target=".download-detail .collapse" class="download-detail">
<td colspan="2">
<div class="collapse more_info">
<canvas class="progress chunk-canvas" width="1400" style="width: 100%;"></canvas>
<ul class="stats">
<li class="label">Status: <span class="download-status">{{download.status}}</span></li>
<li class="label">GID: <span class="download-gid">{{download.gid}}</span></li>
<li class="label">Dir: <span class="download-dir">{{download.dir}}</span></li>
<li class="label">Size: <span class="download-size">{{download.totalLength}}</span></li>
<li class="label">Downloaded: <span class="download-downloaded">{{download.downloadSpeed}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</span></li>
<li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength}}</span></li>
</ul>
<h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone">
<li class="label" ng-repeat="file in download.files">{{file.path}} ({{file.completedLength}})</li>
</ul>
<div>
<div class="download-graph"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="waiting_downloads"></div>
<div id="stopped_downloads"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

40
index.html
View File

@ -102,9 +102,9 @@
<ul class="dropdown-menu">
{{#booleans.has_settings}}
<li><a href="#" class="download_settings visible-phone"><i class="icon-cog"></i> Settings</a></li>
{{#bittorrent}}
{{#booleans.bittorrent}}
<li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
{{/bittorrent}}
{{/booleans.bittorrent}}
{{/booleans.has_settings}}
<li><a href="#" data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
<li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
@ -118,34 +118,34 @@
{{#booleans.can_pause}}
<li class="label label-success hidden-phone hidden-tablet">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-success">ETA: <span class="download-eta">{{eta}}</span></li>
<li class="label label-success hidden-phone">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-success hidden-phone">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label label-success hidden-phone">Size: <span class="download-totalLength">{{totalLength}}</span></li>
<li class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{completedLength}}</span></li>
<li class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{percentage}}</span>%</li>
<li class="label label-success">Speed: <span class="download-down_speed">{{down_speed}}</span></li>
{{#bittorrent}}
<li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li>
{{/bittorrent}}
<li class="label label-success">Speed: <span class="download-downloadSpeed">{{downloadSpeed}}</span></li>
{{#booleans.bittorrent}}
<li class="label">Upload Speed: <span class="download-uploadSpeed">{{uploadSpeed}}</span></li>
{{/booleans.bittorrent}}
{{/booleans.can_pause}}
{{#booleans.can_play}}
<li class="label label-info">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-info">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-info hidden-phone">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label label-info">Size: <span class="download-totalLength">{{totalLength}}</span></li>
<li class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{completedLength}}</span></li>
<li class="label label-info hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
{{/booleans.can_play}}
{{#booleans.is_complete}}
<li class="label">Status: <span class="download-status">{{status}}</span></li>
<li class="label hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label">Size: <span class="download-size">{{size}}</span></li>
<li class="label">Size: <span class="download-totalLength">{{totalLength}}</span></li>
{{/booleans.is_complete}}
{{#booleans.is_removed}}
<li class="label label-warning">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-warning hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-warning">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-warning">Size: <span class="download-totalLength">{{totalLength}}</span></li>
{{/booleans.is_removed}}
{{#booleans.is_error}}
<li class="label label-important">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-important hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-important">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-important">Size: <span class="download-totalLength">{{totalLength}}</span></li>
{{/booleans.is_error}}
</ul>
</td>
@ -188,23 +188,23 @@
<li class="label">Status: <span class="download-status">{{status}}</span></li>
<li class="label">GID: <span class="download-gid">{{gid}}</span></li>
<li class="label">Dir: <span class="download-dir">{{dir}}</span></li>
<li class="label">Size: <span class="download-size">{{size}}</span></li>
<li class="label">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label">Size: <span class="download-totalLength">{{totalLength}}</span></li>
<li class="label">Downloaded: <span class="download-completedLength">{{completedLength}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{numPieces}}</span></li>
<li class="label">Piece Length: <span class="download-pieceLength">{{pieceLength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{eta}}</span></li>
<li class="label">Down Speed: <span class="download-down_speed">{{down_speed}}</span></li>
{{#bittorrent}}
<li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li>
<li class="label">Down Speed: <span class="download-downloadSpeed">{{downloadSpeed}}</span></li>
{{#booleans.bittorrent}}
<li class="label">Upload Speed: <span class="download-uploadSpeed">{{uploadSpeed}}</span></li>
<li class="label">Upload Length: <span class="download-uploadLength">{{uploadLength}}</span></li>
{{/bittorrent}}
{{/booleans.bittorrent}}
<li class="label">Connections: <span class="download-connections">{{connections}}</span></li>
</ul>
<h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone">
{{#files}}
<li class="label">{{path}} ({{size}})</li>
<li class="label">{{path}} ({{length}})</li>
{{/files}}
</ul>

66
js/ctrls/download.js
View File

@ -1,6 +1,5 @@
app.controller('DownloadCtrl', [ '$scope', '$rpc', '$utils',
function(scope, rpc, utils) {
scope.utils = utils;
scope.props = [
'gid', 'status', 'totalLength', 'completedLength',
'uploadLength', 'downloadSpeed', 'uploadSpeed',
@ -33,11 +32,10 @@ function(scope, rpc, utils) {
});
scope.getDownloads = function() {
var rets = scope.active
var downs = scope.active
.concat(scope.waiting).concat(scope.stopped);
window.scope = scope;
return rets;
return downs;
}
scope.mapDownloads = function(downs, mdowns) {
if (!mdowns) mdowns = [];
@ -53,6 +51,7 @@ function(scope, rpc, utils) {
scope.getCtx(downs[i], mdowns[i]);
}
// insert newly created downloads
while (i < downs.length) {
mdowns.push(scope.getCtx(downs[i++]));
}
@ -60,21 +59,66 @@ function(scope, rpc, utils) {
return mdowns;
}
scope.getCtx = function(d, ctx) {
ctx = ctx || {};
_.each(scope.props, function(p) {
ctx[p] = d[p];
ctx.status = d.status;
ctx.gid = d.gid;
ctx.numPieces = d.numPieces;
ctx.connections = d.connections;
ctx.dir = d.dir.replace(/\\/g, '/');
ctx.files = _.map(d.files, function(e) {
e.length = utils.changeLength(e.length, "B");
e.path = e.path.replace(/\\/g, '/').replace(ctx.dir, '.');
return e;
});
var path = (d.files[0].path || d.files[0].uris[0].uri);
ctx.name = utils.getFileName(path);
_.each(['downloadSpeed', 'uploadSpeed'], function(e) {
ctx[e] = utils.changeLength(d[e], 'B/s');
});
_.each([
'totalLength', /*'remainingLength',*/ 'completedLength',
'uploadLength', 'pieceLength'
], function(e) {
ctx[e] = utils.changeLength(d[e], 'B');
});
ctx.eta = utils.changeTime(
(d.remainingLength) / d.downloadSpeed
);
var percentage = (d.completedLength / d.totalLength)*100;
percentage = percentage.toFixed(2);
if(!percentage) percentage = 0;
ctx.percentage = percentage;
if (d.bittorrent && d.bittorrent.info) {
name = d.bittorrent.info.name;
ctx.name = d.bittorrent.info.name;
}
else {
ctx.name = utils.getFileName(ctx.files[0].path || ctx.files[0].uris[0].uri);
}
ctx.remainingLength = d.totalLength - d.completedLength;
ctx.eta = ctx.remainingLength / ctx.downloadSpeed;
var type = d.status;
if (type == "paused") type = "waiting";
if (["error", "removed", "complete"].indexOf(type) != -1)
type = "stopped";
ctx.type = type;
ctx.booleans = {
is_error: ctx.status === "error",
is_complete: ctx.status === "complete",
is_removed: ctx.status === "removed",
has_settings: ["active", "waiting", "paused"].indexOf(ctx.status) != -1,
can_pause: type == "active",
can_play: type == "waiting",
bittorrent: !!d.bittorrent,
can_restart: type == "stopped"
};
return ctx;
}

101
js/script.js
View File

@ -359,58 +359,69 @@ function getChunksFromHex(bitfield, numOfPieces) {
return chunks;
}
function getTemplateCtx(data) {
var percentage =(data.completedLength / data.totalLength)*100;
var obj = {
status: data.status,
gid: data.gid,
numPieces: data.numPieces,
connections: data.connections,
bittorrent: data.bittorrent
};
obj.files = data.files.map(function(e) {
e.length = changeLength(e.length, "B");
e.path = e.path.replace(/\\/g, '/').replace(obj.dir, '.');
return e;
});
_.each(['downloadSpeed', 'uploadSpeed'], function(e) {
obj[e] = changeLength(data[e], 'B/s');
});
_.each([
'totalLength', 'completedLength', 'uploadLength', 'pieceLength'
], function(e) {
obj[e] = changeLength(data[e], 'B');
});
obj.eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
var percentage = (data.completedLength / data.totalLength)*100;
percentage = percentage.toFixed(2);
if(!percentage) percentage = 0;
var name;
var seed = (data.files[0].path || data.files[0].uris[0].uri).split(/[/\\]/);
name = seed[seed.length - 1];
if (data.bittorrent && data.bittorrent.info) {
name = data.bittorrent.info.name;
}
var chunks = percentage !== 100 && data.bitfield ? getChunksFromHex(data.bitfield, data.numPieces) : [];
var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
obj.percentage = percentage;
if (obj.bittorrent && obj.bittorrent.info) {
obj.name = obj.bittorrent.info.name;
}
else {
var seed = (obj.files[0].path || obj.files[0].uris[0].uri).split(/[/\\]/);
obj.name = seed[seed.length - 1];
}
var type = data.status;
if (type == "paused") type = "waiting";
if (type == "error" || type == "removed" || type == "complete") type = "stopped";
if (["error", "removed", "complete"].indexOf(type) != -1)
type = "stopped";
data.dir = data.dir.replace(/\\/g, '/');
return {
name: name,
sett_name: name.substr(0,name.lastIndexOf('.')) || name,
status: data.status,
type: type,
percentage:percentage,
gid: data.gid,
size: changeLength(data.totalLength, "B"),
down_speed: changeLength(data.downloadSpeed, "B/s"),
remaining: changeLength(data.totalLength - data.completedLength, "B"),
eta: eta,
downloaded: changeLength(data.completedLength, "B"),
dir: data.dir,
numPieces: data.numPieces,
pieceLength: changeLength(data.pieceLength, "B"),
uploadLength: changeLength(data.uploadLength, "B"),
connections: data.connections,
upload_speed: changeLength(data.uploadSpeed, "B/s"),
booleans: {
is_error: data.status === "error",
is_complete: data.status === "complete",
is_removed: data.status === "removed",
has_settings: ["active", "waiting", "paused"].indexOf(data.status) != -1,
can_pause: type == "active",
can_play: type == "waiting",
can_restart: type == "stopped"
},
chunks: chunks,
files: data.files.map(function(e) {
e.size = changeLength(e.length, "B");
e.path = e.path.replace(/\\/g, '/').replace(data.dir, '.');
return e
}),
bittorrent: !!data.bittorrent
obj.type = type;
obj.dir = data.dir.replace(/\\/g, '/');
obj.chunks = percentage !== 100 && data.bitfield ? getChunksFromHex(data.bitfield, data.numPieces) : [];
obj.booleans = {
is_error: obj.status === "error",
is_complete: obj.status === "complete",
is_removed: obj.status === "removed",
has_settings: ["active", "waiting", "paused"].indexOf(obj.status) != -1,
can_pause: type == "active",
can_play: type == "waiting",
bittorrent: !!obj.bittorrent,
can_restart: type == "stopped"
};
return obj;
}
function updateDownloadTemplates(elem, ctx) {
elem = $(elem);