added metalink and torrent modals to angular

angular.html

@@ -39,6 +39,7 @@
 
   <script src="js/directives/chunkbar.js"></script>
   <script src="js/directives/dgraph.js"></script>
+  <script src="js/directives/fselect.js"></script>
 
   <script src="js/filters/bytes.js"></script>
   <script src="js/filters/path.js"></script>
@@ -94,10 +95,14 @@
             </a>
           </li>
           <li>
-            <a href="#"><i class="icon-file"></i> By Metalinks</a>
+            <a href="#" ng-click="addTorrents()">
+              <i class="icon-file"></i> By Torrents
+            </a>
           </li>
           <li>
-            <a href="#"><i class="icon-file"></i> By Torrents</a>
+            <a href="#" ng-click="addMetalinks()">
+              <i class="icon-file"></i> By Metalinks
+            </a>
           </li>
         </ul>
       </li>
@@ -296,7 +301,7 @@
 <!--{{{ add new Download template -->
 <div class="modal hide modal-adduris" modal="getUris.shown">
 	<div class="modal-header">
-		<button class="close" data-dismiss="modal">x</button>
+		<button class="close" ng-click="getUris.shown = false">x</button>
 		<h3>Add Downloads By URIs</h3>
 	</div>
 	<form class="modal-body">
@@ -304,7 +309,6 @@
       <legend>Download URIs</legend>
       <textarea rows="6" ng-model="getUris.uris"></textarea>
       <p class="help-block">
-        {{ uris }} <br>
         You can add multiple downloads (files)
         at the same time by putting uris for each
         file on a separate line.
@@ -330,10 +334,61 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
     </fieldset>
 	</form>
 	<div class="modal-footer">
-		<button class="btn" ng-click="getUris.finish()">Add Downloads</button>
+		<button class="btn" ng-click="getUris.shown = false">Cancel</button>
+		<button class="btn btn-primary" ng-click="getUris.finish()">Start</button>
 	</div>
 </div>
-<!-- add new Download template end }}}-->
+<!-- }}} -->
+
+<!-- {{{ add new torrent -->
+<div class="modal hide" modal="getTorrents.shown">
+	<div class="modal-header">
+		<button class="close" ng-click="getTorrents.shown = false">x</button>
+		<h3>Add Downloads By Torrents</h3>
+	</div>
+	<form class="modal-body">
+    <fieldset>
+      <legend>Select Torrents</legend>
+      <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
+      <p class="help-block">
+        Select the torrent from the local filesystem to start the download.
+        <br>
+        You can select multiple torrents to start multiple downloads
+        <br>
+        To add a magnet torrent url, use the add url option and add it there.
+      </p>
+    </fieldset>
+	</form>
+	<div class="modal-footer">
+		<button class="btn" ng-click="getTorrents.shown = false">Cancel</button>
+		<button class="btn btn-primary" ng-click="getTorrents.finish()">Start</button>
+	</div>
+</div
+<!-- }}} -->
+
+<!-- {{{ add new metalink -->
+<div class="modal hide" modal="getMetalinks.shown">
+	<div class="modal-header">
+		<button class="close" ng-click="getMetalinks.shown = false">x</button>
+		<h3>Add Downloads By Metalinks</h3>
+	</div>
+	<form class="modal-body">
+    <fieldset>
+      <legend>Select Metalinks</legend>
+      <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
+      <p class="help-block">
+        Select the metalink from the local filesystem to start the download.
+        <br>
+        You can select multiple metalinks to start multiple downloads
+      </p>
+    </fieldset>
+	</form>
+	<div class="modal-footer">
+		<button class="btn" ng-click="getMetalinks.shown = false">Cancel</button>
+		<button class="btn btn-primary" ng-click="getMetalinks.finish()">Start</button>
+	</div>
+</div
+<!-- }}} -->
 
 </div>
 <!-- }}} -->

js/ctrls/modal.js

