Advanced settings!

SSL and branch
This commit is contained in:
Mark McDowall 2013-09-24 21:51:44 -07:00
parent 283cd36db8
commit dc2af41e16
7 changed files with 237 additions and 101 deletions

View File

@ -12,6 +12,10 @@ define(
DefaultRootFolderId: 'DefaultRootFolderId'
},
getValueBoolean: function (key, defaultValue) {
return this.getValue(key, defaultValue) === 'true';
},
getValue: function (key, defaultValue) {
var storeValue = localStorage.getItem(key);
@ -35,6 +39,5 @@ define(
App.vent.trigger(this.Events.ConfigUpdatedEvent, {key: key, value: value});
}
};
});

View File

@ -5,7 +5,7 @@
.slide-button {
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
&.btn-danger {
&.btn-danger, &.btn-warning {
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
}
}
@ -16,5 +16,9 @@
&.btn-danger {
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}
&.btn-warning {
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
}
}
}

View File

@ -11,7 +11,45 @@
<i class="icon-nd-form-warning" title="Requires restart to take effect"/>
</span>
</div>
</div>
<div class="control-group advanced-setting">
<label class="control-label">Enable SSL</label>
<div class="controls">
<label class="checkbox toggle well">
<input type="checkbox" name="enableSsl" class="x-ssl"/>
<p>
<span>Yes</span>
<span>No</span>
</p>
<div class="btn btn-primary slide-button"/>
</label>
<span class="help-inline-checkbox">
<i class="icon-nd-form-warning" title="Requires restart running as administrator to take effect"/>
</span>
</div>
</div>
<div class="x-ssl-options">
<div class="control-group advanced-setting">
<label class="control-label">SSL Port Number</label>
<div class="controls">
<input type="number" placeholder="8989" name="sslPort"/>
</div>
</div>
<div class="control-group advanced-setting">
<label class="control-label">SSL Cert Hash</label>
<div class="controls">
<input type="number" name="sslCertHash"/>
</div>
</div>
</div>
<div class="control-group">
@ -30,7 +68,7 @@
</label>
<span class="help-inline-checkbox">
<i class="icon-question-sign" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
<i class="icon-nd-form-info" title="Open a web browser and navigate to NzbDrone homepage on app start. Has no effect if installed as a windows service"/>
</span>
</div>
</div>
@ -51,7 +89,7 @@
</label>
<span class="help-inline-checkbox">
<i class="icon-question-sign" title="Require Username and Password to access Nzbdrone"/>
<i class="icon-nd-form-info" title="Require Username and Password to access Nzbdrone"/>
</span>
</div>
</div>
@ -91,8 +129,7 @@
</div>
</fieldset>
{{#unless_eq branch compare="master"}}
<fieldset>
<fieldset class="advanced-setting">
<legend>Development</legend>
<div class="alert">
<i class="icon-nd-warning"></i>
@ -106,5 +143,4 @@
</div>
</div>
</fieldset>
{{/unless_eq}}
</div>

View File

@ -8,19 +8,25 @@ define(
template: 'Settings/General/GeneralTemplate',
events: {
'change .x-auth': '_setAuthOptionsVisibility'
'change .x-auth': '_setAuthOptionsVisibility',
'change .x-ssl': '_setSslOptionsVisibility'
},
ui: {
authToggle : '.x-auth',
authOptions: '.x-auth-options'
authOptions: '.x-auth-options',
sslToggle : '.x-ssl',
sslOptions: '.x-ssl-options'
},
onRender: function(){
if(!this.ui.authToggle.prop('checked')){
this.ui.authOptions.hide();
}
if(!this.ui.sslToggle.prop('checked')){
this.ui.sslOptions.hide();
}
},
_setAuthOptionsVisibility: function () {
@ -34,8 +40,20 @@ define(
else {
this.ui.authOptions.slideUp();
}
},
_setSslOptionsVisibility: function () {
var showSslOptions = this.ui.sslToggle.prop('checked');
if (showSslOptions) {
this.ui.sslOptions.slideDown();
}
else {
this.ui.sslOptions.slideUp();
}
}
});
return AsModelBoundView.call(view);

View File

@ -14,7 +14,8 @@ define(
'Settings/Notifications/CollectionView',
'Settings/Notifications/Collection',
'Settings/General/GeneralView',
'Shared/LoadingView'
'Shared/LoadingView',
'Config'
], function (App,
Marionette,
SettingsModel,
@ -28,7 +29,8 @@ define(
NotificationCollectionView,
NotificationCollection,
GeneralView,
LoadingView) {
LoadingView,
Config) {
return Marionette.Layout.extend({
template: 'Settings/SettingsLayoutTemplate',
@ -48,7 +50,8 @@ define(
indexersTab : '.x-indexers-tab',
downloadClientTab : '.x-download-client-tab',
notificationsTab : '.x-notifications-tab',
generalTab : '.x-general-tab'
generalTab : '.x-general-tab',
advancedSettings : '.x-advanced-settings'
},
events: {
@ -58,7 +61,67 @@ define(
'click .x-download-client-tab' : '_showDownloadClient',
'click .x-notifications-tab' : '_showNotifications',
'click .x-general-tab' : '_showGeneral',
'click .x-save-settings' : '_save'
'click .x-save-settings' : '_save',
'change .x-advanced-settings' : '_toggleAdvancedSettings'
},
initialize: function (options) {
if (options.action) {
this.action = options.action.toLowerCase();
}
},
onRender: function () {
this.loading.show(new LoadingView());
var self = this;
this.settings = new SettingsModel();
this.generalSettings = new GeneralSettingsModel();
this.namingSettings = new NamingModel();
this.indexerSettings = new IndexerCollection();
this.notificationSettings = new NotificationCollection();
$.when(this.settings.fetch(),
this.generalSettings.fetch(),
this.namingSettings.fetch(),
this.indexerSettings.fetch(),
this.notificationSettings.fetch()
).done(function () {
self.loading.$el.hide();
self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings }));
self.quality.show(new QualityLayout({ settings: self.settings }));
self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings }));
self.downloadClient.show(new DownloadClientLayout({ model: self.settings }));
self.notifications.show(new NotificationCollectionView({ collection: self.notificationSettings }));
self.general.show(new GeneralView({ model: self.generalSettings }));
});
this._setAdvancedSettingsState();
},
onShow: function () {
switch (this.action) {
case 'quality':
this._showQuality();
break;
case 'indexers':
this._showIndexers();
break;
case 'downloadclient':
this._showDownloadClient();
break;
case 'connect':
this._showNotifications();
break;
case 'notifications':
this._showNotifications();
break;
case 'general':
this._showGeneral();
break;
default:
this._showMediaManagement();
}
},
_showMediaManagement: function (e) {
@ -121,65 +184,30 @@ define(
});
},
initialize: function (options) {
if (options.action) {
this.action = options.action.toLowerCase();
}
},
onRender: function () {
this.loading.show(new LoadingView());
var self = this;
this.settings = new SettingsModel();
this.generalSettings = new GeneralSettingsModel();
this.namingSettings = new NamingModel();
this.indexerSettings = new IndexerCollection();
this.notificationSettings = new NotificationCollection();
$.when(this.settings.fetch(),
this.generalSettings.fetch(),
this.namingSettings.fetch(),
this.indexerSettings.fetch(),
this.notificationSettings.fetch()
).done(function () {
self.loading.$el.hide();
self.mediaManagement.show(new MediaManagementLayout({ settings: self.settings, namingSettings: self.namingSettings }));
self.quality.show(new QualityLayout({settings: self.settings}));
self.indexers.show(new IndexerLayout({ settings: self.settings, indexersCollection: self.indexerSettings }));
self.downloadClient.show(new DownloadClientLayout({model: self.settings}));
self.notifications.show(new NotificationCollectionView({collection: self.notificationSettings}));
self.general.show(new GeneralView({model: self.generalSettings}));
});
},
onShow: function () {
switch (this.action) {
case 'quality':
this._showQuality();
break;
case 'indexers':
this._showIndexers();
break;
case 'downloadclient':
this._showDownloadClient();
break;
case 'connect':
this._showNotifications();
break;
case 'notifications':
this._showNotifications();
break;
case 'general':
this._showGeneral();
break;
default:
this._showMediaManagement();
}
},
_save: function () {
App.vent.trigger(App.Commands.SaveSettings);
},
_setAdvancedSettingsState: function () {
var checked = Config.getValueBoolean('advancedSettings');
this.ui.advancedSettings.prop('checked', checked);
if (checked) {
this.$el.addClass('show-advanced-settings');
}
},
_toggleAdvancedSettings: function () {
var checked = this.ui.advancedSettings.prop('checked');
Config.setValue('advancedSettings', checked);
if (checked) {
this.$el.addClass('show-advanced-settings');
}
else {
this.$el.removeClass('show-advanced-settings');
}
}
});
});

