UI Cleanup - Updated Settings subtree.

This commit is contained in:
Taloth Saldono
2015-02-14 00:37:11 +01:00
parent b69ea349ce
commit 019525dd9d
72 changed files with 1458 additions and 1039 deletions
@@ -3,7 +3,7 @@ var ThingyHeaderGroupView = require('../../ThingyHeaderGroupView');
var AddItemView = require('./DownloadClientAddItemView');
module.exports = ThingyAddCollectionView.extend({
itemView : ThingyHeaderGroupView.extend({itemView : AddItemView}),
itemView : ThingyHeaderGroupView.extend({ itemView : AddItemView }),
itemViewContainer : '.add-download-client .items',
template : 'Settings/DownloadClient/Add/DownloadClientAddCollectionViewTemplate'
});
@@ -5,42 +5,54 @@ var Marionette = require('marionette');
var EditView = require('../Edit/DownloadClientEditView');
module.exports = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/Add/DownloadClientAddItemViewTemplate',
tagName : 'li',
className : 'add-thingy-item',
events : {
"click .x-preset" : '_addPreset',
"click" : '_add'
template : 'Settings/DownloadClient/Add/DownloadClientAddItemViewTemplate',
tagName : 'li',
className : 'add-thingy-item',
events : {
'click .x-preset' : '_addPreset',
'click' : '_add'
},
initialize : function(options){
initialize : function(options) {
this.targetCollection = options.targetCollection;
},
_addPreset : function(e){
_addPreset : function(e) {
var presetName = $(e.target).closest('.x-preset').attr('data-id');
var presetData = _.where(this.model.get('presets'), {name : presetName})[0];
var presetData = _.where(this.model.get('presets'), { name : presetName })[0];
this.model.set(presetData);
this.model.set({
id : undefined,
enable : true
});
var editView = new EditView({
model : this.model,
targetCollection : this.targetCollection
});
AppLayout.modalRegion.show(editView);
},
_add : function(e){
if($(e.target).closest('.btn,.btn-group').length !== 0) {
_add : function(e) {
if ($(e.target).closest('.btn,.btn-group').length !== 0) {
return;
}
this.model.set({
id : undefined,
enable : true
});
var editView = new EditView({
model : this.model,
targetCollection : this.targetCollection
});
AppLayout.modalRegion.show(editView);
}
});
@@ -5,29 +5,35 @@ var SchemaCollection = require('../DownloadClientCollection');
var AddCollectionView = require('./DownloadClientAddCollectionView');
module.exports = {
open : function(collection){
open : function(collection) {
var schemaCollection = new SchemaCollection();
var originalUrl = schemaCollection.url;
schemaCollection.url = schemaCollection.url + '/schema';
schemaCollection.fetch();
schemaCollection.url = originalUrl;
var groupedSchemaCollection = new Backbone.Collection();
schemaCollection.on('sync', function(){
var groups = schemaCollection.groupBy(function(model, iterator){
schemaCollection.on('sync', function() {
var groups = schemaCollection.groupBy(function(model, iterator) {
return model.get('protocol');
});
var modelCollection = _.map(groups, function(values, key, list){
var modelCollection = _.map(groups, function(values, key, list) {
return {
"header" : key,
'header' : key,
collection : values
};
});
groupedSchemaCollection.reset(modelCollection);
});
var view = new AddCollectionView({
collection : groupedSchemaCollection,
targetCollection : collection
});
AppLayout.modalRegion.show(view);
}
};
@@ -3,11 +3,15 @@ var Marionette = require('marionette');
module.exports = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/Delete/DownloadClientDeleteViewTemplate',
events : {'click .x-confirm-delete' : '_delete'},
_delete : function(){
events : {
'click .x-confirm-delete' : '_delete'
},
_delete : function() {
this.model.destroy({
wait : true,
success : function(){
success : function() {
vent.trigger(vent.Commands.CloseModalCommand);
}
});
@@ -2,19 +2,24 @@ var Backbone = require('backbone');
var DownloadClientModel = require('./DownloadClientModel');
module.exports = Backbone.Collection.extend({
model : DownloadClientModel,
url : window.NzbDrone.ApiRoot + '/downloadclient',
comparator : function(left, right, collection){
model : DownloadClientModel,
url : window.NzbDrone.ApiRoot + '/downloadclient',
comparator : function(left, right, collection) {
var result = 0;
if(left.get('protocol')) {
if (left.get('protocol')) {
result = -left.get('protocol').localeCompare(right.get('protocol'));
}
if(result === 0 && left.get('name')) {
if (result === 0 && left.get('name')) {
result = left.get('name').localeCompare(right.get('name'));
}
if(result === 0) {
if (result === 0) {
result = left.get('implementation').localeCompare(right.get('implementation'));
}
return result;
}
});
@@ -6,12 +6,20 @@ module.exports = Marionette.CompositeView.extend({
itemView : ItemView,
itemViewContainer : '.download-client-list',
template : 'Settings/DownloadClient/DownloadClientCollectionViewTemplate',
ui : {"addCard" : '.x-add-card'},
events : {"click .x-add-card" : '_openSchemaModal'},
appendHtml : function(collectionView, itemView, index){
ui : {
'addCard' : '.x-add-card'
},
events : {
'click .x-add-card' : '_openSchemaModal'
},
appendHtml : function(collectionView, itemView, index) {
collectionView.ui.addCard.parent('li').before(itemView.el);
},
_openSchemaModal : function(){
_openSchemaModal : function() {
SchemaModal.open(this.collection);
}
});
@@ -3,13 +3,18 @@ var Marionette = require('marionette');
var EditView = require('./Edit/DownloadClientEditView');
module.exports = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/DownloadClientItemViewTemplate',
tagName : 'li',
events : {"click" : '_edit'},
initialize : function(){
template : 'Settings/DownloadClient/DownloadClientItemViewTemplate',
tagName : 'li',
events : {
'click' : '_edit'
},
initialize : function() {
this.listenTo(this.model, 'sync', this.render);
},
_edit : function(){
_edit : function() {
var view = new EditView({
model : this.model,
targetCollection : this.model.collection
@@ -7,23 +7,26 @@ var RemotePathMappingCollection = require('./RemotePathMapping/RemotePathMapping
var RemotePathMappingCollectionView = require('./RemotePathMapping/RemotePathMappingCollectionView');
module.exports = Marionette.Layout.extend({
template : 'Settings/DownloadClient/DownloadClientLayoutTemplate',
regions : {
template : 'Settings/DownloadClient/DownloadClientLayoutTemplate',
regions : {
downloadClients : '#x-download-clients-region',
downloadHandling : '#x-download-handling-region',
droneFactory : '#x-dronefactory-region',
remotePathMappings : '#x-remotepath-mapping-region'
},
initialize : function(){
initialize : function() {
this.downloadClientsCollection = new DownloadClientCollection();
this.downloadClientsCollection.fetch();
this.remotePathMappingCollection = new RemotePathMappingCollection();
this.remotePathMappingCollection.fetch();
},
onShow : function(){
this.downloadClients.show(new DownloadClientCollectionView({collection : this.downloadClientsCollection}));
this.downloadHandling.show(new DownloadHandlingView({model : this.model}));
this.droneFactory.show(new DroneFactoryView({model : this.model}));
this.remotePathMappings.show(new RemotePathMappingCollectionView({collection : this.remotePathMappingCollection}));
onShow : function() {
this.downloadClients.show(new DownloadClientCollectionView({ collection : this.downloadClientsCollection }));
this.downloadHandling.show(new DownloadHandlingView({ model : this.model }));
this.droneFactory.show(new DroneFactoryView({ model : this.model }));
this.remotePathMappings.show(new RemotePathMappingCollectionView({ collection : this.remotePathMappingCollection }));
}
});
@@ -2,47 +2,49 @@ var Marionette = require('marionette');
var AsModelBoundView = require('../../../Mixins/AsModelBoundView');
var AsValidatedView = require('../../../Mixins/AsValidatedView');
module.exports = (function(){
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/DownloadHandling/DownloadHandlingViewTemplate',
ui : {
completedDownloadHandlingCheckbox : '.x-completed-download-handling',
completedDownloadOptions : '.x-completed-download-options',
failedAutoRedownladCheckbox : '.x-failed-auto-redownload',
failedDownloadOptions : '.x-failed-download-options'
},
events : {
"change .x-completed-download-handling" : '_setCompletedDownloadOptionsVisibility',
"change .x-failed-auto-redownload" : '_setFailedDownloadOptionsVisibility'
},
onRender : function(){
if(!this.ui.completedDownloadHandlingCheckbox.prop('checked')) {
this.ui.completedDownloadOptions.hide();
}
if(!this.ui.failedAutoRedownladCheckbox.prop('checked')) {
this.ui.failedDownloadOptions.hide();
}
},
_setCompletedDownloadOptionsVisibility : function(){
var checked = this.ui.completedDownloadHandlingCheckbox.prop('checked');
if(checked) {
this.ui.completedDownloadOptions.slideDown();
}
else {
this.ui.completedDownloadOptions.slideUp();
}
},
_setFailedDownloadOptionsVisibility : function(){
var checked = this.ui.failedAutoRedownladCheckbox.prop('checked');
if(checked) {
this.ui.failedDownloadOptions.slideDown();
}
else {
this.ui.failedDownloadOptions.slideUp();
}
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/DownloadHandling/DownloadHandlingViewTemplate',
ui : {
completedDownloadHandlingCheckbox : '.x-completed-download-handling',
completedDownloadOptions : '.x-completed-download-options',
failedAutoRedownladCheckbox : '.x-failed-auto-redownload',
failedDownloadOptions : '.x-failed-download-options'
},
events : {
'change .x-completed-download-handling' : '_setCompletedDownloadOptionsVisibility',
'change .x-failed-auto-redownload' : '_setFailedDownloadOptionsVisibility'
},
onRender : function() {
if (!this.ui.completedDownloadHandlingCheckbox.prop('checked')) {
this.ui.completedDownloadOptions.hide();
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
return view;
}).call(this);
if (!this.ui.failedAutoRedownladCheckbox.prop('checked')) {
this.ui.failedDownloadOptions.hide();
}
},
_setCompletedDownloadOptionsVisibility : function() {
var checked = this.ui.completedDownloadHandlingCheckbox.prop('checked');
if (checked) {
this.ui.completedDownloadOptions.slideDown();
} else {
this.ui.completedDownloadOptions.slideUp();
}
},
_setFailedDownloadOptionsVisibility : function() {
var checked = this.ui.failedAutoRedownladCheckbox.prop('checked');
if (checked) {
this.ui.failedDownloadOptions.slideDown();
} else {
this.ui.failedDownloadOptions.slideUp();
}
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
module.exports = view;
@@ -3,15 +3,19 @@ var AsModelBoundView = require('../../../Mixins/AsModelBoundView');
var AsValidatedView = require('../../../Mixins/AsValidatedView');
require('../../../Mixins/FileBrowser');
module.exports = (function(){
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/DroneFactory/DroneFactoryViewTemplate',
ui : {droneFactory : '.x-path'},
onShow : function(){
this.ui.droneFactory.fileBrowser();
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
return view;
}).call(this);
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/DroneFactory/DroneFactoryViewTemplate',
ui : {
droneFactory : '.x-path'
},
onShow : function() {
this.ui.droneFactory.fileBrowser();
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
module.exports = view;
@@ -1,4 +1,4 @@
var vent = require('vent');
var vent = require('vent');
var Marionette = require('marionette');
var DeleteView = require('../Delete/DownloadClientDeleteView');
var AsModelBoundView = require('../../../Mixins/AsModelBoundView');
@@ -8,40 +8,49 @@ require('../../../Form/FormBuilder');
require('../../../Mixins/FileBrowser');
require('bootstrap');
module.exports = (function(){
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/Edit/DownloadClientEditViewTemplate',
ui : {
path : '.x-path',
modalBody : '.modal-body'
},
events : {
'click .x-back' : '_back'
},
_deleteView : DeleteView,
initialize : function(options){
this.targetCollection = options.targetCollection;
},
onShow : function(){
if(this.ui.path.length > 0) {
this.ui.modalBody.addClass('modal-overflow');
}
this.ui.path.fileBrowser();
},
_onAfterSave : function(){
this.targetCollection.add(this.model, {merge : true});
vent.trigger(vent.Commands.CloseModalCommand);
},
_onAfterSaveAndAdd : function(){
this.targetCollection.add(this.model, {merge : true});
require('../Add/DownloadClientSchemaModal').open(this.targetCollection);
},
_back : function(){
require('../Add/DownloadClientSchemaModal').open(this.targetCollection);
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/Edit/DownloadClientEditViewTemplate',
ui : {
path : '.x-path',
modalBody : '.modal-body'
},
events : {
'click .x-back' : '_back'
},
_deleteView : DeleteView,
initialize : function(options) {
this.targetCollection = options.targetCollection;
},
onShow : function() {
if (this.ui.path.length > 0) {
this.ui.modalBody.addClass('modal-overflow');
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
}).call(this);
this.ui.path.fileBrowser();
},
_onAfterSave : function() {
this.targetCollection.add(this.model, { merge : true });
vent.trigger(vent.Commands.CloseModalCommand);
},
_onAfterSaveAndAdd : function() {
this.targetCollection.add(this.model, { merge : true });
require('../Add/DownloadClientSchemaModal').open(this.targetCollection);
},
_back : function() {
require('../Add/DownloadClientSchemaModal').open(this.targetCollection);
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
module.exports = view;
@@ -9,14 +9,20 @@ module.exports = Marionette.CompositeView.extend({
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingCollectionViewTemplate',
itemViewContainer : '.x-rows',
itemView : RemotePathMappingItemView,
events : {"click .x-add" : '_addMapping'},
_addMapping : function(){
events : {
'click .x-add' : '_addMapping'
},
_addMapping : function() {
var model = new RemotePathMappingModel();
model.collection = this.collection;
var view = new EditView({
model : model,
targetCollection : this.collection
});
AppLayout.modalRegion.show(view);
}
});
@@ -3,11 +3,15 @@ var Marionette = require('marionette');
module.exports = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingDeleteViewTemplate',
events : {"click .x-confirm-delete" : '_delete'},
_delete : function(){
events : {
'click .x-confirm-delete' : '_delete'
},
_delete : function() {
this.model.destroy({
wait : true,
success : function(){
success : function() {
vent.trigger(vent.Commands.CloseModalCommand);
}
});
@@ -10,30 +10,36 @@ var AsEditModalView = require('../../../Mixins/AsEditModalView');
require('../../../Mixins/FileBrowser');
require('bootstrap');
module.exports = (function(){
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingEditViewTemplate',
ui : {
path : '.x-path',
modalBody : '.modal-body'
},
_deleteView : DeleteView,
initialize : function(options){
this.targetCollection = options.targetCollection;
},
onShow : function(){
if(this.ui.path.length > 0) {
this.ui.modalBody.addClass('modal-overflow');
}
this.ui.path.fileBrowser();
},
_onAfterSave : function(){
this.targetCollection.add(this.model, {merge : true});
vent.trigger(vent.Commands.CloseModalCommand);
var view = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingEditViewTemplate',
ui : {
path : '.x-path',
modalBody : '.modal-body'
},
_deleteView : DeleteView,
initialize : function(options) {
this.targetCollection = options.targetCollection;
},
onShow : function() {
if (this.ui.path.length > 0) {
this.ui.modalBody.addClass('modal-overflow');
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
}).call(this);
this.ui.path.fileBrowser();
},
_onAfterSave : function() {
this.targetCollection.add(this.model, { merge : true });
vent.trigger(vent.Commands.CloseModalCommand);
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
module.exports = view;
@@ -3,17 +3,23 @@ var Marionette = require('marionette');
var EditView = require('./RemotePathMappingEditView');
module.exports = Marionette.ItemView.extend({
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingItemViewTemplate',
className : 'row',
events : {"click .x-edit" : '_editMapping'},
initialize : function(){
template : 'Settings/DownloadClient/RemotePathMapping/RemotePathMappingItemViewTemplate',
className : 'row',
events : {
'click .x-edit' : '_editMapping'
},
initialize : function() {
this.listenTo(this.model, 'sync', this.render);
},
_editMapping : function(){
_editMapping : function() {
var view = new EditView({
model : this.model,
targetCollection : this.model.collection
});
AppLayout.modalRegion.show(view);
}
});