@@ -1,3 +1,29 @@
+var parseFiles = function(files, cb) {
+  var cnt = 0;
+  var txts = [];
+  var onload = function(res) {
+    var txt = res.target.result;
+    txts.push(txt.split(',')[1]);
+    cnt--;
+    if (!cnt) {
+      cb(txts);
+    }
+  };
+  _.each(files, function(file) {
+    cnt++;
+    console.log('starting file reader');
+    var reader = new FileReader();
+    reader.onload = onload;
+    reader.onerror = function(err) {
+      // return error
+      // TODO: find a better way to propogate error upstream
+      console.log('got back error', err);
+      cb([]);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+
 angular
 .module('webui.ctrls.modal', [
   'webui.services.rpc', 'webui.services.deps', 'webui.services.modals'
@@ -8,8 +34,9 @@ angular
 
   scope.getUris = {
     cb: null,
-    uris: '',
     shown: false,
+
+    uris: '',
     parse: function() {
       return _
         .chain(this.uris.trim().split(/\n\r?/g))
@@ -27,16 +54,40 @@ angular
       this.shown = false;
     }
   };
-  modals.register('getUris', function(cb) {
+
-    if (scope.getUris.cb != null && scope.getUris.shown) {
+  _.each(['getTorrents', 'getMetalinks'], function(name) {
-      // modal already shown, user is busy
+    scope[name] =  {
-      // TODO: get a better method of passing this on
+      cb: null,
-      cb([]);
+      shown: false,
-    }
+
-    else {
+      files: [],
-      scope.getUris.cb = cb;
+      finish: function() {
-      scope.getUris.shown = true;
+        var self = this;
+        console.log('parsing files');
+        parseFiles(self.files, function(txts) {
+          console.log('calling cb', this.cb);
+          if (self.cb) self.cb(txts);
+
+          self.cb = null;
+          self.shown = false;
+        });
+      }
     };
   });
 
+  _.each(['getUris', 'getTorrents', 'getMetalinks'], function(name) {
+    modals.register(name, function(cb) {
+      if (scope[name].cb != null && scope[name].shown) {
+        // modal already shown, user is busy
+        // TODO: get a better method of passing this on
+        cb([]);
+      }
+      else {
+        console.log('setting cb for ', name, cb);
+        scope[name].cb = cb;
+        scope[name].shown = true;
+      };
+    });
+  });
+
 }]);

js/ctrls/nav.js

@@ -13,7 +13,27 @@ angular
   scope.collapsed = true;
 
   scope.addUris = function() {
-    modals.invoke('getUris', rhelpers.addUris);
+    modals.invoke(
+      'getUris', _.bind(rhelpers.addUris, rhelpers)
+    );
+  };
+
+  scope.addTorrents = function() {
+    modals.invoke(
+      'getTorrents', _.bind(rhelpers.addTorrents, rhelpers)
+    );
+  };
+
+  scope.addMetalinks = function() {
+    modals.invoke(
+      'getMetalinks', _.bind(rhelpers.addMetalinks, rhelpers)
+    );
+  };
+
+  scope.addTorrent = function() {
+    modals.invoke(
+      'getTorrent', _.bind(rhelpers.addTorrents, rhelpers)
+    );
   };
 
 }]);

js/directives/fselect.js

@@ -0,0 +1,12 @@
+// watches changes in the file upload control (input[file]) and
+// puts the files selected in an attribute
+angular
+.module('webui.directives.fselect', ['webui.services.deps'])
+.directive('fselect', ['$parse', function(parse) {
+  return function(scope, elem, attrs) {
+    var setfiles = parse(attrs.fselect || attrs.files).assign;
+    elem.bind('change', function() {
+      setfiles(scope, elem[0].files);
+    });
+  };
+}]);

js/init.js

@@ -2,7 +2,7 @@ angular.module('webui', [
   'webui.services.utils', 'webui.services.deps', 'webui.services.base64',
   'webui.services.constants', 'webui.services.rpc', 'webui.services.modals',
   'webui.filters.bytes', 'webui.filters.path',
-  'webui.directives.chunkbar', 'webui.directives.dgraph',
+  'webui.directives.chunkbar', 'webui.directives.dgraph', 'webui.directives.fselect',
   'webui.ctrls.download', 'webui.ctrls.nav', 'webui.ctrls.modal'
 ]);
 

js/services/rpc/helpers.js

@@ -18,6 +18,42 @@ angular.module('webui.services.rpc.helpers', [
         rpc.once('addUri', [uri], cb, true);
       });
 
+      // now dispatch all addUri syscalls
+      rpc.forceUpdate();
+    },
+    addTorrents: function(txts) {
+      var cnt = 0;
+      var cb = function(ret) {
+        cnt--;
+        if (!cnt) {
+          // close modal
+          console.log('closing modal');
+        }
+      };
+      _.each(txts, function(txt) {
+        cnt++;
+        // passing true to batch all the addUri calls
+        rpc.once('addTorrent', [txt], cb, true);
+      });
+
+      // now dispatch all addUri syscalls
+      rpc.forceUpdate();
+    },
+    addMetalinks: function(txts) {
+      var cnt = 0;
+      var cb = function(ret) {
+        cnt--;
+        if (!cnt) {
+          // close modal
+          console.log('closing modal');
+        }
+      };
+      _.each(txts, function(txt) {
+        cnt++;
+        // passing true to batch all the addUri calls
+        rpc.once('addMetalink', [txt], cb, true);
+      });
+
       // now dispatch all addUri syscalls
       rpc.forceUpdate();
     }