Reworked getUris/getTorrents/getMetalinks to be nicer and to have the advanced options as a collapsable block.
This commit is contained in:
Florent Viard
parent
9fbb10e96c
commit
4566c9a9f3
|
|
@ -1,13 +1,50 @@
|
|||
.modal-adduris textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-large {
|
||||
width: 80%; /* respsonsive width */
|
||||
margin-left:-40%; /* width/2) */
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
/*padding-bottom: 0px;*/
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
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
165
index.html
|
|
@ -624,6 +624,7 @@
|
|||
|
||||
<!--{{{ add uri modal -->
|
||||
<script type="text/ng-template" id="getUris.html">
|
||||
<div class="modal modal-adduris modal-large">
|
||||
<div class="modal-header">
|
||||
<button class="close" ng-click="$dismiss()">x</button>
|
||||
<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
|
||||
</pre>
|
||||
</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 class="control-group">
|
||||
<div ng-repeat="(name, set) in getUris.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" typ="text" class="input-xlarge" ng-model="set.val"/>
|
||||
<div>
|
||||
<div class="modal-advanced-title">
|
||||
Download settings
|
||||
</div>
|
||||
<div class="form-horizontal control-group modal-advanced-options">
|
||||
<div ng-repeat="(name, set) in getUris.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="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>
|
||||
<br>
|
||||
</div>
|
||||
<button class="btn" ng-click="getUris.advance_opts()">Add More Download Specific Options</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" ng-click="$dismiss()">Cancel</button>
|
||||
<button class="btn btn-primary" ng-click="$close()">Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
- To add a magnet torrent url, use the add url option and add it there.
|
||||
</p>
|
||||
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
|
||||
<div class="control-group">
|
||||
<div ng-repeat="(name, set) in getTorrents.settings">
|
||||
<label class="control-label">{{name}}</label>
|
||||
<div class="form-horizontal control-group">
|
||||
<label class="control-label" style="text-align: left;"><b>Select a Torrent:</b></label>
|
||||
<div class="controls">
|
||||
<input type="file" class="input-xlarge" fselect="getTorrents.files" multiple/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<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" typ="text" class="input-xlarge" ng-model="set.val"/>
|
||||
<div>
|
||||
<div class="modal-advanced-title">
|
||||
Download settings
|
||||
</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>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button class="btn" ng-click="getTorrents.advance_opts()">Add Download Specific Options</button>
|
||||
</form>
|
||||
<div class="modal-footer">
|
||||
<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>
|
||||
- You can select multiple metalinks to start multiple downloads
|
||||
</p>
|
||||
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
|
||||
<div class="control-group">
|
||||
<div ng-repeat="(name, set) in getMetalinks.settings">
|
||||
<label class="control-label">{{name}}</label>
|
||||
<div class="form-horizontal control-group">
|
||||
<label class="control-label" style="text-align: left;"><b>Select a Metalinks:</b></label>
|
||||
<div class="controls">
|
||||
<input type="file" class="input-xlarge" fselect="getMetalinks.files" multiple/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<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" typ="text" class="input-xlarge" ng-model="set.val"/>
|
||||
<div>
|
||||
<div class="modal-advanced-title">
|
||||
Download settings
|
||||
</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>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button class="btn" ng-click="getMetalinks.advance_opts()">Add Download Specific Options</button>
|
||||
</form>
|
||||
<div class="modal-footer">
|
||||
<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">
|
||||
<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" 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">
|
||||
<input type="checkbox" ng-model="set.starred"/> Quick Access (shown on the main page)
|
||||
</label>
|
||||
|
|
@ -812,7 +903,7 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
|
|||
|
||||
<label class="control-label">Enter the port:</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-xlarge"
|
||||
<input type="text" class="input-xlarge modal-form-input-number"
|
||||
ng-model="connection.conf.port"/>
|
||||
<p class="help-block">
|
||||
Enter the port of the server on which the rpc for
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ angular
|
|||
open: function(cb) {
|
||||
var self = this;
|
||||
this.uris = "";
|
||||
this.collapsed = true;
|
||||
this.settings = {};
|
||||
this.fsettings = _.cloneDeep(fsettings);
|
||||
this.cb = cb;
|
||||
|
|
@ -44,11 +45,13 @@ angular
|
|||
// fill in default download properties
|
||||
_.forEach(dprops, function(p) {
|
||||
self.settings[p] = self.fsettings[p];
|
||||
delete self.fsettings[p];
|
||||
});
|
||||
|
||||
this.inst = $modal.open({
|
||||
templateUrl: "getUris.html",
|
||||
scope: scope
|
||||
scope: scope,
|
||||
windowClass: "modal-large"
|
||||
});
|
||||
this.inst.result.then(function() {
|
||||
delete self.inst;
|
||||
|
|
@ -57,6 +60,9 @@ angular
|
|||
for (var i in self.settings) {
|
||||
settings[i] = self.settings[i].val;
|
||||
}
|
||||
for (var i in self.fsettings) {
|
||||
settings[i] = self.fsettings[i].val;
|
||||
}
|
||||
|
||||
console.log('sending settings:', settings);
|
||||
self.cb(self.parse(), settings);
|
||||
|
|
@ -66,20 +72,6 @@ angular
|
|||
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() {
|
||||
return _
|
||||
.chain(this.uris.trim().split(/\r?\n/g))
|
||||
|
|
@ -97,7 +89,8 @@ angular
|
|||
this.actionText = actionText;
|
||||
this.inst = $modal.open({
|
||||
templateUrl: "settings.html",
|
||||
scope: scope
|
||||
scope: scope,
|
||||
windowClass: "modal-large"
|
||||
});
|
||||
this.inst.result.then(function() {
|
||||
delete self.inst;
|
||||
|
|
@ -119,7 +112,8 @@ angular
|
|||
this.conf = rpc.getConfiguration();
|
||||
this.inst = $modal.open({
|
||||
templateUrl: "connection.html",
|
||||
scope: scope
|
||||
scope: scope,
|
||||
windowClass: "modal-large",
|
||||
});
|
||||
this.inst.result.then(function() {
|
||||
delete self.inst;
|
||||
|
|
@ -138,10 +132,20 @@ angular
|
|||
open: function(cb) {
|
||||
var self = this;
|
||||
this.files = [];
|
||||
this.collapsed = true;
|
||||
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({
|
||||
templateUrl: name + ".html",
|
||||
scope: scope
|
||||
scope: scope,
|
||||
windowClass: "modal-large",
|
||||
});
|
||||
this.inst.result.then(function() {
|
||||
delete self.inst;
|
||||
|
|
@ -151,6 +155,9 @@ angular
|
|||
for (var i in self.settings) {
|
||||
settings[i] = self.settings[i].val;
|
||||
}
|
||||
for (var i in self.fsettings) {
|
||||
settings[i] = self.fsettings[i].val;
|
||||
}
|
||||
|
||||
console.log('sending settings:', settings);
|
||||
cb(txts, settings);
|
||||
|
|
@ -160,20 +167,6 @@ angular
|
|||
function() {
|
||||
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);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,19 +20,19 @@ angular.module('webui.services.rpc.helpers', [
|
|||
// now dispatch all addUri syscalls
|
||||
rpc.forceUpdate();
|
||||
},
|
||||
addTorrents: function(txts) {
|
||||
addTorrents: function(txts, settings) {
|
||||
_.each(txts, function(txt) {
|
||||
// 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
|
||||
rpc.forceUpdate();
|
||||
},
|
||||
addMetalinks: function(txts) {
|
||||
addMetalinks: function(txts, settings) {
|
||||
_.each(txts, function(txt) {
|
||||
// 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user