q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reworked getUris/getTorrents/getMetalinks to be nicer and to have the advanced options as a collapsable block.

Browse Source
This commit is contained in:
Florent Viard 2014-06-10 01:59:23 +02:00
parent 9fbb10e96c
commit 4566c9a9f3
4 changed files with 198 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/modals.css
View File

@ -1,13 +1,50 @@
.modal-adduris textarea {
width: 100%;
}
.modal-large { .modal-large {
width: 80%; /* respsonsive width */ width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */ margin-left:-40%; /* width/2) */
} }
.modal-header {
/*padding-bottom: 0px;*/
margin-bottom: 0px;
}
.modal-body { .modal-body {
padding-top: 5px;
padding-bottom: 0px; padding-bottom: 0px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.modal-body textarea {
width: 100%;
}
.modal-advanced-title {
font-weight: bold;
margin-bottom: 0px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 0px;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.modal-advanced-options {
/*width: 100%;
margin-bottom: 10px;*/
margin-top:0px;
margin-bottom: 2px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-top: 0px;
border-radius: 0px 0px 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.modal-form-input-verylarge {
width: 95%;
}
.modal-form-input-number {
width: 80px;
}

165
index.html
View File

@ -624,6 +624,7 @@
<!--{{{ add uri modal --> <!--{{{ add uri modal -->
<script type="text/ng-template" id="getUris.html"> <script type="text/ng-template" id="getUris.html">
<div class="modal modal-adduris modal-large">
<div class="modal-header"> <div class="modal-header">
<button class="close" ng-click="$dismiss()">x</button> <button class="close" ng-click="$dismiss()">x</button>
<h3>Add Downloads By URIs</h3> <h3>Add Downloads By URIs</h3>
@ -651,28 +652,54 @@ http://ex1.com/f1.jpg http://ex2.com/f1.jpg
http://ex1.com/f2.mp4 http://ex2.com/f2.mp4 http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
</pre> </pre>
</p> </p>
<textarea rows="6" style="width: 100%" ng-model="getUris.uris"></textarea> <textarea rows="4" style="width: 100%" ng-model="getUris.uris"></textarea>
<legend>Download Settings</legend> <div>
<div class="control-group"> <div class="modal-advanced-title">
<div ng-repeat="(name, set) in getUris.settings"> Download settings
<label class="control-label">{{name}}</label> </div>
<div class="form-horizontal control-group modal-advanced-options">
<div class="controls"> <div ng-repeat="(name, set) in getUris.settings">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> <label class="control-label">{{name}}</label>
</select>
<input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> <div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getUris.collapsed = !getUris.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getUris.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getUris.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getUris.collapsed" class="form-horizontal control-group modal-advanced-options">
<div ng-repeat="(name, set) in getUris.fsettings">
<!-- Empty bloc for the real label to be aligned with control -->
<label class="control-label"></label>
<p class="help-block controls">{{set.desc}}</p>
<label class="control-label">{{name}}</label>
<div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div>
</div> </div>
<br>
</div> </div>
<button class="btn" ng-click="getUris.advance_opts()">Add More Download Specific Options</button>
</div>
</fieldset> </fieldset>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn" ng-click="$dismiss()">Cancel</button>
<button class="btn btn-primary" ng-click="$close()">Start</button> <button class="btn btn-primary" ng-click="$close()">Start</button>
</div> </div>
</div>
</script> </script>
<!-- }}} --> <!-- }}} -->
@ -690,22 +717,54 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
- You can select multiple torrents to start multiple downloads <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. - To add a magnet torrent url, use the add url option and add it there.
</p> </p>
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/> <div class="form-horizontal control-group">
<div class="control-group"> <label class="control-label" style="text-align: left;"><b>Select a Torrent:</b></label>
<div ng-repeat="(name, set) in getTorrents.settings"> <div class="controls">
<label class="control-label">{{name}}</label> <input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
</div>
</div>
<br />
<div class="controls"> <div>
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> <div class="modal-advanced-title">
</select> Download settings
<input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> </div>
<div class="form-horizontal control-group modal-advanced-options">
<div ng-repeat="(name, set) in getTorrents.settings">
<label class="control-label">{{name}}</label>
<div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getTorrents.collapsed = !getTorrents.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getTorrents.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getTorrents.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getTorrents.collapsed" class="form-horizontal control-group modal-advanced-options">
<div ng-repeat="(name, set) in getTorrents.fsettings">
<!-- Empty bloc for the real label to be aligned with control -->
<label class="control-label"></label>
<p class="help-block controls">{{set.desc}}</p>
<label class="control-label">{{name}}</label>
<div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div> </div>
<br><br>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<button class="btn" ng-click="getTorrents.advance_opts()">Add Download Specific Options</button>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn" ng-click="$dismiss()">Cancel</button>
@ -727,22 +786,54 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
- Select the metalink from the local filesystem to start the download. <br> - Select the metalink from the local filesystem to start the download. <br>
- You can select multiple metalinks to start multiple downloads - You can select multiple metalinks to start multiple downloads
</p> </p>
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/> <div class="form-horizontal control-group">
<div class="control-group"> <label class="control-label" style="text-align: left;"><b>Select a Metalinks:</b></label>
<div ng-repeat="(name, set) in getMetalinks.settings"> <div class="controls">
<label class="control-label">{{name}}</label> <input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
</div>
</div>
<br />
<div class="controls"> <div>
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> <div class="modal-advanced-title">
</select> Download settings
<input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> </div>
<div class="form-horizontal control-group modal-advanced-options">
<div ng-repeat="(name, set) in getMetalinks.settings">
<label class="control-label">{{name}}</label>
<div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br>
</div>
</div>
<br />
<div ng-click="getMetalinks.collapsed = !getMetalinks.collapsed" class="modal-advanced-title">
Advanced settings
<i ng-hide="!getMetalinks.collapsed" class="fa fa-fw fa-caret-right"></i>
<i ng-hide="getMetalinks.collapsed" class="fa fa-fw fa-caret-down"></i>
</div>
<div collapse="getMetalinks.collapsed" class="form-horizontal control-group modal-advanced-options">
<div ng-repeat="(name, set) in getMetalinks.fsettings">
<!-- Empty bloc for the real label to be aligned with control -->
<label class="control-label"></label>
<p class="help-block controls">{{set.desc}}</p>
<label class="control-label">{{name}}</label>
<div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select>
<input ng-show="!set.options.length" type="text" class="input-xxlarge modal-form-input-verylarge" ng-model="set.val"/>
</div>
<br />
</div> </div>
<br><br>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<button class="btn" ng-click="getMetalinks.advance_opts()">Add Download Specific Options</button>
</form> </form>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn" ng-click="$dismiss()">Cancel</button> <button class="btn" ng-click="$dismiss()">Cancel</button>
@ -767,7 +858,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<div class="controls"> <div class="controls">
<select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val"> <select ng-show="set.options.length" ng-options="opt for opt in set.options" ng-model="set.val">
</select> </select>
<input ng-show="!set.options.length" typ="text" class="input-xlarge" ng-model="set.val"/> <input ng-show="!set.options.length" type="text" class="input-xlarge" ng-model="set.val"/>
<label class="checkbox" ng-show="set.starred != undefined"> <label class="checkbox" ng-show="set.starred != undefined">
<input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page) <input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page)
</label> </label>
@ -812,7 +903,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
<label class="control-label">Enter the port:</label> <label class="control-label">Enter the port:</label>
<div class="controls"> <div class="controls">
<input type="text" class="input-xlarge" <input type="text" class="input-xlarge modal-form-input-number"
ng-model="connection.conf.port"/> ng-model="connection.conf.port"/>
<p class="help-block"> <p class="help-block">
Enter the port of the server on which the rpc for Enter the port of the server on which the rpc for

57
js/ctrls/modal.js
View File

@ -37,6 +37,7 @@ angular
open: function(cb) { open: function(cb) {
var self = this; var self = this;
this.uris = ""; this.uris = "";
this.collapsed = true;
this.settings = {}; this.settings = {};
this.fsettings = _.cloneDeep(fsettings); this.fsettings = _.cloneDeep(fsettings);
this.cb = cb; this.cb = cb;
@ -44,11 +45,13 @@ angular
// fill in default download properties // fill in default download properties
_.forEach(dprops, function(p) { _.forEach(dprops, function(p) {
self.settings[p] = self.fsettings[p]; self.settings[p] = self.fsettings[p];
delete self.fsettings[p];
}); });
this.inst = $modal.open({ this.inst = $modal.open({
templateUrl: "getUris.html", templateUrl: "getUris.html",
scope: scope scope: scope,
windowClass: "modal-large"
}); });
this.inst.result.then(function() { this.inst.result.then(function() {
delete self.inst; delete self.inst;
@ -57,6 +60,9 @@ angular
for (var i in self.settings) { for (var i in self.settings) {
settings[i] = self.settings[i].val; settings[i] = self.settings[i].val;
} }
for (var i in self.fsettings) {
settings[i] = self.fsettings[i].val;
}
console.log('sending settings:', settings); console.log('sending settings:', settings);
self.cb(self.parse(), settings); self.cb(self.parse(), settings);
@ -66,20 +72,6 @@ angular
delete self.inst; delete self.inst;
}); });
}, },
advance_opts: function() {
var self = this;
modals.invoke(
'settings', self.fsettings,
'Advance Download Options', 'Add', function(settings) {
for (var i in settings) {
if (fsettings[i].val != settings[i].val)
self.settings[i] = settings[i]
};
console.log('got back new settings:', self.settings);
});
},
parse: function() { parse: function() {
return _ return _
.chain(this.uris.trim().split(/\r?\n/g)) .chain(this.uris.trim().split(/\r?\n/g))
@ -97,7 +89,8 @@ angular
this.actionText = actionText; this.actionText = actionText;
this.inst = $modal.open({ this.inst = $modal.open({
templateUrl: "settings.html", templateUrl: "settings.html",
scope: scope scope: scope,
windowClass: "modal-large"
}); });
this.inst.result.then(function() { this.inst.result.then(function() {
delete self.inst; delete self.inst;
@ -119,7 +112,8 @@ angular
this.conf = rpc.getConfiguration(); this.conf = rpc.getConfiguration();
this.inst = $modal.open({ this.inst = $modal.open({
templateUrl: "connection.html", templateUrl: "connection.html",
scope: scope scope: scope,
windowClass: "modal-large",
}); });
this.inst.result.then(function() { this.inst.result.then(function() {
delete self.inst; delete self.inst;
@ -138,10 +132,20 @@ angular
open: function(cb) { open: function(cb) {
var self = this; var self = this;
this.files = []; this.files = [];
this.collapsed = true;
this.settings = {}; this.settings = {};
this.fsettings = _.cloneDeep(fsettings);
// fill in default download properties
_.forEach(dprops, function(p) {
self.settings[p] = self.fsettings[p];
delete self.fsettings[p];
});
this.inst = $modal.open({ this.inst = $modal.open({
templateUrl: name + ".html", templateUrl: name + ".html",
scope: scope scope: scope,
windowClass: "modal-large",
}); });
this.inst.result.then(function() { this.inst.result.then(function() {
delete self.inst; delete self.inst;
@ -151,6 +155,9 @@ angular
for (var i in self.settings) { for (var i in self.settings) {
settings[i] = self.settings[i].val; settings[i] = self.settings[i].val;
} }
for (var i in self.fsettings) {
settings[i] = self.fsettings[i].val;
}
console.log('sending settings:', settings); console.log('sending settings:', settings);
cb(txts, settings); cb(txts, settings);
@ -160,20 +167,6 @@ angular
function() { function() {
delete self.inst; delete self.inst;
}); });
},
advance_opts: function() {
var self = this;
modals.invoke(
'settings', _.cloneDeep(fsettings),
'Advance Download Options', 'Add', function(settings) {
for (var i in settings) {
if (fsettings[i].val != settings[i].val)
self.settings[i] = settings[i]
};
console.log('got back new settings:', self.settings);
});
} }
}; };
}); });

8
js/services/rpc/helpers.js
View File

@ -20,19 +20,19 @@ angular.module('webui.services.rpc.helpers', [
// now dispatch all addUri syscalls // now dispatch all addUri syscalls
rpc.forceUpdate(); rpc.forceUpdate();
}, },
addTorrents: function(txts) { addTorrents: function(txts, settings) {
_.each(txts, function(txt) { _.each(txts, function(txt) {
// passing true to batch all the addUri calls // passing true to batch all the addUri calls
rpc.once('addTorrent', [txt], angular.noop, true); rpc.once('addTorrent', [txt, [], settings], angular.noop, true);
}); });
// now dispatch all addUri syscalls // now dispatch all addUri syscalls
rpc.forceUpdate(); rpc.forceUpdate();
}, },
addMetalinks: function(txts) { addMetalinks: function(txts, settings) {
_.each(txts, function(txt) { _.each(txts, function(txt) {
// passing true to batch all the addUri calls // passing true to batch all the addUri calls
rpc.once('addMetalink', [txt], angular.noop, true); rpc.once('addMetalink', [txt, settings], angular.noop, true);
}); });
// now dispatch all addUri syscalls // now dispatch all addUri syscalls