download info now working in angular

angular.html

@@ -139,15 +139,15 @@
       <tbody>
       <tr>
         <td data-toggle="collapse" data-target=".download-detail .collapse" class="download-overview">
-          <b class="download-name">{{name}}</b>
+          <b class="download-name">name {{download.gid}}</b>
 
           <ul class="stats hidden-phone pull-right">
-            <li class="label label-success">Time left: <span class="download-eta">{{eta}}</span></li>
+            <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">{{down_speed}}</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">{{percentage}}%</span></li>
+            <li class="label label-success">Progress: <span class="download-down_speed">{{(download.completedLength / download.totalLength)*100}}%</span></li>
           </ul>
           <div class="progress full-progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
-            <div class="bar" style="width: 90%;"></div>
+            <div class="bar" style="width: {{(download.completedLength / download.totalLength)*100}}%;"></div>
           </div>
         </td>
         <td class="download-controls">
@@ -171,23 +171,18 @@
           <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">{{status}}</span></li>
+              <li class="label">Status: <span class="download-status">{{download.status}}</span></li>
-              <li class="label">GID: <span class="download-gid">{{gid}}</span></li>
+              <li class="label">GID: <span class="download-gid">{{download.gid}}</span></li>
-              <li class="label">Dir: <span class="download-dir">{{dir}}</span></li>
+              <li class="label">Dir: <span class="download-dir">{{download.dir}}</span></li>
-              <li class="label">Size: <span class="download-size">{{size}}</span></li>
+              <li class="label">Size: <span class="download-size">{{download.totalLength}}</span></li>
-              <li class="label">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
+              <li class="label">Downloaded: <span class="download-downloaded">{{download.downloadSpeed}}</span></li>
-              <li class="label">Num of Pieces: <span class="download-numPieces">{{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">{{pieceLength}}</span></li>
+              <li class="label">Piece Length: <span class="download-pieceLength">{{download.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>
-              <li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li>
-              <li class="label">Upload Length: <span class="download-uploadLength">{{uploadLength}}</span></li>
-              <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">
-              <li class="label">{{path}} ({{size}})</li>
+              <li class="label" ng-repeat="file in download.files">{{file.path}} ({{file.completedLength}})</li>
             </ul>
 
             <div>

css/download.css

@@ -1,23 +1,7 @@
 .download-name {
   font-size: 12px;
 }
-.active-download {
+.active-download, .waiting-download, .stopped-download, .download {
-  width: 100%;
-  margin-bottom: 10px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.waiting-download {
-  width: 100%;
-  margin-bottom: 10px;
-  background-color: rgb(245, 245, 245);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
-}
-.stopped-download {
   width: 100%;
   margin-bottom: 10px;
   background-color: rgb(245, 245, 245);

js/ctrls/download.js

@@ -1,36 +1,82 @@
 app.controller('DownloadCtrl', [ '$scope', '$rpc', '$utils',
 function(scope, rpc, utils) {
-  scope.active = scope.waiting = scope.stopped = [];
+  scope.utils = utils;
+  scope.props = [
+    'gid', 'status', 'totalLength', 'completedLength',
+    'uploadLength', 'downloadSpeed', 'uploadSpeed',
+    'errorCode' , 'followedBy', 'belongsTo', 'bitfield',
+    'infoHash', 'numSeeders', 'pieceLength',
+    'numPieces', 'connections', 'dir', 'files', 'bittorrent'
+  ];
+
+  scope.active = [], scope.waiting = [], scope.stopped = [];
 
 
   rpc.subscribe('tellActive', [], function(data) {
     console.log('got active data');
     scope.$apply(function() {
-      scope.active = data[0].map(scope.normalize);
+      scope.mapDownloads(data[0], scope.active);
     });
   });
 
   rpc.subscribe('tellWaiting', [0, 100], function(data) {
     scope.$apply(function() {
-      scope.waiting = data[0].map(scope.normalize);
+      scope.mapDownloads(data[0], scope.waiting);
     });
   });
 
 
   rpc.subscribe('tellStopped', [0, 100], function(data) {
     scope.$apply(function() {
-      scope.stopped = data[0].map(scope.normalize);
+      scope.mapDownloads(data[0], scope.stopped);
     });
   });
 
   scope.getDownloads = function() {
     var rets = scope.active
-      .concat(scope.waiting).concat(scope.stopped)
+      .concat(scope.waiting).concat(scope.stopped);
+    window.scope = scope;
+
     return rets;
   }
+  scope.mapDownloads = function(downs, mdowns) {
+    if (!mdowns) mdowns = [];
 
-  scope.normalize = function(d) {
+    for (i = 0; i < mdowns.length; i++) {
-    return d;
+      if (i >= downs.length) {
+        // remove the deleted downloads
+        mdowns.splice(i, mdowns.length - downs.length);
+        break;
+      }
+      if (!mdowns[i]) mdowns[i] = {};
+
+      scope.getCtx(downs[i], mdowns[i]);
+    }
+
+    while (i < downs.length) {
+      mdowns.push(scope.getCtx(downs[i++]));
+    }
+
+    return mdowns;
+  }
+
+  scope.getCtx = function(d, ctx) {
+    ctx = ctx || {};
+    _.each(scope.props, function(p) {
+      ctx[p] = d[p];
+    });
+
+    var path = (data.files[0].path || data.files[0].uris[0].uri);
+    ctx.name = utils.getFileName(path);
+
+    if (d.bittorrent && d.bittorrent.info) {
+      name = d.bittorrent.info.name;
+    }
+
+    ctx.remainingLength = d.totalLength - d.completedLength;
+    ctx.eta = ctx.remainingLength / ctx.downloadSpeed;
+
+    return ctx;
   }
 
 }]);

js/services/utils.js

@@ -1,5 +1,9 @@
 app.factory('$utils', function() {
   return {
+    getFileName: function(path) {
+      var seed = path.split(/[/\\]/);
+      return seed[seed.length - 1];
+    },
     randStr: function() {
       var str = [];
       var hexDigits = "0123456789abcdef";