added metalink and torrent modals to angular

This commit is contained in:
hamza zia 2013-01-30 11:13:38 +05:00
parent c3c135a093
commit 5a9e0b8d4f
6 changed files with 192 additions and 18 deletions

View File

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

View File

@ -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) {
// modal already shown, user is busy
// TODO: get a better method of passing this on
cb([]);
}
else {
scope.getUris.cb = cb;
scope.getUris.shown = true;
_.each(['getTorrents', 'getMetalinks'], function(name) {
scope[name] = {
cb: null,
shown: false,
files: [],
finish: function() {
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;
};
});
});
}]);

View File

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

12
js/directives/fselect.js Normal file
View File

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

View File

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

View File

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