UI Cleanup - Updated Activity subtree.

This commit is contained in:
Taloth Saldono
2015-02-13 22:03:50 +01:00
parent b308f06af3
commit b556eda4a0
25 changed files with 659 additions and 510 deletions
@@ -1,13 +1,14 @@
var Handlebars = require('handlebars');
module.exports = (function(){
Handlebars.registerHelper('historyAge', function(){
var unit = 'days';
var age = this.age;
if(age < 2) {
unit = 'hours';
age = parseFloat(this.ageHours).toFixed(1);
}
return new Handlebars.SafeString('<dt>Age (when grabbed):</dt><dd>{0} {1}</dd>'.format(age, unit));
});
}).call(this);
Handlebars.registerHelper('historyAge', function() {
var unit = 'days';
var age = this.age;
if (age < 2) {
unit = 'hours';
age = parseFloat(this.ageHours).toFixed(1);
}
return new Handlebars.SafeString('<dt>Age (when grabbed):</dt><dd>{0} {1}</dd>'.format(age, unit));
});
@@ -4,20 +4,32 @@ var Marionette = require('marionette');
var HistoryDetailsView = require('./HistoryDetailsView');
module.exports = Marionette.Layout.extend({
template : 'Activity/History/Details/HistoryDetailsLayoutTemplate',
regions : {bodyRegion : '.modal-body'},
events : {"click .x-mark-as-failed" : '_markAsFailed'},
onShow : function(){
this.bodyRegion.show(new HistoryDetailsView({model : this.model}));
template : 'Activity/History/Details/HistoryDetailsLayoutTemplate',
regions : {
bodyRegion : '.modal-body'
},
_markAsFailed : function(){
events : {
'click .x-mark-as-failed' : '_markAsFailed'
},
onShow : function() {
this.bodyRegion.show(new HistoryDetailsView({ model : this.model }));
},
_markAsFailed : function() {
var url = window.NzbDrone.ApiRoot + '/history/failed';
var data = {id : this.model.get('id')};
var data = {
id : this.model.get('id')
};
$.ajax({
url : url,
type : 'POST',
data : data
});
vent.trigger(vent.Commands.CloseModalCommand);
}
});
@@ -1,4 +1,6 @@
var Marionette = require('marionette');
require('./HistoryDetailsAge');
module.exports = Marionette.ItemView.extend({template : 'Activity/History/Details/HistoryDetailsViewTemplate'});
module.exports = Marionette.ItemView.extend({
template : 'Activity/History/Details/HistoryDetailsViewTemplate'
});
+76 -49
View File
@@ -4,53 +4,80 @@ var AsFilteredCollection = require('../../Mixins/AsFilteredCollection');
var AsSortedCollection = require('../../Mixins/AsSortedCollection');
var AsPersistedStateCollection = require('../../Mixins/AsPersistedStateCollection');
module.exports = (function(){
var Collection = PageableCollection.extend({
url : window.NzbDrone.ApiRoot + '/history',
model : HistoryModel,
state : {
pageSize : 15,
sortKey : 'date',
order : 1
},
queryParams : {
totalPages : null,
totalRecords : null,
pageSize : 'pageSize',
sortKey : 'sortKey',
order : 'sortDir',
directions : {
"-1" : 'asc',
"1" : 'desc'
}
},
filterModes : {
"all" : [null, null],
"grabbed" : ['eventType', '1'],
"imported" : ['eventType', '3'],
"failed" : ['eventType', '4'],
"deleted" : ['eventType', '5']
},
sortMappings : {"series" : {sortKey : 'series.sortTitle'}},
initialize : function(options){
delete this.queryParams.episodeId;
if(options) {
if(options.episodeId) {
this.queryParams.episodeId = options.episodeId;
}
}
},
parseState : function(resp){
return {totalRecords : resp.totalRecords};
},
parseRecords : function(resp){
if(resp) {
return resp.records;
}
return resp;
var Collection = PageableCollection.extend({
url : window.NzbDrone.ApiRoot + '/history',
model : HistoryModel,
state : {
pageSize : 15,
sortKey : 'date',
order : 1
},
queryParams : {
totalPages : null,
totalRecords : null,
pageSize : 'pageSize',
sortKey : 'sortKey',
order : 'sortDir',
directions : {
'-1' : 'asc',
'1' : 'desc'
}
});
Collection = AsFilteredCollection.call(Collection);
Collection = AsSortedCollection.call(Collection);
return AsPersistedStateCollection.call(Collection);
}).call(this);
},
filterModes : {
'all' : [
null,
null
],
'grabbed' : [
'eventType',
'1'
],
'imported' : [
'eventType',
'3'
],
'failed' : [
'eventType',
'4'
],
'deleted' : [
'eventType',
'5'
]
},
sortMappings : {
'series' : { sortKey : 'series.sortTitle' }
},
initialize : function(options) {
delete this.queryParams.episodeId;
if (options) {
if (options.episodeId) {
this.queryParams.episodeId = options.episodeId;
}
}
},
parseState : function(resp) {
return { totalRecords : resp.totalRecords };
},
parseRecords : function(resp) {
if (resp) {
return resp.records;
}
return resp;
}
});
Collection = AsFilteredCollection.call(Collection);
Collection = AsSortedCollection.call(Collection);
Collection = AsPersistedStateCollection.call(Collection);
module.exports = Collection;
+11 -5
View File
@@ -2,14 +2,20 @@ var vent = require('vent');
var NzbDroneCell = require('../../Cells/NzbDroneCell');
module.exports = NzbDroneCell.extend({
className : 'history-details-cell',
events : {"click" : '_showDetails'},
render : function(){
className : 'history-details-cell',
events : {
'click' : '_showDetails'
},
render : function() {
this.$el.empty();
this.$el.html('<i class="icon-info-sign"></i>');
return this;
},
_showDetails : function(){
vent.trigger(vent.Commands.ShowHistoryDetails, {model : this.model});
_showDetails : function() {
vent.trigger(vent.Commands.ShowHistoryDetails, { model : this.model });
}
});
+104 -76
View File
@@ -13,114 +13,142 @@ var ToolbarLayout = require('../../Shared/Toolbar/ToolbarLayout');
var LoadingView = require('../../Shared/LoadingView');
module.exports = Marionette.Layout.extend({
template : 'Activity/History/HistoryLayoutTemplate',
regions : {
template : 'Activity/History/HistoryLayoutTemplate',
regions : {
history : '#x-history',
toolbar : '#x-history-toolbar',
pager : '#x-history-pager'
},
columns : [{
name : 'eventType',
label : '',
cell : EventTypeCell,
cellValue : 'this'
}, {
name : 'series',
label : 'Series',
cell : SeriesTitleCell
}, {
name : 'episode',
label : 'Episode',
cell : EpisodeNumberCell,
sortable : false
}, {
name : 'episode',
label : 'Episode Title',
cell : EpisodeTitleCell,
sortable : false
}, {
name : 'this',
label : 'Quality',
cell : HistoryQualityCell,
sortable : false
}, {
name : 'date',
label : 'Date',
cell : RelativeDateCell
}, {
name : 'this',
label : '',
cell : HistoryDetailsCell,
sortable : false
}],
initialize : function(){
this.collection = new HistoryCollection({tableName : 'history'});
columns : [
{
name : 'eventType',
label : '',
cell : EventTypeCell,
cellValue : 'this'
},
{
name : 'series',
label : 'Series',
cell : SeriesTitleCell
},
{
name : 'episode',
label : 'Episode',
cell : EpisodeNumberCell,
sortable : false
},
{
name : 'episode',
label : 'Episode Title',
cell : EpisodeTitleCell,
sortable : false
},
{
name : 'this',
label : 'Quality',
cell : HistoryQualityCell,
sortable : false
},
{
name : 'date',
label : 'Date',
cell : RelativeDateCell
},
{
name : 'this',
label : '',
cell : HistoryDetailsCell,
sortable : false
}
],
initialize : function() {
this.collection = new HistoryCollection({ tableName : 'history' });
this.listenTo(this.collection, 'sync', this._showTable);
},
onShow : function(){
onShow : function() {
this.history.show(new LoadingView());
this._showToolbar();
},
_showTable : function(collection){
_showTable : function(collection) {
this.history.show(new Backgrid.Grid({
columns : this.columns,
collection : collection,
className : 'table table-hover'
}));
this.pager.show(new GridPager({
columns : this.columns,
collection : collection
}));
},
_showToolbar : function(){
_showToolbar : function() {
var filterOptions = {
type : 'radio',
storeState : true,
menuKey : 'history.filterMode',
defaultAction : 'all',
items : [{
key : 'all',
title : '',
tooltip : 'All',
icon : 'icon-circle-blank',
callback : this._setFilter
}, {
key : 'grabbed',
title : '',
tooltip : 'Grabbed',
icon : 'icon-nd-downloading',
callback : this._setFilter
}, {
key : 'imported',
title : '',
tooltip : 'Imported',
icon : 'icon-nd-imported',
callback : this._setFilter
}, {
key : 'failed',
title : '',
tooltip : 'Failed',
icon : 'icon-nd-download-failed',
callback : this._setFilter
}, {
key : 'deleted',
title : '',
tooltip : 'Deleted',
icon : 'icon-nd-deleted',
callback : this._setFilter
}]
items : [
{
key : 'all',
title : '',
tooltip : 'All',
icon : 'icon-circle-blank',
callback : this._setFilter
},
{
key : 'grabbed',
title : '',
tooltip : 'Grabbed',
icon : 'icon-nd-downloading',
callback : this._setFilter
},
{
key : 'imported',
title : '',
tooltip : 'Imported',
icon : 'icon-nd-imported',
callback : this._setFilter
},
{
key : 'failed',
title : '',
tooltip : 'Failed',
icon : 'icon-nd-download-failed',
callback : this._setFilter
},
{
key : 'deleted',
title : '',
tooltip : 'Deleted',
icon : 'icon-nd-deleted',
callback : this._setFilter
}
]
};
this.toolbar.show(new ToolbarLayout({
right : [filterOptions],
right : [
filterOptions
],
context : this
}));
},
_setFilter : function(buttonContext){
_setFilter : function(buttonContext) {
var mode = buttonContext.model.get('key');
this.collection.state.currentPage = 1;
var promise = this.collection.setFilterMode(mode);
if(buttonContext) {
if (buttonContext) {
buttonContext.ui.icon.spinForPromise(promise);
}
}
});
});
+1 -1
View File
@@ -3,7 +3,7 @@ var SeriesModel = require('../../Series/SeriesModel');
var EpisodeModel = require('../../Series/EpisodeModel');
module.exports = Backbone.Model.extend({
parse : function(model){
parse : function(model) {
model.series = new SeriesModel(model.series);
model.episode = new EpisodeModel(model.episode);
model.episode.set('series', model.series);
+12 -6
View File
@@ -2,23 +2,29 @@ var NzbDroneCell = require('../../Cells/NzbDroneCell');
module.exports = NzbDroneCell.extend({
className : 'history-quality-cell',
render : function(){
render : function() {
var title = '';
var quality = this.model.get('quality');
var revision = quality.revision;
if(revision.real && revision.real > 0) {
if (revision.real && revision.real > 0) {
title += ' REAL';
}
if(revision.version && revision.version > 1) {
if (revision.version && revision.version > 1) {
title += ' PROPER';
}
title = title.trim();
if(this.model.get('qualityCutoffNotMet')) {
if (this.model.get('qualityCutoffNotMet')) {
this.$el.html('<span class="badge badge-inverse" title="{0}">{1}</span>'.format(title, quality.quality.name));
}
else {
} else {
this.$el.html('<span class="badge" title="{0}">{1}</span>'.format(title, quality.quality.name));
}
return this;
}
});