View File

@ -6,6 +6,19 @@
<li><a href="#notifications" class="x-notifications-tab no-router">Connect</a></li>
<li><a href="#general" class="x-general-tab no-router">General</a></li>
<li class="pull-right"><button class="btn btn-primary x-save-settings">Save</button></li>
<li class="pull-right advanced-settings-toggle">
<label class="checkbox toggle well">
<input type="checkbox" class="x-advanced-settings"/>
<p>
<span>Show</span>
<span>Hide</span>
</p>
<div class="btn btn-warning slide-button"/>
</label>
<span class="help-inline-checkbox">
<i class="icon-nd-form-info" title="Show advanced options"/>
</span>
</li>
</ul>
<div class="tab-content">

View File

@ -1,5 +1,5 @@
@import "../Content/Bootstrap/variables";
@import "../Shared/Styles/clickable.less";
@import "Indexers/indexers";
@import "Quality/quality";
@import "Notifications/notifications";
@ -44,3 +44,37 @@ li.save-and-add:hover {
display: inline-block;
margin-top: 5px;
}
.advanced-settings-toggle {
margin-right: 40px;
.checkbox {
width : 100px;
margin-left : 0px;
display : inline-block;
padding-top : 0px;
margin-bottom : 0px;
margin-top : -1px;
}
.help-inline-checkbox {
display : inline-block;
margin-top : -23px;
margin-bottom : 0;
vertical-align : middle;
}
}
.advanced-setting {
display: none;
.control-label {
color: @warningText;
}
}
.show-advanced-settings {
.advanced-setting {
display: block;
}
}