refactored download view ctx and added restart in angular
This commit is contained in:
hamza zia
parent
5ec45b0aac
commit
dfe6bd509e
88
angular.html
88
angular.html
|
|
@ -36,6 +36,7 @@
|
|||
<script src="js/directives/dgraph.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/base64.js"></script>
|
||||
|
|
@ -148,30 +149,31 @@
|
|||
<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>
|
||||
<b class="download-name">{{getName(download)}}</b>
|
||||
</td>
|
||||
<td class="download-controls" rowspan="2">
|
||||
<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="download.booleans.can_play" 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="hasStatus(download, 'active')" class="btn download_pause" ng-click="pause(download)"><i class="icon-pause"></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="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 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">
|
||||
<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 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 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>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -180,33 +182,33 @@
|
|||
<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 | 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="download.booleans.can_pause" 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="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 hidden-phone hidden-tablet">Status: <span class="download-status">{{download.status}}</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="hasStatus(download, 'active')" 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">Downloaded: <span class="download-completedLength">{{download.completedLength | blength}}</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="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
|
||||
<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="download.booleans.can_play" 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="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">Status: <span class="download-status">{{download.status}}</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="hasStatus(download, 'paused')" 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">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 | blength}}</span></li>
|
||||
<li ng-show="hasStatus(download, 'complete')" class="label">Status: <span class="download-status">{{download.status}}</span></li>
|
||||
<li ng-show="hasStatus(download, 'complete')" class="label hidden-phone">Path: <span class="download-dir">{{download.dir}}</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="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 | blength}}</span></li>
|
||||
<li ng-show="hasStatus(download, 'removed')" class="label label-warning">Status: <span class="download-status">{{download.status}}</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="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="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 | blength}}</span></li>
|
||||
<li ng-show="hasStatus(download, 'error')" class="label label-important">Status: <span class="download-status">{{download.status}}</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="hasStatus(download, 'error')" class="label label-important">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
|
||||
|
||||
</ul>
|
||||
</td>
|
||||
|
|
@ -214,24 +216,24 @@
|
|||
<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 ng-show="hasStatus(download, 'active')" class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
|
||||
</div>
|
||||
|
||||
<div ng-show="download.booleans.can_play" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{download.percentage}}%;"></div>
|
||||
<div ng-show="hasStatus(download, 'paused')" class="progress progress-info progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{getProgress(download)}}%;"></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 ng-show="hasStatus(download, 'error')" class="progress progress-danger progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{getProgress(download)}}%;"></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 ng-show="hasStatus(download, 'removed')" class="progress progress-warning progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{getProgress(download)}}%;"></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 ng-show="hasStatus(download, 'complete')" class="progress progress-success progress-striped" style="width: 100%; margin: 0; padding: 0;">
|
||||
<div class="bar" style="width: {{getProgress(download)}}%;"></div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
|
|
@ -248,21 +250,21 @@
|
|||
<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">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" ng-show="download.booleans.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 Speed: <span class="download-uploadSpeed">{{download.uploadSpeed | bspeed}}</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>
|
||||
</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.length | blength}})</li>
|
||||
<li class="label" ng-repeat="file in download.files">{{file.path | prelative:download.dir}} ({{file.length | blength}})</li>
|
||||
</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,29 @@ function(scope, rpc, utils) {
|
|||
// otherwise permanantly remove it
|
||||
// d: the download ctx
|
||||
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]);
|
||||
}
|
||||
|
||||
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,
|
||||
// waiting and stopped download
|
||||
|
|
@ -59,52 +78,62 @@ function(scope, rpc, utils) {
|
|||
ctx = ctx || {};
|
||||
|
||||
_.each([
|
||||
'totalLength', 'completedLength', 'uploadLength',
|
||||
'pieceLength', 'downloadSpeed', 'uploadSpeed',
|
||||
'totalLength', 'completedLength', 'uploadLength', 'dir',
|
||||
'pieceLength', 'downloadSpeed', 'uploadSpeed', 'files',
|
||||
'status', 'gid', 'bitfield', 'numPieces', 'connections'
|
||||
], function(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;
|
||||
percentage = percentage.toFixed(2);
|
||||
if(!percentage) percentage = 0;
|
||||
|
||||
ctx.percentage = percentage;
|
||||
ctx.dir = d.dir.replace(/\\/g, '/');
|
||||
ctx.eta = (d.totalLength-d.completedLength) / d.downloadSpeed;
|
||||
return percentage;
|
||||
};
|
||||
|
||||
// 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;
|
||||
if (type == "paused") type = "waiting";
|
||||
if (["error", "removed", "complete"].indexOf(type) != -1)
|
||||
type = "stopped";
|
||||
ctx.type = 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;
|
||||
}
|
||||
return type;
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
|
|||
7
js/filters/path.js
Normal file
7
js/filters/path.js
Normal 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(/\\/, '/'), '.');
|
||||
};
|
||||
});
|
||||
|
|
@ -41,6 +41,8 @@ app.factory('$utils', function() {
|
|||
// get download chunks from aria2 bitfield
|
||||
getChunksFromHex: function(bitfield, numOfPieces) {
|
||||
var chunks = [], len = 0, numPieces = parseInt(numOfPieces);
|
||||
if (!bitfield) return [];
|
||||
|
||||
var totalDownloaded = 0;
|
||||
if (numPieces > 1) {
|
||||
var chunk_ratio = 1 / numPieces;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user