1
0
mirror of https://github.com/Radarr/Radarr.git synced 2024-11-05 10:32:35 +01:00

UI Cleanup - Updated AddSeries subtree.

This commit is contained in:
Taloth Saldono 2015-02-13 22:04:05 +01:00
parent b556eda4a0
commit f5118fc430
15 changed files with 311 additions and 186 deletions

View File

@ -5,14 +5,18 @@ var _ = require('underscore');
module.exports = Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/series/lookup',
model : SeriesModel,
parse : function(response){
parse : function(response) {
var self = this;
_.each(response, function(model){
_.each(response, function(model) {
model.id = undefined;
if(self.unmappedFolderModel) {
if (self.unmappedFolderModel) {
model.path = self.unmappedFolderModel.get('folder').path;
}
});
return response;
}
});

View File

@ -9,32 +9,45 @@ var RootFolderCollection = require('./RootFolders/RootFolderCollection');
require('../Series/SeriesCollection');
module.exports = Marionette.Layout.extend({
template : 'AddSeries/AddSeriesLayoutTemplate',
regions : {workspace : '#add-series-workspace'},
events : {
template : 'AddSeries/AddSeriesLayoutTemplate',
regions : {
workspace : '#add-series-workspace'
},
events : {
'click .x-import' : '_importSeries',
'click .x-add-new' : '_addSeries'
},
attributes : {id : 'add-series-screen'},
initialize : function(){
attributes : {
id : 'add-series-screen'
},
initialize : function() {
ProfileCollection.fetch();
RootFolderCollection.fetch().done(function(){
RootFolderCollection.fetch().done(function() {
RootFolderCollection.synced = true;
});
},
onShow : function(){
onShow : function() {
this.workspace.show(new AddSeriesView());
},
_folderSelected : function(options){
_folderSelected : function(options) {
vent.trigger(vent.Commands.CloseModalCommand);
this.workspace.show(new ExistingSeriesCollectionView({model : options.model}));
this.workspace.show(new ExistingSeriesCollectionView({ model : options.model }));
},
_importSeries : function(){
_importSeries : function() {
this.rootFolderLayout = new RootFolderLayout();
this.listenTo(this.rootFolderLayout, 'folderSelected', this._folderSelected);
AppLayout.modalRegion.show(this.rootFolderLayout);
},
_addSeries : function(){
_addSeries : function() {
this.workspace.show(new AddSeriesView());
}
});

View File

@ -9,71 +9,121 @@ var ErrorView = require('./ErrorView');
var LoadingView = require('../Shared/LoadingView');
module.exports = Marionette.Layout.extend({
template : 'AddSeries/AddSeriesViewTemplate',
regions : {searchResult : '#search-result'},
ui : {
template : 'AddSeries/AddSeriesViewTemplate',
regions : {
searchResult : '#search-result'
},
ui : {
seriesSearch : '.x-series-search',
searchBar : '.x-search-bar',
loadMore : '.x-load-more'
},
events : {"click .x-load-more" : '_onLoadMore'},
initialize : function(options){
events : {
'click .x-load-more' : '_onLoadMore'
},
initialize : function(options) {
this.isExisting = options.isExisting;
this.collection = new AddSeriesCollection();
if(this.isExisting) {
if (this.isExisting) {
this.collection.unmappedFolderModel = this.model;
}
if(this.isExisting) {
if (this.isExisting) {
this.className = 'existing-series';
}
else {
} else {
this.className = 'new-series';
}
this.listenTo(vent, vent.Events.SeriesAdded, this._onSeriesAdded);
this.listenTo(this.collection, 'sync', this._showResults);
this.resultCollectionView = new SearchResultCollectionView({
collection : this.collection,
isExisting : this.isExisting
});
this.throttledSearch = _.debounce(this.search, 1000, {trailing : true}).bind(this);
this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this);
},
onRender : function(){
onRender : function() {
var self = this;
this.$el.addClass(this.className);
this.ui.seriesSearch.keyup(function(e){
if(_.contains([9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93], e.keyCode)) {
this.ui.seriesSearch.keyup(function(e) {
if (_.contains([
9,
16,
17,
18,
19,
20,
33,
34,
35,
36,
37,
38,
39,
40,
91,
92,
93
], e.keyCode)) {
return;
}
self._abortExistingSearch();
self.throttledSearch({term : self.ui.seriesSearch.val()});
self.throttledSearch({
term : self.ui.seriesSearch.val()
});
});
this._clearResults();
if(this.isExisting) {
if (this.isExisting) {
this.ui.searchBar.hide();
}
},
onShow : function(){
onShow : function() {
this.ui.seriesSearch.focus();
},
search : function(options){
search : function(options) {
var self = this;
this.collection.reset();
if(!options.term || options.term === this.collection.term) {
if (!options.term || options.term === this.collection.term) {
return Marionette.$.Deferred().resolve();
}
this.searchResult.show(new LoadingView());
this.collection.term = options.term;
this.currentSearchPromise = this.collection.fetch({data : {term : options.term}});
this.currentSearchPromise.fail(function(){
this.currentSearchPromise = this.collection.fetch({
data : { term : options.term }
});
this.currentSearchPromise.fail(function() {
self._showError();
});
return this.currentSearchPromise;
},
_onSeriesAdded : function(options){
if(this.isExisting && options.series.get('path') === this.model.get('folder').path) {
_onSeriesAdded : function(options) {
if (this.isExisting && options.series.get('path') === this.model.get('folder').path) {
this.close();
}
else if(!this.isExisting) {
else if (!this.isExisting) {
this.collection.term = '';
this.collection.reset();
this._clearResults();
@ -81,48 +131,51 @@ module.exports = Marionette.Layout.extend({
this.ui.seriesSearch.focus();
}
},
_onLoadMore : function(){
_onLoadMore : function() {
var showingAll = this.resultCollectionView.showMore();
this.ui.searchBar.show();
if(showingAll) {
if (showingAll) {
this.ui.loadMore.hide();
}
},
_clearResults : function(){
if(!this.isExisting) {
_clearResults : function() {
if (!this.isExisting) {
this.searchResult.show(new EmptyView());
}
else {
} else {
this.searchResult.close();
}
},
_showResults : function(){
if(!this.isClosed) {
if(this.collection.length === 0) {
_showResults : function() {
if (!this.isClosed) {
if (this.collection.length === 0) {
this.ui.searchBar.show();
this.searchResult.show(new NotFoundView({term : this.collection.term}));
}
else {
this.searchResult.show(new NotFoundView({ term : this.collection.term }));
} else {
this.searchResult.show(this.resultCollectionView);
if(!this.showingAll && this.isExisting) {
if (!this.showingAll && this.isExisting) {
this.ui.loadMore.show();
}
}
}
},
_abortExistingSearch : function(){
if(this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
_abortExistingSearch : function() {
if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
console.log('aborting previous pending search request.');
this.currentSearchPromise.abort();
}
else {
} else {
this._clearResults();
}
},
_showError : function(){
if(!this.isClosed) {
_showError : function() {
if (!this.isClosed) {
this.ui.searchBar.show();
this.searchResult.show(new ErrorView({term : this.collection.term}));
this.searchResult.show(new ErrorView({ term : this.collection.term }));
this.collection.term = '';
}
}

View File

@ -1,3 +1,5 @@
var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({template : 'AddSeries/EmptyViewTemplate'});
module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/EmptyViewTemplate'
});

View File

@ -1,11 +1,13 @@
var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/ErrorViewTemplate',
initialize : function(options){
template : 'AddSeries/ErrorViewTemplate',
initialize : function(options) {
this.options = options;
},
templateHelpers : function(){
templateHelpers : function() {
return this.options;
}
});

View File

@ -6,33 +6,46 @@ module.exports = Marionette.CompositeView.extend({
itemView : AddSeriesView,
itemViewContainer : '.x-loading-folders',
template : 'AddSeries/Existing/AddExistingSeriesCollectionViewTemplate',
ui : {loadingFolders : '.x-loading-folders'},
initialize : function(){
ui : {
loadingFolders : '.x-loading-folders'
},
initialize : function() {
this.collection = new UnmappedFolderCollection();
this.collection.importItems(this.model);
},
showCollection : function(){
showCollection : function() {
this._showAndSearch(0);
},
appendHtml : function(collectionView, itemView, index){
appendHtml : function(collectionView, itemView, index) {
collectionView.ui.loadingFolders.before(itemView.el);
},
_showAndSearch : function(index){
_showAndSearch : function(index) {
var self = this;
var model = this.collection.at(index);
if(model) {
if (model) {
var currentIndex = index;
var folderName = model.get('folder').name;
this.addItemView(model, this.getItemView(), index);
this.children.findByModel(model).search({term : folderName}).always(function(){
if(!self.isClosed) {
this.children.findByModel(model).search({ term : folderName }).always(function() {
if (!self.isClosed) {
self._showAndSearch(currentIndex + 1);
}
});
}
else {
this.ui.loadingFolders.hide();
}
},
itemViewOptions : {isExisting : true}
itemViewOptions : {
isExisting : true
}
});

View File

@ -3,11 +3,14 @@ var UnmappedFolderModel = require('./UnmappedFolderModel');
var _ = require('underscore');
module.exports = Backbone.Collection.extend({
model : UnmappedFolderModel,
importItems : function(rootFolderModel){
model : UnmappedFolderModel,
importItems : function(rootFolderModel) {
this.reset();
var rootFolder = rootFolderModel;
_.each(rootFolderModel.get('unmappedFolders'), function(folder){
_.each(rootFolderModel.get('unmappedFolders'), function(folder) {
this.push(new UnmappedFolderModel({
rootFolder : rootFolder,
folder : folder

View File

@ -1,4 +1,4 @@
<dl class="monitor-tooltip-contents">
<dl class="monitor-tooltip-contents">
<dt>All</dt>
<dd>Monitor all episodes except specials</dd>
<dt>Future</dt>

View File

@ -1,11 +1,13 @@
var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/NotFoundViewTemplate',
initialize : function(options){
template : 'AddSeries/NotFoundViewTemplate',
initialize : function(options) {
this.options = options;
},
templateHelpers : function(){
templateHelpers : function() {
return this.options;
}
});

View File

@ -2,10 +2,9 @@ var Backbone = require('backbone');
var RootFolderModel = require('./RootFolderModel');
require('../../Mixins/backbone.signalr.mixin');
module.exports = (function(){
var RootFolderCollection = Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/rootfolder',
model : RootFolderModel
});
return new RootFolderCollection();
}).call(this);
var RootFolderCollection = Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/rootfolder',
model : RootFolderModel
});
module.exports = new RootFolderCollection();

View File

@ -1,22 +1,27 @@
var Marionette = require('marionette');
module.exports = Marionette.ItemView.extend({
template : 'AddSeries/RootFolders/RootFolderItemViewTemplate',
tagName : 'tr',
initialize : function(){
template : 'AddSeries/RootFolders/RootFolderItemViewTemplate',
tagName : 'tr',
initialize : function() {
this.listenTo(this.model, 'change', this.render);
},
events : {
events : {
'click .x-delete' : 'removeFolder',
'click .x-folder' : 'folderSelected'
},
removeFolder : function(){
removeFolder : function() {
var self = this;
this.model.destroy().success(function(){
this.model.destroy().success(function() {
self.close();
});
},
folderSelected : function(){
folderSelected : function() {
this.trigger('folderSelected', this.model);
}
});

View File

@ -6,49 +6,72 @@ var LoadingView = require('../../Shared/LoadingView');
var AsValidatedView = require('../../Mixins/AsValidatedView');
require('../../Mixins/FileBrowser');
module.exports = (function(){
var layout = Marionette.Layout.extend({
template : 'AddSeries/RootFolders/RootFolderLayoutTemplate',
ui : {pathInput : '.x-path'},
regions : {currentDirs : '#current-dirs'},
events : {
'click .x-add' : '_addFolder',
'keydown .x-path input' : '_keydown'
},
initialize : function(){
this.collection = RootFolderCollection;
this.rootfolderListView = new RootFolderCollectionView({collection : RootFolderCollection});
this.listenTo(this.rootfolderListView, 'itemview:folderSelected', this._onFolderSelected);
this.listenTo(RootFolderCollection, 'sync', this._showCurrentDirs);
},
onRender : function(){
this.currentDirs.show(new LoadingView());
if(RootFolderCollection.synced) {
this._showCurrentDirs();
}
this.ui.pathInput.fileBrowser();
},
_onFolderSelected : function(options){
this.trigger('folderSelected', options);
},
_addFolder : function(){
var self = this;
var newDir = new RootFolderModel({Path : this.ui.pathInput.val()});
this.bindToModelValidation(newDir);
newDir.save().done(function(){
RootFolderCollection.add(newDir);
self.trigger('folderSelected', {model : newDir});
});
},
_showCurrentDirs : function(){
this.currentDirs.show(this.rootfolderListView);
},
_keydown : function(e){
if(e.keyCode !== 13) {
return;
}
this._addFolder();
var Layout = Marionette.Layout.extend({
template : 'AddSeries/RootFolders/RootFolderLayoutTemplate',
ui : {
pathInput : '.x-path'
},
regions : {
currentDirs : '#current-dirs'
},
events : {
'click .x-add' : '_addFolder',
'keydown .x-path input' : '_keydown'
},
initialize : function() {
this.collection = RootFolderCollection;
this.rootfolderListView = new RootFolderCollectionView({ collection : RootFolderCollection });
this.listenTo(this.rootfolderListView, 'itemview:folderSelected', this._onFolderSelected);
this.listenTo(RootFolderCollection, 'sync', this._showCurrentDirs);
},
onRender : function() {
this.currentDirs.show(new LoadingView());
if (RootFolderCollection.synced) {
this._showCurrentDirs();
}
});
return AsValidatedView.apply(layout);
}).call(this);
this.ui.pathInput.fileBrowser();
},
_onFolderSelected : function(options) {
this.trigger('folderSelected', options);
},
_addFolder : function() {
var self = this;
var newDir = new RootFolderModel({
Path : this.ui.pathInput.val()
});
this.bindToModelValidation(newDir);
newDir.save().done(function() {
RootFolderCollection.add(newDir);
self.trigger('folderSelected', { model : newDir });
});
},
_showCurrentDirs : function() {
this.currentDirs.show(this.rootfolderListView);
},
_keydown : function(e) {
if (e.keyCode !== 13) {
return;
}
this._addFolder();
}
});
var Layout = AsValidatedView.apply(Layout);
module.exports = Layout;

View File

@ -2,5 +2,7 @@ var Backbone = require('backbone');
module.exports = Backbone.Model.extend({
urlRoot : window.NzbDrone.ApiRoot + '/rootfolder',
defaults : {freeSpace : 0}
defaults : {
freeSpace : 0
}
});

View File

@ -2,22 +2,27 @@ var Marionette = require('marionette');
var SearchResultView = require('./SearchResultView');
module.exports = Marionette.CollectionView.extend({
itemView : SearchResultView,
initialize : function(options){
itemView : SearchResultView,
initialize : function(options) {
this.isExisting = options.isExisting;
this.showing = 1;
},
showAll : function(){
showAll : function() {
this.showingAll = true;
this.render();
},
showMore : function(){
showMore : function() {
this.showing += 5;
this.render();
return this.showing >= this.collection.length;
},
appendHtml : function(collectionView, itemView, index){
if(!this.isExisting || index < this.showing || index === 0) {
appendHtml : function(collectionView, itemView, index) {
if (!this.isExisting || index < this.showing || index === 0) {
collectionView.$el.append(itemView.el);
}
}

View File

@ -15,9 +15,9 @@ require('jquery.dotdotdot');
var view = Marionette.ItemView.extend({
template: 'AddSeries/SearchResultViewTemplate',
template : 'AddSeries/SearchResultViewTemplate',
ui: {
ui : {
profile : '.x-profile',
rootFolder : '.x-root-folder',
seasonFolder : '.x-season-folder',
@ -29,7 +29,7 @@ var view = Marionette.ItemView.extend({
overview : '.x-overview'
},
events: {
events : {
'click .x-add' : '_addWithoutSearch',
'click .x-add-search' : '_addAndSearch',
'change .x-profile' : '_profileChanged',
@ -39,7 +39,7 @@ var view = Marionette.ItemView.extend({
'change .x-monitor' : '_monitorChanged'
},
initialize: function () {
initialize : function() {
if (!this.model) {
throw 'model is required';
@ -53,7 +53,7 @@ var view = Marionette.ItemView.extend({
this.listenTo(RootFolders, 'all', this._rootFoldersUpdated);
},
onRender: function () {
onRender : function() {
var defaultProfile = Config.getValue(Config.Keys.DefaultProfileId);
var defaultRoot = Config.getValue(Config.Keys.DefaultRootFolderId);
@ -76,24 +76,24 @@ var view = Marionette.ItemView.extend({
//TODO: make this work via onRender, FM?
//works with onShow, but stops working after the first render
this.ui.overview.dotdotdot({
height: 120
height : 120
});
this.templateFunction = Marionette.TemplateCache.get('AddSeries/MonitoringTooltipTemplate');
var content = this.templateFunction();
this.ui.monitorTooltip.popover({
content : content,
html : true,
trigger : 'hover',
title : 'Episode Monitoring Options',
placement: 'right',
container: this.$el
content : content,
html : true,
trigger : 'hover',
title : 'Episode Monitoring Options',
placement : 'right',
container : this.$el
});
},
_configureTemplateHelpers: function () {
var existingSeries = SeriesCollection.where({tvdbId: this.model.get('tvdbId')});
_configureTemplateHelpers : function() {
var existingSeries = SeriesCollection.where({ tvdbId : this.model.get('tvdbId') });
if (existingSeries.length > 0) {
this.templateHelpers.existing = existingSeries[0].toJSON();
@ -106,7 +106,7 @@ var view = Marionette.ItemView.extend({
}
},
_onConfigUpdated: function (options) {
_onConfigUpdated : function(options) {
if (options.key === Config.Keys.DefaultProfileId) {
this.ui.profile.val(options.value);
}
@ -128,49 +128,48 @@ var view = Marionette.ItemView.extend({
}
},
_profileChanged: function () {
_profileChanged : function() {
Config.setValue(Config.Keys.DefaultProfileId, this.ui.profile.val());
},
_seasonFolderChanged: function () {
_seasonFolderChanged : function() {
Config.setValue(Config.Keys.UseSeasonFolder, this.ui.seasonFolder.prop('checked'));
},
_rootFolderChanged: function () {
_rootFolderChanged : function() {
var rootFolderValue = this.ui.rootFolder.val();
if (rootFolderValue === 'addNew') {
var rootFolderLayout = new RootFolderLayout();
this.listenToOnce(rootFolderLayout, 'folderSelected', this._setRootFolder);
AppLayout.modalRegion.show(rootFolderLayout);
}
else {
} else {
Config.setValue(Config.Keys.DefaultRootFolderId, rootFolderValue);
}
},
_seriesTypeChanged: function () {
_seriesTypeChanged : function() {
Config.setValue(Config.Keys.DefaultSeriesType, this.ui.seriesType.val());
},
_monitorChanged: function () {
_monitorChanged : function() {
Config.setValue(Config.Keys.MonitorEpisodes, this.ui.monitor.val());
},
_setRootFolder: function (options) {
_setRootFolder : function(options) {
vent.trigger(vent.Commands.CloseModalCommand);
this.ui.rootFolder.val(options.model.id);
this._rootFolderChanged();
},
_addWithoutSearch: function () {
_addWithoutSearch : function() {
this._addSeries(false);
},
_addAndSearch: function() {
_addAndSearch : function() {
this._addSeries(true);
},
_addSeries: function (searchForMissingEpisodes) {
_addSeries : function(searchForMissingEpisodes) {
var addButton = this.ui.addButton;
var addSearchButton = this.ui.addSearchButton;
@ -191,7 +190,7 @@ var view = Marionette.ItemView.extend({
seasonFolder : seasonFolder,
seriesType : seriesType,
addOptions : options
}, { silent: true });
}, { silent : true });
var self = this;
var promise = this.model.save();
@ -204,49 +203,49 @@ var view = Marionette.ItemView.extend({
this.ui.addButton.spinForPromise(promise);
}
promise.always(function () {
promise.always(function() {
addButton.removeClass('disabled');
addSearchButton.removeClass('disabled');
});
promise.done(function () {
promise.done(function() {
SeriesCollection.add(self.model);
self.close();
Messenger.show({
message: 'Added: ' + self.model.get('title'),
actions : {
goToSeries: {
label: 'Go to Series',
action: function() {
Backbone.history.navigate('/series/' + self.model.get('titleSlug'), { trigger: true });
message : 'Added: ' + self.model.get('title'),
actions : {
goToSeries : {
label : 'Go to Series',
action : function() {
Backbone.history.navigate('/series/' + self.model.get('titleSlug'), { trigger : true });
}
}
},
hideAfter: 8,
hideOnNavigate: true
hideAfter : 8,
hideOnNavigate : true
});
vent.trigger(vent.Events.SeriesAdded, { series: self.model });
vent.trigger(vent.Events.SeriesAdded, { series : self.model });
});
},
_rootFoldersUpdated: function () {
_rootFoldersUpdated : function() {
this._configureTemplateHelpers();
this.render();
},
_getAddSeriesOptions: function () {
_getAddSeriesOptions : function() {
var monitor = this.ui.monitor.val();
var lastSeason = _.max(this.model.get('seasons'), 'seasonNumber');
var firstSeason = _.min(_.reject(this.model.get('seasons'), { seasonNumber: 0 }), 'seasonNumber');
var firstSeason = _.min(_.reject(this.model.get('seasons'), { seasonNumber : 0 }), 'seasonNumber');
this.model.setSeasonPass(firstSeason.seasonNumber);
var options = {
ignoreEpisodesWithFiles: false,
ignoreEpisodesWithoutFiles: false
ignoreEpisodesWithFiles : false,
ignoreEpisodesWithoutFiles : false
};
if (monitor === 'all') {