mirror of
https://github.com/lidarr/lidarr.git
synced 2025-08-20 21:43:33 -07:00
Backgrid added
This commit is contained in:
Mark McDowall
parent
2b5f208126
commit
d706a35ab7
18 changed files with 2447 additions and 1492 deletions
8
UI/Series/Index/EmptySeriesIndexView.js
Normal file
8
UI/Series/Index/EmptySeriesIndexView.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
define(['app'], function (app) {
|
||||
|
||||
NzbDrone.Series.Index.EmptySeriesCollectionView = Backbone.Marionette.CompositeView.extend({
|
||||
template: 'Series/Index/EmptySeriesIndexTemplate'
|
||||
});
|
||||
});
|
||||
5
UI/Series/Index/List/CollectionTemplate.html
Normal file
5
UI/Series/Index/List/CollectionTemplate.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="row">
|
||||
<div class="span12">
|
||||
<div id="x-series-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
17
UI/Series/Index/List/CollectionView.js
Normal file
17
UI/Series/Index/List/CollectionView.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
'use strict';
|
||||
|
||||
define(['app', 'Quality/QualityProfileCollection', 'Series/Index/List/ItemView', 'Config'], function (app, qualityProfileCollection) {
|
||||
|
||||
NzbDrone.Series.Index.List.CollectionView = Backbone.Marionette.CompositeView.extend({
|
||||
itemView : NzbDrone.Series.Index.List.ItemView,
|
||||
itemViewContainer : '#x-series-list',
|
||||
template : 'Series/Index/List/CollectionTemplate',
|
||||
qualityProfileCollection: qualityProfileCollection,
|
||||
|
||||
initialize: function () {
|
||||
this.qualityProfileCollection.fetch();
|
||||
|
||||
this.itemViewOptions = { qualityProfiles: this.qualityProfileCollection };
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -9,19 +9,9 @@ define([
|
|||
|
||||
], function () {
|
||||
|
||||
NzbDrone.Series.Index.SeriesItemView = Backbone.Marionette.ItemView.extend({
|
||||
NzbDrone.Series.Index.List.ItemView = Backbone.Marionette.ItemView.extend({
|
||||
tagName : 'tr',
|
||||
template: 'Series/Index/SeriesItemTemplate',
|
||||
|
||||
getTemplate: function(){
|
||||
if (this.viewStyle === 1){
|
||||
this.tagName = 'div';
|
||||
return 'Series/Index/SeriesGridItemTemplate';
|
||||
}
|
||||
else {
|
||||
return 'Series/Index/SeriesItemTemplate';
|
||||
}
|
||||
},
|
||||
template: 'Series/Index/List/ItemTemplate',
|
||||
|
||||
ui: {
|
||||
'progressbar': '.progress .bar'
|
||||
|
|
@ -34,7 +24,6 @@ define([
|
|||
|
||||
initialize: function (options) {
|
||||
this.qualityProfileCollection = options.qualityProfiles;
|
||||
this.viewStyle = options.viewStyle;
|
||||
},
|
||||
|
||||
editSeries: function () {
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
define(['app', 'Quality/QualityProfileCollection', 'Series/Index/SeriesItemView', 'Config'], function (app, qualityProfileCollection) {
|
||||
|
||||
NzbDrone.Series.Index.EmptySeriesCollectionView = Backbone.Marionette.CompositeView.extend({
|
||||
template: 'Series/Index/EmptySeriesIndexTemplate',
|
||||
tagName : 'tr'
|
||||
});
|
||||
|
||||
NzbDrone.Series.Index.SeriesIndexCollectionView = Backbone.Marionette.CompositeView.extend({
|
||||
itemView : NzbDrone.Series.Index.SeriesItemView,
|
||||
itemViewContainer : '#x-series',
|
||||
template : 'Series/Index/SeriesIndexTemplate',
|
||||
qualityProfileCollection: qualityProfileCollection,
|
||||
|
||||
emptyView : NzbDrone.Series.Index.EmptySeriesCollectionView,
|
||||
|
||||
getTemplate: function(){
|
||||
if (this.viewStyle === 1){
|
||||
return 'Series/Index/SeriesIndexGridTemplate';
|
||||
}
|
||||
else {
|
||||
return 'Series/Index/SeriesIndexTemplate';
|
||||
}
|
||||
},
|
||||
|
||||
ui: {
|
||||
table: '.x-series-table'
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .x-series-change-view': 'changeViewTemplate'
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.viewStyle = NzbDrone.Config.SeriesViewStyle();
|
||||
|
||||
this.collection = new NzbDrone.Series.SeriesCollection();
|
||||
//Todo: This caused the onRendered event to be trigger twice, which displays two empty collection messages
|
||||
//http://stackoverflow.com/questions/13065176/backbone-marionette-composit-view-onrender-executing-twice
|
||||
this.collection.fetch();
|
||||
this.qualityProfileCollection.fetch();
|
||||
|
||||
this.itemViewOptions = { qualityProfiles: this.qualityProfileCollection, viewStyle: this.viewStyle };
|
||||
},
|
||||
|
||||
onItemRemoved: function () {
|
||||
this.ui.table.trigger('update');
|
||||
},
|
||||
|
||||
onCompositeCollectionRendered: function () {
|
||||
this.ui.table.trigger('update');
|
||||
|
||||
if (!this.tableSorter && this.collection.length > 0) {
|
||||
this.tableSorter = this.ui.table.tablesorter({
|
||||
textExtraction: function (node) {
|
||||
return node.innerHTML;
|
||||
},
|
||||
sortList : [
|
||||
[1, 0]
|
||||
],
|
||||
headers : {
|
||||
0: {
|
||||
sorter: 'title'
|
||||
},
|
||||
1: {
|
||||
sorter: 'innerHtml'
|
||||
},
|
||||
5: {
|
||||
sorter: 'date'
|
||||
},
|
||||
6: {
|
||||
sorter: false
|
||||
},
|
||||
7: {
|
||||
sorter: false
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.applySortIcons();
|
||||
|
||||
this.ui.table.bind("sortEnd", function () {
|
||||
this.applySortIcons();
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.ui.table.trigger('update');
|
||||
}
|
||||
},
|
||||
//Todo: Remove this from each view that requires it
|
||||
applySortIcons : function () {
|
||||
$(this.ui.table).find('th.tablesorter-header .tablesorter-header-inner i').each(function () {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
$(this.ui.table).find('th.tablesorter-header').each(function () {
|
||||
if ($(this).hasClass('tablesorter-headerDesc')) {
|
||||
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort-up pull-right">');
|
||||
}
|
||||
|
||||
else if ($(this).hasClass('tablesorter-headerAsc')) {
|
||||
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort-down pull-right">');
|
||||
}
|
||||
|
||||
else if (!$(this).hasClass('sorter-false')) {
|
||||
$(this).children('.tablesorter-header-inner').append('<i class="icon-sort pull-right">');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
changeViewTemplate: function(event) {
|
||||
event.preventDefault();
|
||||
if ($(event.currentTarget).hasClass('x-series-show-grid')) {
|
||||
NzbDrone.Config.SeriesViewStyle(1);
|
||||
}
|
||||
else {
|
||||
NzbDrone.Config.SeriesViewStyle(0);
|
||||
}
|
||||
|
||||
this.viewStyle = NzbDrone.Config.SeriesViewStyle();
|
||||
this.itemViewOptions.viewStyle = this.viewStyle;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
});
|
||||
142
UI/Series/Index/SeriesIndexLayout.js
Normal file
142
UI/Series/Index/SeriesIndexLayout.js
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
"use strict";
|
||||
define([
|
||||
'app',
|
||||
'Series/Index/List/CollectionView',
|
||||
'Config'
|
||||
],
|
||||
function (app) {
|
||||
NzbDrone.Series.Index.SeriesIndexLayout = Backbone.Marionette.Layout.extend({
|
||||
template: 'Series/Index/SeriesIndexLayoutTemplate',
|
||||
|
||||
regions: {
|
||||
series: '#x-series'
|
||||
},
|
||||
|
||||
ui: {
|
||||
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .x-series-change-view': 'changeView'
|
||||
},
|
||||
|
||||
showTable: function () {
|
||||
|
||||
var columns =
|
||||
[
|
||||
{
|
||||
name: 'status',
|
||||
label: '',
|
||||
editable: false,
|
||||
cell: 'seriesStatus'
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
label: 'Title',
|
||||
editable: false,
|
||||
cell: 'string'
|
||||
},
|
||||
{
|
||||
name: 'seasonCount',
|
||||
label: 'Seasons',
|
||||
editable: false,
|
||||
cell: 'integer'
|
||||
},
|
||||
{
|
||||
name: 'quality',
|
||||
label: 'Quality',
|
||||
editable: false,
|
||||
cell: 'integer'
|
||||
},
|
||||
{
|
||||
name: 'network',
|
||||
label: 'Network',
|
||||
editable: false,
|
||||
cell: 'string'
|
||||
},
|
||||
{
|
||||
name: 'nextAiring',
|
||||
label: 'Next Airing',
|
||||
editable: false,
|
||||
cell: 'datetime',
|
||||
formatter: new Backgrid.AirDateFormatter()
|
||||
},
|
||||
{
|
||||
name: 'episodes',
|
||||
label: 'Episodes',
|
||||
editable: false,
|
||||
sortable: false,
|
||||
cell: 'string'
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
label: '',
|
||||
editable: false,
|
||||
sortable: false,
|
||||
cell: 'string'
|
||||
}
|
||||
];
|
||||
|
||||
this.series.show(new Backgrid.Grid(
|
||||
{
|
||||
columns : columns,
|
||||
collection : this.seriesCollection,
|
||||
className: 'table table-hover'
|
||||
}));
|
||||
},
|
||||
|
||||
showList: function () {
|
||||
this.series.show(new NzbDrone.Series.Index.List.CollectionView({ collection: this.seriesCollection }));
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.viewStyle = NzbDrone.Config.SeriesViewStyle();
|
||||
this.seriesCollection = new NzbDrone.Series.SeriesCollection();
|
||||
this.seriesCollection.fetch();
|
||||
},
|
||||
|
||||
onRender: function () {
|
||||
var element = this.$('a[data-target="' + this.viewStyle + '"]').removeClass('active');
|
||||
this.setActive(element);
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
switch (this.viewStyle) {
|
||||
case 1:
|
||||
this.showList();
|
||||
break;
|
||||
default:
|
||||
this.showTable();
|
||||
}
|
||||
},
|
||||
|
||||
changeView: function (e) {
|
||||
e.preventDefault();
|
||||
var view = parseInt($(e.target).data('target'));
|
||||
|
||||
if (isNaN(view)) {
|
||||
view = parseInt($(e.target).parent('a').data('target'));
|
||||
this.setActive($(e.target).parent('a'));
|
||||
}
|
||||
|
||||
else{
|
||||
this.setActive($(e.target));
|
||||
}
|
||||
|
||||
if (view === 1) {
|
||||
NzbDrone.Config.SeriesViewStyle(1);
|
||||
this.showList();
|
||||
}
|
||||
|
||||
else {
|
||||
NzbDrone.Config.SeriesViewStyle(0);
|
||||
this.showTable();
|
||||
}
|
||||
},
|
||||
|
||||
setActive: function (element) {
|
||||
this.$('a').removeClass('active');
|
||||
$(element).addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="pull-right">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn x-series-change-view x-series-show-table" href="#" title="table"><i class="icon-table"></i></a>
|
||||
<a class="btn x-series-change-view x-series-show-grid active" href="#" title="grid"><i class="icon-list"></i></a>
|
||||
<a class="btn x-series-change-view x-series-show-table" href="#" title="Table" data-target="0"><i class="icon-table"></i></a>
|
||||
<a class="btn x-series-change-view x-series-show-list" href="#" title="List" data-target="1"><i class="icon-list"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="span10"></div>
|
||||
<div class="span2">
|
||||
<div class="pull-right">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn x-series-change-view x-series-show-table active" href="#" title="table"><i class="icon-table"></i></a>
|
||||
<a class="btn x-series-change-view x-series-show-grid" href="#" title="grid"><i class="icon-list"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover x-series-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th title="Status"></th>
|
||||
<th>Title</th>
|
||||
<th>Seasons</th>
|
||||
<th>Quality</th>
|
||||
<th>Network</th>
|
||||
<th>Next Airing</th>
|
||||
<th>Episodes</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="x-series"></tbody>
|
||||
</table>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<td>{{{formatStatus status monitored}}}</td>
|
||||
<td><a href="/series/details/{{id}}">{{title}}</a></td>
|
||||
<td name="seasonCount"></td>
|
||||
<td name="qualityProfileName"></td>
|
||||
<td name="network"></td>
|
||||
<!-- If only DT could access the backbone model -->
|
||||
<td><span title="{{formatedDateString}}" data-date="{{nextAiring}}">{{bestDateString}}</span></td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>
|
||||
|
||||
<div class="bar" style="width:{{percentOfEpisodes}}%"><span class="progressbar-front-text">{{episodeFileCount}} / {{episodeCount}}</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<i class="icon-cog x-edit" title="Edit Series"></i>
|
||||
<i class="icon-remove x-remove" title="Delete Series"></i>
|
||||
</td>
|
||||
Loading…
Add table
Add a link
Reference in a new issue