added metalink and torrent modals to angular
This commit is contained in:
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/chunkbar.js"></script>
|
||||||
<script src="js/directives/dgraph.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/bytes.js"></script>
|
||||||
<script src="js/filters/path.js"></script>
|
<script src="js/filters/path.js"></script>
|
||||||
@ -94,10 +95,14 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@ -296,7 +301,7 @@
|
|||||||
<!--{{{ add new Download template -->
|
<!--{{{ add new Download template -->
|
||||||
<div class="modal hide modal-adduris" modal="getUris.shown">
|
<div class="modal hide modal-adduris" modal="getUris.shown">
|
||||||
<div class="modal-header">
|
<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>
|
<h3>Add Downloads By URIs</h3>
|
||||||
</div>
|
</div>
|
||||||
<form class="modal-body">
|
<form class="modal-body">
|
||||||
@ -304,7 +309,6 @@
|
|||||||
<legend>Download URIs</legend>
|
<legend>Download URIs</legend>
|
||||||
<textarea rows="6" ng-model="getUris.uris"></textarea>
|
<textarea rows="6" ng-model="getUris.uris"></textarea>
|
||||||
<p class="help-block">
|
<p class="help-block">
|
||||||
{{ uris }} <br>
|
|
||||||
You can add multiple downloads (files)
|
You can add multiple downloads (files)
|
||||||
at the same time by putting uris for each
|
at the same time by putting uris for each
|
||||||
file on a separate line.
|
file on a separate line.
|
||||||
@ -330,10 +334,61 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
<div class="modal-footer">
|
<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>
|
||||||
</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>
|
</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
|
angular
|
||||||
.module('webui.ctrls.modal', [
|
.module('webui.ctrls.modal', [
|
||||||
'webui.services.rpc', 'webui.services.deps', 'webui.services.modals'
|
'webui.services.rpc', 'webui.services.deps', 'webui.services.modals'
|
||||||
@ -8,8 +34,9 @@ angular
|
|||||||
|
|
||||||
scope.getUris = {
|
scope.getUris = {
|
||||||
cb: null,
|
cb: null,
|
||||||
uris: '',
|
|
||||||
shown: false,
|
shown: false,
|
||||||
|
|
||||||
|
uris: '',
|
||||||
parse: function() {
|
parse: function() {
|
||||||
return _
|
return _
|
||||||
.chain(this.uris.trim().split(/\n\r?/g))
|
.chain(this.uris.trim().split(/\n\r?/g))
|
||||||
@ -27,16 +54,40 @@ angular
|
|||||||
this.shown = false;
|
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;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
}]);
|
}]);
|
||||||
|
@ -13,7 +13,27 @@ angular
|
|||||||
scope.collapsed = true;
|
scope.collapsed = true;
|
||||||
|
|
||||||
scope.addUris = function() {
|
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.utils', 'webui.services.deps', 'webui.services.base64',
|
||||||
'webui.services.constants', 'webui.services.rpc', 'webui.services.modals',
|
'webui.services.constants', 'webui.services.rpc', 'webui.services.modals',
|
||||||
'webui.filters.bytes', 'webui.filters.path',
|
'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'
|
'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);
|
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
|
// now dispatch all addUri syscalls
|
||||||
rpc.forceUpdate();
|
rpc.forceUpdate();
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user