filters landed in angular

angular.html

@@ -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">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}}</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}}</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">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}}</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">Size: <span class="download-totalLength">{{download.totalLength | blength}}</span></li>
-            <li class="label">Downloaded: <span class="download-completedLength">{{download.completedLength}}</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">Piece Length: <span class="download-pieceLength">{{download.pieceLength | blength}}</span></li>
-            <li class="label">ETA: <span class="download-eta">{{download.eta}}</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}}</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 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}}</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>
 <!-- }}} -->
 

js/ctrls/download.js

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

js/ctrls/modal.js

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

js/directives/dgraph.js

@@ -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

js/filters/bytes.js

@@ -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!";
+  };
+});
+

js/services/utils.js

@@ -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);