mirror of
https://github.com/Sonarr/Sonarr.git
synced 2024-12-16 11:37:58 +02:00
UI Cleanup - Updated Navbar, Profile, Quality and Release subtrees.
This commit is contained in:
parent
29d9e3dadf
commit
860f55996c
@ -6,37 +6,54 @@ 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,11 +5,20 @@ 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();
|
||||||
|
});
|
||||||
|
|
||||||
|
var substringMatcher = function() {
|
||||||
|
return function findMatches (q, cb) {
|
||||||
|
var matches = _.select(SeriesCollection.toJSON(), function(series) {
|
||||||
|
return series.title.toLowerCase().indexOf(q.toLowerCase()) > -1;
|
||||||
});
|
});
|
||||||
$.fn.bindSearch = function(){
|
cb(matches);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.bindSearch = function() {
|
||||||
$(this).typeahead({
|
$(this).typeahead({
|
||||||
hint : true,
|
hint : true,
|
||||||
highlight : true,
|
highlight : true,
|
||||||
@ -19,18 +28,10 @@ module.exports = (function(){
|
|||||||
displayKey : 'title',
|
displayKey : 'title',
|
||||||
source : substringMatcher()
|
source : substringMatcher()
|
||||||
});
|
});
|
||||||
$(this).on('typeahead:selected typeahead:autocompleted', function(e, series){
|
|
||||||
|
$(this).on('typeahead:selected typeahead:autocompleted', function(e, series) {
|
||||||
this.blur();
|
this.blur();
|
||||||
$(this).val('');
|
$(this).val('');
|
||||||
Backbone.history.navigate('/series/{0}'.format(series.titleSlug), {trigger : true});
|
Backbone.history.navigate('/series/{0}'.format(series.titleSlug), { trigger : true });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
var substringMatcher = function(){
|
|
||||||
return function findMatches (q, cb){
|
|
||||||
var matches = _.select(SeriesCollection.toJSON(), function(series){
|
|
||||||
return series.title.toLowerCase().indexOf(q.toLowerCase()) > -1;
|
|
||||||
});
|
|
||||||
cb(matches);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}).call(this);
|
|
@ -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();
|
|
||||||
profiles.fetch();
|
var profiles = new ProfileCollection();
|
||||||
return profiles;
|
|
||||||
}).call(this);
|
profiles.fetch();
|
||||||
|
|
||||||
|
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',
|
mode : 'client',
|
||||||
|
|
||||||
sortMappings : {
|
sortMappings : {
|
||||||
quality : {sortKey : 'qualityWeight'},
|
'quality' : {
|
||||||
rejections : {
|
sortKey : 'qualityWeight'
|
||||||
sortValue : function(model){
|
},
|
||||||
|
'rejections' : {
|
||||||
|
sortValue : function(model) {
|
||||||
var rejections = model.get('rejections');
|
var rejections = model.get('rejections');
|
||||||
var releaseWeight = model.get('releaseWeight');
|
var releaseWeight = model.get('releaseWeight');
|
||||||
if(rejections.length !== 0) {
|
|
||||||
|
if (rejections.length !== 0) {
|
||||||
return releaseWeight + 1000000;
|
return releaseWeight + 1000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
return releaseWeight;
|
return releaseWeight;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
download : {sortKey : 'releaseWeight'},
|
'download' : {
|
||||||
seeders : {
|
sortKey : 'releaseWeight'
|
||||||
sortValue : function(model){
|
},
|
||||||
|
'seeders' : {
|
||||||
|
sortValue : function(model) {
|
||||||
var seeders = model.get('seeders') || 0;
|
var seeders = model.get('seeders') || 0;
|
||||||
var leechers = model.get('leechers') || 0;
|
var leechers = model.get('leechers') || 0;
|
||||||
|
|
||||||
return seeders * 1000000 + leechers;
|
return seeders * 1000000 + leechers;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
age : {sortKey : 'ageMinutes'}
|
'age' : {
|
||||||
},
|
sortKey : 'ageMinutes'
|
||||||
fetchEpisodeReleases : function(episodeId){
|
|
||||||
return this.fetch({data : {episodeId : episodeId}});
|
|
||||||
}
|
}
|
||||||
});
|
},
|
||||||
Collection = AsSortedCollection.call(Collection);
|
|
||||||
return Collection;
|
fetchEpisodeReleases : function(episodeId) {
|
||||||
}).call(this);
|
return this.fetch({ data : { episodeId : episodeId } });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Collection = AsSortedCollection.call(Collection);
|
||||||
|
|
||||||
|
module.exports = Collection;
|
@ -10,50 +10,62 @@ 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 : [{
|
|
||||||
|
columns : [
|
||||||
|
{
|
||||||
name : 'indexer',
|
name : 'indexer',
|
||||||
label : 'Indexer',
|
label : 'Indexer',
|
||||||
sortable : true,
|
sortable : true,
|
||||||
cell : IndexerCell
|
cell : IndexerCell
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name : 'title',
|
name : 'title',
|
||||||
label : 'Title',
|
label : 'Title',
|
||||||
sortable : true,
|
sortable : true,
|
||||||
cell : Backgrid.StringCell
|
cell : Backgrid.StringCell
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name : 'episodeNumbers',
|
name : 'episodeNumbers',
|
||||||
episodes : 'episodeNumbers',
|
episodes : 'episodeNumbers',
|
||||||
label : 'season',
|
label : 'season',
|
||||||
cell : EpisodeNumberCell
|
cell : EpisodeNumberCell
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name : 'size',
|
name : 'size',
|
||||||
label : 'Size',
|
label : 'Size',
|
||||||
sortable : true,
|
sortable : true,
|
||||||
cell : FileSizeCell
|
cell : FileSizeCell
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name : 'quality',
|
name : 'quality',
|
||||||
label : 'Quality',
|
label : 'Quality',
|
||||||
sortable : true,
|
sortable : true,
|
||||||
cell : QualityCell
|
cell : QualityCell
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
name : 'rejections',
|
name : 'rejections',
|
||||||
label : '',
|
label : '',
|
||||||
cell : ApprovalStatusCell
|
cell : ApprovalStatusCell
|
||||||
}],
|
}
|
||||||
initialize : function(){
|
],
|
||||||
|
|
||||||
|
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…
Reference in New Issue
Block a user