UI Cleanup - Updated Navbar, Profile, Quality and Release subtrees.

pull/4/head
Taloth Saldono 9 years ago
parent 29d9e3dadf
commit 860f55996c

@ -5,38 +5,55 @@ var QueueView = require('../Activity/Queue/QueueView');
require('./Search'); require('./Search');
module.exports = Marionette.Layout.extend({ module.exports = Marionette.Layout.extend({
template : 'Navbar/NavbarLayoutTemplate', template : 'Navbar/NavbarLayoutTemplate',
regions : {
regions : {
health : '#x-health', health : '#x-health',
queue : '#x-queue-count' queue : '#x-queue-count'
}, },
ui : {
ui : {
search : '.x-series-search', search : '.x-series-search',
collapse : '.x-navbar-collapse' collapse : '.x-navbar-collapse'
}, },
events : {"click a" : 'onClick'},
onRender : function(){ events : {
'click a' : 'onClick'
},
onRender : function() {
this.ui.search.bindSearch(); this.ui.search.bindSearch();
this.health.show(new HealthView()); this.health.show(new HealthView());
this.queue.show(new QueueView()); this.queue.show(new QueueView());
}, },
onClick : function(event){
onClick : function(event) {
event.preventDefault(); event.preventDefault();
var target = $(event.target); var target = $(event.target);
//look down for <a/>
var href = event.target.getAttribute('href'); var href = event.target.getAttribute('href');
if(!href && target.closest('a') && target.closest('a')[0]) {
//if couldn't find it look up'
if (!href && target.closest('a') && target.closest('a')[0]) {
var linkElement = target.closest('a')[0]; var linkElement = target.closest('a')[0];
href = linkElement.getAttribute('href'); href = linkElement.getAttribute('href');
this.setActive(linkElement); this.setActive(linkElement);
} } else {
else {
this.setActive(event.target); this.setActive(event.target);
} }
if($(window).width() < 768) {
if ($(window).width() < 768) {
this.ui.collapse.collapse('hide'); this.ui.collapse.collapse('hide');
} }
}, },
setActive : function(element){
setActive : function(element) {
//Todo: Set active on first load
this.$('a').removeClass('active'); this.$('a').removeClass('active');
$(element).addClass('active'); $(element).addClass('active');
} }

@ -5,32 +5,33 @@ var Backbone = require('backbone');
var SeriesCollection = require('../Series/SeriesCollection'); var SeriesCollection = require('../Series/SeriesCollection');
require('typeahead'); require('typeahead');
module.exports = (function(){ vent.on(vent.Hotkeys.NavbarSearch, function() {
vent.on(vent.Hotkeys.NavbarSearch, function(){ $('.x-series-search').focus();
$('.x-series-search').focus(); });
});
$.fn.bindSearch = function(){ var substringMatcher = function() {
$(this).typeahead({ return function findMatches (q, cb) {
hint : true, var matches = _.select(SeriesCollection.toJSON(), function(series) {
highlight : true, return series.title.toLowerCase().indexOf(q.toLowerCase()) > -1;
minLength : 1
}, {
name : 'series',
displayKey : 'title',
source : substringMatcher()
});
$(this).on('typeahead:selected typeahead:autocompleted', function(e, series){
this.blur();
$(this).val('');
Backbone.history.navigate('/series/{0}'.format(series.titleSlug), {trigger : true});
}); });
cb(matches);
}; };
var substringMatcher = function(){ };
return function findMatches (q, cb){
var matches = _.select(SeriesCollection.toJSON(), function(series){ $.fn.bindSearch = function() {
return series.title.toLowerCase().indexOf(q.toLowerCase()) > -1; $(this).typeahead({
}); hint : true,
cb(matches); highlight : true,
}; minLength : 1
}; }, {
}).call(this); name : 'series',
displayKey : 'title',
source : substringMatcher()
});
$(this).on('typeahead:selected typeahead:autocompleted', function(e, series) {
this.blur();
$(this).val('');
Backbone.history.navigate('/series/{0}'.format(series.titleSlug), { trigger : true });
});
};

@ -1,12 +1,13 @@
var Backbone = require('backbone'); var Backbone = require('backbone');
var ProfileModel = require('./ProfileModel'); var ProfileModel = require('./ProfileModel');
module.exports = (function(){ var ProfileCollection = Backbone.Collection.extend({
var ProfileCollection = Backbone.Collection.extend({ model : ProfileModel,
model : ProfileModel, url : window.NzbDrone.ApiRoot + '/profile'
url : window.NzbDrone.ApiRoot + '/profile' });
});
var profiles = new ProfileCollection(); var profiles = new ProfileCollection();
profiles.fetch();
return profiles; profiles.fetch();
}).call(this);
module.exports = profiles;

@ -2,10 +2,13 @@ var ModelBase = require('../Settings/SettingsModelBase');
module.exports = ModelBase.extend({ module.exports = ModelBase.extend({
baseInitialize : ModelBase.prototype.initialize, baseInitialize : ModelBase.prototype.initialize,
initialize : function(){
initialize : function() {
var name = this.get('quality').name; var name = this.get('quality').name;
this.successMessage = 'Saved ' + name + ' quality settings'; this.successMessage = 'Saved ' + name + ' quality settings';
this.errorMessage = 'Couldn\'t save ' + name + ' quality settings'; this.errorMessage = 'Couldn\'t save ' + name + ' quality settings';
this.baseInitialize.call(this); this.baseInitialize.call(this);
} }
}); });

@ -5,25 +5,31 @@ require('../Shared/FormatHelpers');
module.exports = Backgrid.Cell.extend({ module.exports = Backgrid.Cell.extend({
className : 'age-cell', className : 'age-cell',
render : function(){
render : function() {
var age = this.model.get('age'); var age = this.model.get('age');
var ageHours = this.model.get('ageHours'); var ageHours = this.model.get('ageHours');
var published = moment(this.model.get('publishDate')); var published = moment(this.model.get('publishDate'));
var publishedFormatted = published.format('{0} {1}'.format(UiSettings.get('shortDateFormat'), UiSettings.time(true, true))); var publishedFormatted = published.format('{0} {1}'.format(UiSettings.get('shortDateFormat'), UiSettings.time(true, true)));
var formatted = age; var formatted = age;
var suffix = this.plural(age, 'day'); var suffix = this.plural(age, 'day');
if(age === 0) {
if (age === 0) {
formatted = ageHours.toFixed(1); formatted = ageHours.toFixed(1);
suffix = this.plural(Math.round(ageHours), 'hour'); suffix = this.plural(Math.round(ageHours), 'hour');
} }
this.$el.html('<div title="{2}">{0} {1}</div>'.format(formatted, suffix, publishedFormatted)); this.$el.html('<div title="{2}">{0} {1}</div>'.format(formatted, suffix, publishedFormatted));
this.delegateEvents(); this.delegateEvents();
return this; return this;
}, },
plural : function(input, unit){
if(input === 1) { plural : function(input, unit) {
if (input === 1) {
return unit; return unit;
} }
return unit + 's'; return unit + 's';
} }
}); });

@ -2,30 +2,40 @@ var Backgrid = require('backgrid');
module.exports = Backgrid.Cell.extend({ module.exports = Backgrid.Cell.extend({
className : 'download-report-cell', className : 'download-report-cell',
events : {click : '_onClick'},
_onClick : function(){ events : {
if(!this.model.get('downloadAllowed')) { 'click' : '_onClick'
},
_onClick : function() {
if (!this.model.get('downloadAllowed')) {
return; return;
} }
var self = this; var self = this;
this.$el.html('<i class="icon-spinner icon-spin" />'); this.$el.html('<i class="icon-spinner icon-spin" />');
//Using success callback instead of promise so it
//gets called before the sync event is triggered
this.model.save(null, { this.model.save(null, {
success : function(){ success : function() {
self.model.set('queued', true); self.model.set('queued', true);
} }
}); });
}, },
render : function(){
render : function() {
this.$el.empty(); this.$el.empty();
if(this.model.get('queued')) {
if (this.model.get('queued')) {
this.$el.html('<i class="icon-nd-downloading" title="Added to downloaded queue" />'); this.$el.html('<i class="icon-nd-downloading" title="Added to downloaded queue" />');
} } else if (this.model.get('downloadAllowed')) {
else if(this.model.get('downloadAllowed')) {
this.$el.html('<i class="icon-download-alt" title="Add to download queue" />'); this.$el.html('<i class="icon-download-alt" title="Add to download queue" />');
} } else {
else {
this.className = 'no-download-report-cell'; this.className = 'no-download-report-cell';
} }
return this; return this;
} }
}); });

@ -2,23 +2,27 @@ var Backgrid = require('backgrid');
module.exports = Backgrid.Cell.extend({ module.exports = Backgrid.Cell.extend({
className : 'peers-cell', className : 'peers-cell',
render : function(){
if(this.model.get('protocol') === 'torrent') { render : function() {
if (this.model.get('protocol') === 'torrent') {
var seeders = this.model.get('seeders') || 0; var seeders = this.model.get('seeders') || 0;
var leechers = this.model.get('leechers') || 0; var leechers = this.model.get('leechers') || 0;
var level = 'danger'; var level = 'danger';
if(seeders > 0) {
if (seeders > 0) {
level = 'warning'; level = 'warning';
} } else if (seeders > 10) {
if(seeders > 10) {
level = 'info'; level = 'info';
} } else if (seeders > 50) {
if(seeders > 50) {
level = 'primary'; level = 'primary';
} }
this.$el.html('<div class="label label-{2}" title="{0} seeders, {1} leechers">{0} / {1}</div>'.format(seeders, leechers, level)); this.$el.html('<div class="label label-{2}" title="{0} seeders, {1} leechers">{0} / {1}</div>'.format(seeders, leechers, level));
} }
this.delegateEvents(); this.delegateEvents();
return this; return this;
} }
}); });

@ -2,19 +2,23 @@ var Backgrid = require('backgrid');
module.exports = Backgrid.Cell.extend({ module.exports = Backgrid.Cell.extend({
className : 'protocol-cell', className : 'protocol-cell',
render : function(){
render : function() {
var protocol = this.model.get('protocol') || 'Unknown'; var protocol = this.model.get('protocol') || 'Unknown';
var label = '??'; var label = '??';
if(protocol) {
if(protocol === 'torrent') { if (protocol) {
if (protocol === 'torrent') {
label = 'torrent'; label = 'torrent';
} } else if (protocol === 'usenet') {
else if(protocol === 'usenet') {
label = 'nzb'; label = 'nzb';
} }
this.$el.html('<div class="label label-default protocol-{0}" title="{0}">{1}</div>'.format(protocol, label)); this.$el.html('<div class="label label-default protocol-{0}" title="{0}">{1}</div>'.format(protocol, label));
} }
this.delegateEvents(); this.delegateEvents();
return this; return this;
} }
}); });

@ -2,42 +2,55 @@ var PagableCollection = require('backbone.pageable');
var ReleaseModel = require('./ReleaseModel'); var ReleaseModel = require('./ReleaseModel');
var AsSortedCollection = require('../Mixins/AsSortedCollection'); var AsSortedCollection = require('../Mixins/AsSortedCollection');
module.exports = (function(){ var Collection = PagableCollection.extend({
var Collection = PagableCollection.extend({ url : window.NzbDrone.ApiRoot + '/release',
url : window.NzbDrone.ApiRoot + '/release', model : ReleaseModel,
model : ReleaseModel,
state : { state : {
pageSize : 2000, pageSize : 2000,
sortKey : 'download', sortKey : 'download',
order : -1 order : -1
},
mode : 'client',
sortMappings : {
'quality' : {
sortKey : 'qualityWeight'
}, },
mode : 'client', 'rejections' : {
sortMappings : { sortValue : function(model) {
quality : {sortKey : 'qualityWeight'}, var rejections = model.get('rejections');
rejections : { var releaseWeight = model.get('releaseWeight');
sortValue : function(model){
var rejections = model.get('rejections'); if (rejections.length !== 0) {
var releaseWeight = model.get('releaseWeight'); return releaseWeight + 1000000;
if(rejections.length !== 0) {
return releaseWeight + 1000000;
}
return releaseWeight;
}
},
download : {sortKey : 'releaseWeight'},
seeders : {
sortValue : function(model){
var seeders = model.get('seeders') || 0;
var leechers = model.get('leechers') || 0;
return seeders * 1000000 + leechers;
} }
},
age : {sortKey : 'ageMinutes'} return releaseWeight;
}
}, },
fetchEpisodeReleases : function(episodeId){ 'download' : {
return this.fetch({data : {episodeId : episodeId}}); sortKey : 'releaseWeight'
},
'seeders' : {
sortValue : function(model) {
var seeders = model.get('seeders') || 0;
var leechers = model.get('leechers') || 0;
return seeders * 1000000 + leechers;
}
},
'age' : {
sortKey : 'ageMinutes'
} }
}); },
Collection = AsSortedCollection.call(Collection);
return Collection; fetchEpisodeReleases : function(episodeId) {
}).call(this); return this.fetch({ data : { episodeId : episodeId } });
}
});
Collection = AsSortedCollection.call(Collection);
module.exports = Collection;

@ -9,51 +9,63 @@ var ApprovalStatusCell = require('../Cells/ApprovalStatusCell');
var LoadingView = require('../Shared/LoadingView'); var LoadingView = require('../Shared/LoadingView');
module.exports = Marionette.Layout.extend({ module.exports = Marionette.Layout.extend({
template : 'Release/ReleaseLayoutTemplate', template : 'Release/ReleaseLayoutTemplate',
regions : {
regions : {
grid : '#x-grid', grid : '#x-grid',
toolbar : '#x-toolbar' toolbar : '#x-toolbar'
}, },
columns : [{
name : 'indexer', columns : [
label : 'Indexer', {
sortable : true, name : 'indexer',
cell : IndexerCell label : 'Indexer',
}, { sortable : true,
name : 'title', cell : IndexerCell
label : 'Title', },
sortable : true, {
cell : Backgrid.StringCell name : 'title',
}, { label : 'Title',
name : 'episodeNumbers', sortable : true,
episodes : 'episodeNumbers', cell : Backgrid.StringCell
label : 'season', },
cell : EpisodeNumberCell {
}, { name : 'episodeNumbers',
name : 'size', episodes : 'episodeNumbers',
label : 'Size', label : 'season',
sortable : true, cell : EpisodeNumberCell
cell : FileSizeCell },
}, { {
name : 'quality', name : 'size',
label : 'Quality', label : 'Size',
sortable : true, sortable : true,
cell : QualityCell cell : FileSizeCell
}, { },
name : 'rejections', {
label : '', name : 'quality',
cell : ApprovalStatusCell label : 'Quality',
}], sortable : true,
initialize : function(){ cell : QualityCell
},
{
name : 'rejections',
label : '',
cell : ApprovalStatusCell
}
],
initialize : function() {
this.collection = new ReleaseCollection(); this.collection = new ReleaseCollection();
this.listenTo(this.collection, 'sync', this._showTable); this.listenTo(this.collection, 'sync', this._showTable);
}, },
onRender : function(){
onRender : function() {
this.grid.show(new LoadingView()); this.grid.show(new LoadingView());
this.collection.fetch(); this.collection.fetch();
}, },
_showTable : function(){
if(!this.isClosed) { _showTable : function() {
if (!this.isClosed) {
this.grid.show(new Backgrid.Grid({ this.grid.show(new Backgrid.Grid({
row : Backgrid.Row, row : Backgrid.Row,
columns : this.columns, columns : this.columns,

Loading…
Cancel
Save