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

refactored download view ctx and added restart in angular

Browse Source
This commit is contained in:
hamza zia 2013-01-22 17:11:38 +05:00
parent 5ec45b0aac
commit dfe6bd509e
4 changed files with 116 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
angular.html
View File

@ -36,6 +36,7 @@
<script src="js/directives/dgraph.js"></script> <script src="js/directives/dgraph.js"></script>
<script src="js/filters/bytes.js"></script> <script src="js/filters/bytes.js"></script>
<script src="js/filters/path.js"></script>
<script src="js/services/deps.js"></script> <script src="js/services/deps.js"></script>
<script src="js/services/base64.js"></script> <script src="js/services/base64.js"></script>
@ -148,30 +149,31 @@
<tbody> <tbody>
<tr> <tr>
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview"> <td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<b class="download-name">{{download.name}}</b> <b class="download-name">{{getName(download)}}</b>
</td> </td>
<td class="download-controls" rowspan="2"> <td class="download-controls" rowspan="2">
<div class="btn-group"> <div class="btn-group">
<button ng-show="download.booleans.can_pause" class="btn download_pause" ng-click="pause(download)"><i class="icon-pause"></i></button> <button ng-show="hasStatus(download, 'active')" class="btn download_pause" ng-click="pause(download)"><i class="icon-pause"></i></button>
<button ng-show="download.booleans.can_play" class="btn download_play" ng-click="resume(download)"><i class="icon-play"></i></button> <button ng-show="hasStatus(download, 'paused')" class="btn download_play" ng-click="resume(download)"><i class="icon-play"></i></button>
<button ng-show="download.booleans.can_restart" class="btn download_restart"><i class="icon-repeat"></i></button> <button ng-show="canRestart(download)" class="btn download_restart" ng-click="restart(download)"><i class="icon-repeat"></i></button>
<button class="btn download_remove hidden-phone" ng-click="remove(download)"><i class="icon-stop"></i></button> <button class="btn download_remove hidden-phone" ng-click="remove(download)"><i class="icon-stop"></i></button>
<button ng-show="download.booleans.has_settings" class="btn download_settings hidden-phone"><i class="icon-cog"></i></button> <button class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown">
<i class="caret"></i> <i class="caret"></i>
</button> </button>
<ul class="dropdown-menu"> <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 class="visible-phone"><a href="#"><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 ng-show="download.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><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>
<li class="visible-phone"><a href="#" ng-click="remove(download)"><i class="icon-remove"></i> Remove</a></li>
</ul> </ul>
</div> </div>
</td> </td>
@ -180,33 +182,33 @@
<td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview"> <td data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse" class="download-overview">
<ul class="stats pull-left"> <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="hasStatus(download, 'active')" 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 | time}}</span></li> <li ng-show="hasStatus(download, 'active')" class="label label-success">ETA: <span class="download-eta">{{getEta(download) | time}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li> <li ng-show="hasStatus(download, 'active')" class="label label-success hidden-phone">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.can_pause" class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li> <li ng-show="hasStatus(download, 'active')" class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</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="hasStatus(download, 'active')" class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{getProgress(download)}}</span>%</li>
<li ng-show="download.booleans.can_pause" class="label label-success">Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li> <li ng-show="hasStatus(download, 'active')" class="label label-success">Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<!-- TODO: figure out how to do multiple ng-show <!-- TODO: figure out how to do multiple ng-show
<li ng-show="download.booleans.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li> <li ng-show="download.bittorrent" class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</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="hasStatus(download, 'paused')" 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 | blength}}</span></li> <li ng-show="hasStatus(download, 'paused')" class="label label-info">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
<li ng-show="download.booleans.can_play" class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li> <li ng-show="hasStatus(download, 'paused')" class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</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="hasStatus(download, 'paused')" 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="hasStatus(download, '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="hasStatus(download, '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 | blength}}</span></li> <li ng-show="hasStatus(download, 'complete')" class="label">Size: <span class="download-totalLength">{{download.totalLength | blength}}</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="hasStatus(download, '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="hasStatus(download, '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 | blength}}</span></li> <li ng-show="hasStatus(download, 'removed')" class="label label-warning">Size: <span class="download-totalLength">{{download.totalLength | blength}}</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="hasStatus(download, '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="hasStatus(download, '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 | blength}}</span></li> <li ng-show="hasStatus(download, 'error')" class="label label-important">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
</ul> </ul>
</td> </td>
@ -214,24 +216,24 @@
<tr> <tr>
<td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse"> <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 ng-show="hasStatus(download, 'active')" class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
<div ng-show="download.booleans.can_play" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;"> <div ng-show="hasStatus(download, 'paused')" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
<div ng-show="download.booleans.is_error" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;"> <div ng-show="hasStatus(download, 'error')" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
<div ng-show="download.booleans.is_removed" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;"> <div ng-show="hasStatus(download, 'removed')" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
<div ng-show="download.booleans.is_complete" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;"> <div ng-show="hasStatus(download, 'complete')" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{download.percentage}}%;"></div> <div class="bar" style="width: {{getProgress(download)}}%;"></div>
</div> </div>
</td> </td>
@ -248,21 +250,21 @@
<li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li> <li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</span></li>
<li class="label">Num of Pieces: <span class="download-numPieces">{{download.numPieces}}</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 | blength}}</span></li> <li class="label">Piece Length: <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{download.eta | time}}</span></li> <li class="label">ETA: <span class="download-eta">{{getEta(download) | time}}</span></li>
<li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li> <li class="label">Down Speed: <span class="download-downloadSpeed">{{download.downloadSpeed | bspeed}}</span></li>
<li class="label" ng-show="download.booleans.bittorrent">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li> <li class="label" ng-show="download.bittorrent">Upload Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</span></li>
<li class="label" ng-show="download.booleans.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength | blength}}</span></li> <li class="label" ng-show="download.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength | blength}}</span></li>
<li class="label">Connections: <span class="download-connections">{{download.connections}}</span></li> <li class="label">Connections: <span class="download-connections">{{download.connections}}</span></li>
</ul> </ul>
<h4 class="hidden-phone">Download Files</h4> <h4 class="hidden-phone">Download Files</h4>
<ul class="download-files hidden-phone"> <ul class="download-files hidden-phone">
<li class="label" ng-repeat="file in download.files">{{file.path}} ({{file.length | blength}})</li> <li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li>
</ul> </ul>
<div ng-show="download.booleans.can_pause"> <div ng-show="hasStatus(download, 'active')">
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph></div> <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph></div>
</div> </div>
</div> </div>

