added metalink and torrent modals to angular
This commit is contained in:
hamza zia
parent
c3c135a093
commit
5a9e0b8d4f
67
angular.html
67
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>
|
||||
<!-- }}} -->
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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 {
|
||||
scope.getUris.cb = cb;
|
||||
scope.getUris.shown = true;
|
||||
console.log('setting cb for ', name, cb);
|
||||
scope[name].cb = cb;
|
||||
scope[name].shown = true;
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -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
12
js/directives/fselect.js
Normal 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);
|
||||
});
|
||||
};
|
||||
}]);
|
||||
|
|
@ -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'
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user