From 1bf433872a66b8e05564252ea89db89a4691a0db Mon Sep 17 00:00:00 2001 From: Taloth Saldono Date: Fri, 13 Feb 2015 22:52:55 +0100 Subject: [PATCH] UI Cleanup - Updated Rename and SeasonPass subtrees. --- src/UI/Rename/RenamePreviewCollection.js | 21 ++-- src/UI/Rename/RenamePreviewCollectionView.js | 4 +- .../RenamePreviewEmptyCollectionView.js | 6 +- src/UI/Rename/RenamePreviewFormatView.js | 8 +- .../RenamePreviewFormatViewTemplate.hbs | 2 +- src/UI/Rename/RenamePreviewItemView.js | 67 +++++------ src/UI/Rename/RenamePreviewLayout.js | 78 ++++++++----- src/UI/Rename/RenamePreviewLayoutTemplate.hbs | 2 +- src/UI/SeasonPass/SeasonPassLayout.js | 80 +++++++------ src/UI/SeasonPass/SeriesCollectionView.js | 4 +- src/UI/SeasonPass/SeriesLayout.js | 106 ++++++++++++------ 11 files changed, 233 insertions(+), 145 deletions(-) diff --git a/src/UI/Rename/RenamePreviewCollection.js b/src/UI/Rename/RenamePreviewCollection.js index 959c944a6..79798b266 100644 --- a/src/UI/Rename/RenamePreviewCollection.js +++ b/src/UI/Rename/RenamePreviewCollection.js @@ -2,26 +2,33 @@ var Backbone = require('backbone'); var RenamePreviewModel = require('./RenamePreviewModel'); module.exports = Backbone.Collection.extend({ - url : window.NzbDrone.ApiRoot + '/rename', - model : RenamePreviewModel, + url : window.NzbDrone.ApiRoot + '/rename', + model : RenamePreviewModel, + originalFetch : Backbone.Collection.prototype.fetch, - initialize : function(options){ - if(!options.seriesId) { + + initialize : function(options) { + if (!options.seriesId) { throw 'seriesId is required'; } + this.seriesId = options.seriesId; this.seasonNumber = options.seasonNumber; }, - fetch : function(options){ - if(!this.seriesId) { + + fetch : function(options) { + if (!this.seriesId) { throw 'seriesId is required'; } + options = options || {}; options.data = {}; options.data.seriesId = this.seriesId; - if(this.seasonNumber) { + + if (this.seasonNumber) { options.data.seasonNumber = this.seasonNumber; } + return this.originalFetch.call(this, options); } }); \ No newline at end of file diff --git a/src/UI/Rename/RenamePreviewCollectionView.js b/src/UI/Rename/RenamePreviewCollectionView.js index fb1193ed1..7751b666d 100644 --- a/src/UI/Rename/RenamePreviewCollectionView.js +++ b/src/UI/Rename/RenamePreviewCollectionView.js @@ -1,4 +1,6 @@ var Marionette = require('marionette'); var RenamePreviewItemView = require('./RenamePreviewItemView'); -module.exports = Marionette.CollectionView.extend({itemView : RenamePreviewItemView}); \ No newline at end of file +module.exports = Marionette.CollectionView.extend({ + itemView : RenamePreviewItemView +}); \ No newline at end of file diff --git a/src/UI/Rename/RenamePreviewEmptyCollectionView.js b/src/UI/Rename/RenamePreviewEmptyCollectionView.js index 6200770dc..f7b7a5166 100644 --- a/src/UI/Rename/RenamePreviewEmptyCollectionView.js +++ b/src/UI/Rename/RenamePreviewEmptyCollectionView.js @@ -1,4 +1,6 @@ -var vent = require('vent'); +var vent = require('vent'); var Marionette = require('marionette'); -module.exports = Marionette.ItemView.extend({template : 'Rename/RenamePreviewEmptyCollectionViewTemplate'}); \ No newline at end of file +module.exports = Marionette.ItemView.extend({ + template : 'Rename/RenamePreviewEmptyCollectionViewTemplate' +}); \ No newline at end of file diff --git a/src/UI/Rename/RenamePreviewFormatView.js b/src/UI/Rename/RenamePreviewFormatView.js index dee5952fe..f34f955a1 100644 --- a/src/UI/Rename/RenamePreviewFormatView.js +++ b/src/UI/Rename/RenamePreviewFormatView.js @@ -3,15 +3,17 @@ var Marionette = require('marionette'); var NamingModel = require('../Settings/MediaManagement/Naming/NamingModel'); module.exports = Marionette.ItemView.extend({ - template : 'Rename/RenamePreviewFormatViewTemplate', - templateHelpers : function(){ + template : 'Rename/RenamePreviewFormatViewTemplate', + + templateHelpers : function() { var type = this.model.get('seriesType'); return { rename : this.naming.get('renameEpisodes'), format : this.naming.get(type + 'EpisodeFormat') }; }, - initialize : function(){ + + initialize : function() { this.naming = new NamingModel(); this.naming.fetch(); this.listenTo(this.naming, 'sync', this.render); diff --git a/src/UI/Rename/RenamePreviewFormatViewTemplate.hbs b/src/UI/Rename/RenamePreviewFormatViewTemplate.hbs index 5633810bf..77297f56b 100644 --- a/src/UI/Rename/RenamePreviewFormatViewTemplate.hbs +++ b/src/UI/Rename/RenamePreviewFormatViewTemplate.hbs @@ -1,3 +1,3 @@ -{{#if rename}} +{{#if rename}} Naming pattern: {{format}} {{/if}} diff --git a/src/UI/Rename/RenamePreviewItemView.js b/src/UI/Rename/RenamePreviewItemView.js index 9a31ca657..b40cf984d 100644 --- a/src/UI/Rename/RenamePreviewItemView.js +++ b/src/UI/Rename/RenamePreviewItemView.js @@ -1,36 +1,39 @@ -var vent = require('vent'); +var vent = require('vent'); var Marionette = require('marionette'); var AsModelBoundView = require('../Mixins/AsModelBoundView'); -module.exports = (function(){ - var view = Marionette.ItemView.extend({ - template : 'Rename/RenamePreviewItemViewTemplate', - ui : { - itemDiv : '.rename-preview-item', - checkboxIcon : '.rename-checkbox i' - }, - onRender : function(){ - this._setItemState(); - this.listenTo(this.model, 'change', this._setItemState); - this.listenTo(this.model, 'rename:select', this._onRenameAll); - }, - _setItemState : function(){ - var checked = this.model.get('rename'); - this.model.trigger('rename:select', this.model, checked); - if(checked) { - this.ui.itemDiv.removeClass('do-not-rename'); - this.ui.checkboxIcon.addClass('icon-check'); - this.ui.checkboxIcon.removeClass('icon-check-empty'); - } - else { - this.ui.itemDiv.addClass('do-not-rename'); - this.ui.checkboxIcon.addClass('icon-check-empty'); - this.ui.checkboxIcon.removeClass('icon-check'); - } - }, - _onRenameAll : function(model, checked){ - this.model.set('rename', checked); +var view = Marionette.ItemView.extend({ + template : 'Rename/RenamePreviewItemViewTemplate', + + ui : { + itemDiv : '.rename-preview-item', + checkboxIcon : '.rename-checkbox i' + }, + + onRender : function() { + this._setItemState(); + this.listenTo(this.model, 'change', this._setItemState); + this.listenTo(this.model, 'rename:select', this._onRenameAll); + }, + + _setItemState : function() { + var checked = this.model.get('rename'); + this.model.trigger('rename:select', this.model, checked); + + if (checked) { + this.ui.itemDiv.removeClass('do-not-rename'); + this.ui.checkboxIcon.addClass('icon-check'); + this.ui.checkboxIcon.removeClass('icon-check-empty'); + } else { + this.ui.itemDiv.addClass('do-not-rename'); + this.ui.checkboxIcon.addClass('icon-check-empty'); + this.ui.checkboxIcon.removeClass('icon-check'); } - }); - return AsModelBoundView.apply(view); -}).call(this); \ No newline at end of file + }, + + _onRenameAll : function(model, checked) { + this.model.set('rename', checked); + } +}); + +module.exports = AsModelBoundView.apply(view); \ No newline at end of file diff --git a/src/UI/Rename/RenamePreviewLayout.js b/src/UI/Rename/RenamePreviewLayout.js index 7c92af27d..b0d8fa4c8 100644 --- a/src/UI/Rename/RenamePreviewLayout.js +++ b/src/UI/Rename/RenamePreviewLayout.js @@ -9,66 +9,79 @@ var LoadingView = require('../Shared/LoadingView'); var CommandController = require('../Commands/CommandController'); module.exports = Marionette.Layout.extend({ - className : 'modal-lg', - template : 'Rename/RenamePreviewLayoutTemplate', - regions : { + className : 'modal-lg', + template : 'Rename/RenamePreviewLayoutTemplate', + + regions : { renamePreviews : '#rename-previews', formatRegion : '.x-format-region' }, - ui : { + + ui : { pathInfo : '.x-path-info', renameAll : '.x-rename-all', checkboxIcon : '.x-rename-all-button i' }, - events : { - "click .x-organize" : '_organizeFiles', - "change .x-rename-all" : '_toggleAll' + + events : { + 'click .x-organize' : '_organizeFiles', + 'change .x-rename-all' : '_toggleAll' }, - initialize : function(options){ + + initialize : function(options) { this.model = options.series; this.seasonNumber = options.seasonNumber; + var viewOptions = {}; viewOptions.seriesId = this.model.id; viewOptions.seasonNumber = this.seasonNumber; + this.collection = new RenamePreviewCollection(viewOptions); this.listenTo(this.collection, 'sync', this._showPreviews); this.listenTo(this.collection, 'rename:select', this._itemRenameChanged); + this.collection.fetch(); }, - onRender : function(){ + + onRender : function() { this.renamePreviews.show(new LoadingView()); - this.formatRegion.show(new RenamePreviewFormatView({model : this.model})); + this.formatRegion.show(new RenamePreviewFormatView({ model : this.model })); }, - _showPreviews : function(){ - if(this.collection.length === 0) { + + _showPreviews : function() { + if (this.collection.length === 0) { this.ui.pathInfo.hide(); this.renamePreviews.show(new EmptyCollectionView()); return; } + this.ui.pathInfo.show(); - this.collection.invoke('set', {rename : true}); - this.renamePreviews.show(new RenamePreviewCollectionView({collection : this.collection})); + this.collection.invoke('set', { rename : true }); + this.renamePreviews.show(new RenamePreviewCollectionView({ collection : this.collection })); }, - _organizeFiles : function(){ - if(this.collection.length === 0) { + + _organizeFiles : function() { + if (this.collection.length === 0) { vent.trigger(vent.Commands.CloseModalCommand); } - var files = _.map(this.collection.where({rename : true}), function(model){ + + var files = _.map(this.collection.where({ rename : true }), function(model) { return model.get('episodeFileId'); }); - if(files.length === 0) { + + if (files.length === 0) { vent.trigger(vent.Commands.CloseModalCommand); return; } - if(this.seasonNumber) { + + if (this.seasonNumber) { CommandController.Execute('renameFiles', { name : 'renameFiles', seriesId : this.model.id, seasonNumber : this.seasonNumber, files : files }); - } - else { + } else { CommandController.Execute('renameFiles', { name : 'renameFiles', seriesId : this.model.id, @@ -76,30 +89,35 @@ module.exports = Marionette.Layout.extend({ files : files }); } + vent.trigger(vent.Commands.CloseModalCommand); }, - _setCheckedState : function(checked){ - if(checked) { + + _setCheckedState : function(checked) { + if (checked) { this.ui.checkboxIcon.addClass('icon-check'); this.ui.checkboxIcon.removeClass('icon-check-empty'); - } - else { + } else { this.ui.checkboxIcon.addClass('icon-check-empty'); this.ui.checkboxIcon.removeClass('icon-check'); } }, - _toggleAll : function(){ + + _toggleAll : function() { var checked = this.ui.renameAll.prop('checked'); this._setCheckedState(checked); - this.collection.each(function(model){ + + this.collection.each(function(model) { model.trigger('rename:select', model, checked); }); }, - _itemRenameChanged : function(model, checked){ - var allChecked = this.collection.all(function(m){ + + _itemRenameChanged : function(model, checked) { + var allChecked = this.collection.all(function(m) { return m.get('rename'); }); - if(!checked || allChecked) { + + if (!checked || allChecked) { this._setCheckedState(checked); } } diff --git a/src/UI/Rename/RenamePreviewLayoutTemplate.hbs b/src/UI/Rename/RenamePreviewLayoutTemplate.hbs index bb9916bb4..a9249bc88 100644 --- a/src/UI/Rename/RenamePreviewLayoutTemplate.hbs +++ b/src/UI/Rename/RenamePreviewLayoutTemplate.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/src/UI/SeasonPass/SeasonPassLayout.js b/src/UI/SeasonPass/SeasonPassLayout.js index ff461d113..d9d9e2769 100644 --- a/src/UI/SeasonPass/SeasonPassLayout.js +++ b/src/UI/SeasonPass/SeasonPassLayout.js @@ -7,59 +7,75 @@ var ToolbarLayout = require('../Shared/Toolbar/ToolbarLayout'); require('../Mixins/backbone.signalr.mixin'); module.exports = Marionette.Layout.extend({ - template : 'SeasonPass/SeasonPassLayoutTemplate', - regions : { + template : 'SeasonPass/SeasonPassLayoutTemplate', + + regions : { toolbar : '#x-toolbar', series : '#x-series' }, - initialize : function(){ + + initialize : function() { this.seriesCollection = SeriesCollection.clone(); this.seriesCollection.shadowCollection.bindSignalR(); + this.listenTo(this.seriesCollection, 'sync', this.render); + this.filteringOptions = { type : 'radio', storeState : true, menuKey : 'seasonpass.filterMode', defaultAction : 'all', - items : [{ - key : 'all', - title : '', - tooltip : 'All', - icon : 'icon-circle-blank', - callback : this._setFilter - }, { - key : 'monitored', - title : '', - tooltip : 'Monitored Only', - icon : 'icon-nd-monitored', - callback : this._setFilter - }, { - key : 'continuing', - title : '', - tooltip : 'Continuing Only', - icon : 'icon-play', - callback : this._setFilter - }, { - key : 'ended', - title : '', - tooltip : 'Ended Only', - icon : 'icon-stop', - callback : this._setFilter - }] + items : [ + { + key : 'all', + title : '', + tooltip : 'All', + icon : 'icon-circle-blank', + callback : this._setFilter + }, + { + key : 'monitored', + title : '', + tooltip : 'Monitored Only', + icon : 'icon-nd-monitored', + callback : this._setFilter + }, + { + key : 'continuing', + title : '', + tooltip : 'Continuing Only', + icon : 'icon-play', + callback : this._setFilter + }, + { + key : 'ended', + title : '', + tooltip : 'Ended Only', + icon : 'icon-stop', + callback : this._setFilter + } + ] }; }, - onRender : function(){ - this.series.show(new SeriesCollectionView({collection : this.seriesCollection})); + + onRender : function() { + this.series.show(new SeriesCollectionView({ + collection : this.seriesCollection + })); + this._showToolbar(); }, - _showToolbar : function(){ + + _showToolbar : function() { this.toolbar.show(new ToolbarLayout({ right : [this.filteringOptions], context : this })); }, - _setFilter : function(buttonContext){ + + _setFilter : function(buttonContext) { var mode = buttonContext.model.get('key'); + this.seriesCollection.setFilterMode(mode); } }); \ No newline at end of file diff --git a/src/UI/SeasonPass/SeriesCollectionView.js b/src/UI/SeasonPass/SeriesCollectionView.js index 1d42ffe83..0b1c9a69d 100644 --- a/src/UI/SeasonPass/SeriesCollectionView.js +++ b/src/UI/SeasonPass/SeriesCollectionView.js @@ -1,4 +1,6 @@ var Marionette = require('marionette'); var SeriesLayout = require('./SeriesLayout'); -module.exports = Marionette.CollectionView.extend({itemView : SeriesLayout}); \ No newline at end of file +module.exports = Marionette.CollectionView.extend({ + itemView : SeriesLayout +}); \ No newline at end of file diff --git a/src/UI/SeasonPass/SeriesLayout.js b/src/UI/SeasonPass/SeriesLayout.js index d1ed469f3..39cc3e0b9 100644 --- a/src/UI/SeasonPass/SeriesLayout.js +++ b/src/UI/SeasonPass/SeriesLayout.js @@ -4,113 +4,149 @@ var Backgrid = require('backgrid'); var SeasonCollection = require('../Series/SeasonCollection'); module.exports = Marionette.Layout.extend({ - template : 'SeasonPass/SeriesLayoutTemplate', - ui : { + template : 'SeasonPass/SeriesLayoutTemplate', + + ui : { seasonSelect : '.x-season-select', expander : '.x-expander', seasonGrid : '.x-season-grid', seriesMonitored : '.x-series-monitored' }, - events : { - "change .x-season-select" : '_seasonSelected', - "click .x-expander" : '_expand', - "click .x-latest" : '_latest', - "click .x-all" : '_all', - "click .x-monitored" : '_toggleSeasonMonitored', - "click .x-series-monitored" : '_toggleSeriesMonitored' + + events : { + 'change .x-season-select' : '_seasonSelected', + 'click .x-expander' : '_expand', + 'click .x-latest' : '_latest', + 'click .x-all' : '_all', + 'click .x-monitored' : '_toggleSeasonMonitored', + 'click .x-series-monitored' : '_toggleSeriesMonitored' }, - regions : {seasonGrid : '.x-season-grid'}, - initialize : function(){ + + regions : { + seasonGrid : '.x-season-grid' + }, + + initialize : function() { this.listenTo(this.model, 'sync', this._setSeriesMonitoredState); this.seasonCollection = new SeasonCollection(this.model.get('seasons')); this.expanded = false; }, - onRender : function(){ - if(!this.expanded) { + + onRender : function() { + if (!this.expanded) { this.ui.seasonGrid.hide(); } + this._setExpanderIcon(); this._setSeriesMonitoredState(); }, - _seasonSelected : function(){ + + _seasonSelected : function() { var seasonNumber = parseInt(this.ui.seasonSelect.val(), 10); - if(seasonNumber === -1 || isNaN(seasonNumber)) { + + if (seasonNumber === -1 || isNaN(seasonNumber)) { return; } + this._setSeasonMonitored(seasonNumber); }, - _expand : function(){ - if(this.expanded) { + + _expand : function() { + if (this.expanded) { this.ui.seasonGrid.slideUp(); this.expanded = false; } + else { this.ui.seasonGrid.slideDown(); this.expanded = true; } + this._setExpanderIcon(); }, - _setExpanderIcon : function(){ - if(this.expanded) { + + _setExpanderIcon : function() { + if (this.expanded) { this.ui.expander.removeClass('icon-chevron-right'); this.ui.expander.addClass('icon-chevron-down'); } + else { this.ui.expander.removeClass('icon-chevron-down'); this.ui.expander.addClass('icon-chevron-right'); } }, - _latest : function(){ - var season = _.max(this.model.get('seasons'), function(s){ + + _latest : function() { + var season = _.max(this.model.get('seasons'), function(s) { return s.seasonNumber; }); + this._setSeasonMonitored(season.seasonNumber); }, - _all : function(){ - var minSeasonNotZero = _.min(_.reject(this.model.get('seasons'), {seasonNumber : 0}), 'seasonNumber'); + + _all : function() { + var minSeasonNotZero = _.min(_.reject(this.model.get('seasons'), { seasonNumber : 0 }), 'seasonNumber'); + this._setSeasonMonitored(minSeasonNotZero.seasonNumber); }, - _setSeasonMonitored : function(seasonNumber){ + + _setSeasonMonitored : function(seasonNumber) { var self = this; + this.model.setSeasonPass(seasonNumber); + var promise = this.model.save(); - promise.done(function(data){ + + promise.done(function(data) { self.seasonCollection = new SeasonCollection(data); self.render(); }); }, - _toggleSeasonMonitored : function(e){ + + _toggleSeasonMonitored : function(e) { var seasonNumber = 0; var element; - if(e.target.localName === 'i') { + + if (e.target.localName === 'i') { seasonNumber = parseInt(this.$(e.target).parent('td').attr('data-season-number'), 10); element = this.$(e.target); } + else { seasonNumber = parseInt(this.$(e.target).attr('data-season-number'), 10); element = this.$(e.target).children('i'); } + this.model.setSeasonMonitored(seasonNumber); + var savePromise = this.model.save().always(this.render.bind(this)); element.spinForPromise(savePromise); }, - _afterToggleSeasonMonitored : function(){ + + _afterToggleSeasonMonitored : function() { this.render(); }, - _setSeriesMonitoredState : function(){ + + _setSeriesMonitoredState : function() { var monitored = this.model.get('monitored'); + this.ui.seriesMonitored.removeAttr('data-idle-icon'); - if(monitored) { + + if (monitored) { this.ui.seriesMonitored.addClass('icon-nd-monitored'); this.ui.seriesMonitored.removeClass('icon-nd-unmonitored'); - } - else { + } else { this.ui.seriesMonitored.addClass('icon-nd-unmonitored'); this.ui.seriesMonitored.removeClass('icon-nd-monitored'); } }, - _toggleSeriesMonitored : function(){ - var savePromise = this.model.save('monitored', !this.model.get('monitored'), {wait : true}); + + _toggleSeriesMonitored : function() { + var savePromise = this.model.save('monitored', !this.model.get('monitored'), { + wait : true + }); + this.ui.seriesMonitored.spinForPromise(savePromise); } -}); \ No newline at end of file +});