93
js/ctrls/download.js
View File

@ -20,10 +20,29 @@ function(scope, rpc, utils) {
// otherwise permanantly remove it // otherwise permanantly remove it
// d: the download ctx // d: the download ctx
scope.remove = function(d) { scope.remove = function(d) {
var method = d.type == 'stopped' ? 'removeDownloadResult' : 'remove'; var method = 'remove';
if (scope.getType(d) == 'stopped')
method = 'removeDownloadResult';
rpc.once(method, [d.gid]); rpc.once(method, [d.gid]);
} }
scope.restart = function(d) {
var uris =
_.chain(d.files).map(function(f) { return f.uris })
.filter(function(uris) { return uris.length })
.map(function(uris) {
return _.chain(uris)
.map(function(u) { return u.uri })
.uniq().value();
}).value();
if (uris.length > 0) {
rpc.once('removeDownloadResult', [d.gid], function() {
rpc.once('addUri', uris);
});
}
}
// start filling in the model of active, // start filling in the model of active,
// waiting and stopped download // waiting and stopped download
@ -59,52 +78,62 @@ function(scope, rpc, utils) {
ctx = ctx || {}; ctx = ctx || {};
_.each([ _.each([
'totalLength', 'completedLength', 'uploadLength', 'totalLength', 'completedLength', 'uploadLength', 'dir',
'pieceLength', 'downloadSpeed', 'uploadSpeed', 'pieceLength', 'downloadSpeed', 'uploadSpeed', 'files',
'status', 'gid', 'bitfield', 'numPieces', 'connections' 'status', 'gid', 'bitfield', 'numPieces', 'connections'
], function(e) { ], function(e) {
ctx[e] = d[e]; ctx[e] = d[e];
}); });
return ctx;
};
scope.canRestart = function(d) {
if (['active', 'paused'].indexOf(d.status) == -1
&& !d.bittorrent)
return true;
return false;
};
scope.hasStatus = function(d, status) {
return d.status == status;
};
// get time left for the download with
// current download speed,
// could be smarter by different heuristics
scope.getEta = function(d) {
return (d.totalLength-d.completedLength) / d.downloadSpeed;
}
// gets the progress in percentages
scope.getProgress = function(d) {
var percentage = (d.completedLength / d.totalLength)*100; var percentage = (d.completedLength / d.totalLength)*100;
percentage = percentage.toFixed(2); percentage = percentage.toFixed(2);
if(!percentage) percentage = 0; if(!percentage) percentage = 0;
ctx.percentage = percentage; return percentage;
ctx.dir = d.dir.replace(/\\/g, '/'); };
ctx.eta = (d.totalLength-d.completedLength) / d.downloadSpeed;
// gets a pretty name for the download
scope.getName = function(d) {
if (d.bittorrent && d.bittorrent.info) {
return d.bittorrent.info.name;
}
return utils.getFileName(
d.files[0].path || d.files[0].uris[0].uri
);
}
// gets the type for the download as classified by the aria2 rpc calls
scope.getType = function(d) {
var type = d.status; var type = d.status;
if (type == "paused") type = "waiting"; if (type == "paused") type = "waiting";
if (["error", "removed", "complete"].indexOf(type) != -1) if (["error", "removed", "complete"].indexOf(type) != -1)
type = "stopped"; type = "stopped";
ctx.type = type; return type;
ctx.files = _.map(d.files, function(e) {
e.path = e.path.replace(/\\/g, '/').replace(ctx.dir, '.');
return e;
});
if (d.bittorrent && d.bittorrent.info) {
ctx.name = d.bittorrent.info.name;
}
else {
ctx.name = utils.getFileName(ctx.files[0].path || ctx.files[0].uris[0].uri);
}
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;
}
}]); }]);

7
js/filters/path.js Normal file
View File

@ -0,0 +1,7 @@
// returns the relative path from base
app.filter('prelative', function() {
return function(path, base) {
return path.replace(/\\/g, '/')
.replace(base.replace(/\\/, '/'), '.');
};
});

2
js/services/utils.js
View File

@ -41,6 +41,8 @@ app.factory('$utils', function() {
// get download chunks from aria2 bitfield // get download chunks from aria2 bitfield
getChunksFromHex: function(bitfield, numOfPieces) { getChunksFromHex: function(bitfield, numOfPieces) {
var chunks = [], len = 0, numPieces = parseInt(numOfPieces); var chunks = [], len = 0, numPieces = parseInt(numOfPieces);
if (!bitfield) return [];
var totalDownloaded = 0; var totalDownloaded = 0;
if (numPieces > 1) { if (numPieces > 1) {
var chunk_ratio = 1 / numPieces; var chunk_ratio = 1 / numPieces;