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

filters landed in angular

Browse Source
This commit is contained in:
hamza zia 2013-01-22 12:53:30 +05:00
parent 73dbcb67e0
commit 9db282addd
6 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
angular.html
View File

@ -35,6 +35,8 @@
<script src="js/directives/chunkbar.js"></script>
<script src="js/directives/dgraph.js"></script>
<script src="js/filters/bytes.js"></script>
<script src="js/services/deps.js"></script>
<script src="js/services/base64.js"></script>
<script src="js/services/utils.js"></script>
@ -151,9 +153,11 @@
</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>
<button ng-show="download.booleans.has_settings" class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
@ -178,32 +182,32 @@
<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">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}}</span></li>
<li ng-show="download.booleans.can_pause" 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}}</span></li>
<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.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">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="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_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}}</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="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>
<li ng-show="download.booleans.is_error" class="label label-important">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
</ul>
</td>
@ -241,26 +245,26 @@
<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">Size: <span class="download-totalLength">{{download.totalLength | 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">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">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">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}}</span></li>
<li class="label" ng-show="download.booleans.bittorrent">Upload Length: <span class="download-uploadLength">{{download.uploadLength}}</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">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}})</li>
<li class="label" ng-repeat="file in download.files">{{file.path}} ({{file.length | blength}})</li>
</ul>
<div ng-show="download.booleans.can_pause">
<div class="download-graph" dspeed="download.dspeed" uspeed="download.uspeed" dgraph></div>
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph></div>
</div>
</div>
</td>
@ -274,7 +278,6 @@
<!-- {{{ modals -->
<div ng-controller="ModalCtrl">
</div>
<!-- }}} -->

32
js/ctrls/download.js
View File

@ -41,37 +41,23 @@ function(scope, rpc, utils) {
scope.getCtx = function(d, ctx) {
ctx = ctx || {};
ctx.status = d.status;
ctx.bitfield = d.bitfield;
ctx.gid = d.gid;
ctx.numPieces = d.numPieces;
ctx.connections = d.connections;
ctx.dir = d.dir.replace(/\\/g, '/');
_.each([
'totalLength', 'completedLength', 'uploadLength',
'pieceLength', 'downloadSpeed', 'uploadSpeed',
'status', 'gid', 'bitfield', 'numPieces', 'connections'
], function(e) {
ctx[e] = d[e];
});
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;
});
_.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');
});
// raw data for graphs
ctx.dspeed = d.downloadSpeed;
ctx.uspeed = d.uploadSpeed;
ctx.eta = utils.changeTime(
(d.totalLength-d.completedLength) / d.downloadSpeed
);
ctx.eta = (d.totalLength-d.completedLength) / d.downloadSpeed;
var percentage = (d.completedLength / d.totalLength)*100;
percentage = percentage.toFixed(2);

1
js/ctrls/modal.js
View File

@ -1,4 +1,3 @@
app.controller('ModalCtrl', ['$scope', function(scope) {
}]);

4
js/directives/dgraph.js
View File

@ -1,5 +1,5 @@
app.directive('dgraph', ['$', '$utils', function($, utils) {
app.directive('dgraph', ['$', '$filter', function($, filter) {
return function(scope, elem, attrs) {
@ -30,7 +30,7 @@ app.directive('dgraph', ['$', '$utils', function($, utils) {
},
yaxis: {
tickFormatter: function(val, axis) {
return utils.changeLength(val, "B/s");
return filter('bspeed')(val);
}
,
min: 0

34
js/filters/bytes.js Normal file
View File

@ -0,0 +1,34 @@
app.filter('changeLength', function() {
return function(len, pref) {
len = parseFloat(len);
if(len <= (1<<10)) return len.toFixed(1) + " " + pref;
else if(len <= (1<<20)) return (len/(1<<10)).toFixed(1) + " K" + pref;
else if(len <= (1<<30)) return (len/(1<<20)).toFixed(1) + " M" + pref;
else return (len/(1<<30)).toFixed(1) + " G" + pref;
};
});
app.filter('blength', ['$filter', function(filter) {
return function(len) {
return filter('changeLength')(len, 'B');
};
}]);
app.filter('bspeed', ['$filter', function(filter) {
return function(speed) {
return filter('changeLength')(speed, 'B/s');
};
}]);
app.filter('time', function() {
return function(time) {
time = parseFloat(time);
if (isNaN(time) || !isFinite(time)) return " infinite";
if (!time) return " infinite";
if (time < 60) return time.toFixed(2) + " s";
else if (time < 60*60) return (time/60).toFixed(2) + " min";
else if (time < 60*60*24) return (time/(60*60)).toFixed(2) + " hours";
else return (time/(60*60*24)).toFixed(2) + " days!";
};
});

20
js/services/utils.js
View File

@ -38,26 +38,6 @@ app.factory('$utils', function() {
return dest;
},
// change time units
changeTime: function(time) {
time = parseFloat(time);
if (isNaN(time) || !isFinite(time)) return " infinite";
if (!time) return " infinite";
if (time < 60) return time.toFixed(2) + " s";
else if (time < 60*60) return (time/60).toFixed(2) + " min";
else if (time < 60*60*24) return (time/(60*60)).toFixed(2) + " hours";
else return (time/(60*60*24)).toFixed(2) + " days!";
},
// change length units
changeLength: function(len, pref) {
len = parseFloat(len);
if(len <= (1<<10)) return len.toFixed(1) + " " + pref;
else if(len <= (1<<20)) return (len/(1<<10)).toFixed(1) + " K" + pref;
else if(len <= (1<<30)) return (len/(1<<20)).toFixed(1) + " M" + pref;
else return (len/(1<<30)).toFixed(1) + " G" + pref;
},
// get download chunks from aria2 bitfield
getChunksFromHex: function(bitfield, numOfPieces) {
var chunks = [], len = 0, numPieces = parseInt(numOfPieces);