New: Blacklist added to UI (under history)

src/UI/History/Blacklist/BlacklistActionsCell.js

@@ -0,0 +1,26 @@
+'use strict';
+
+define(
+    [
+        'Cells/NzbDroneCell'
+    ], function (NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'blacklist-controls-cell',
+
+            events: {
+                'click': '_delete'
+            },
+
+            render: function () {
+                this.$el.empty();
+                this.$el.html('<i class="icon-nd-delete"></i>');
+
+                return this;
+            },
+
+            _delete: function () {
+                this.model.destroy();
+            }
+        });
+    });

src/UI/History/Blacklist/BlacklistCollection.js

@@ -0,0 +1,44 @@
+'use strict';
+define(
+    [
+        'History/Blacklist/BlacklistModel',
+        'backbone.pageable',
+        'Mixins/AsPersistedStateCollection'
+    ], function (BlacklistModel, PageableCollection, AsPersistedStateCollection) {
+        var collection = PageableCollection.extend({
+            url  : window.NzbDrone.ApiRoot + '/blacklist',
+            model: BlacklistModel,
+
+            state: {
+                pageSize: 15,
+                sortKey : 'date',
+                order   : 1
+            },
+
+            queryParams: {
+                totalPages  : null,
+                totalRecords: null,
+                pageSize    : 'pageSize',
+                sortKey     : 'sortKey',
+                order       : 'sortDir',
+                directions  : {
+                    '-1': 'asc',
+                    '1' : 'desc'
+                }
+            },
+
+            parseState: function (resp) {
+                return { totalRecords: resp.totalRecords };
+            },
+
+            parseRecords: function (resp) {
+                if (resp) {
+                    return resp.records;
+                }
+
+                return resp;
+            }
+        });
+
+        return AsPersistedStateCollection.apply(collection);
+    });

src/UI/History/Blacklist/BlacklistLayout.js

@@ -0,0 +1,132 @@
+'use strict';
+define(
+    [
+        'vent',
+        'marionette',
+        'backgrid',
+        'History/Blacklist/BlacklistCollection',
+        'Cells/SeriesTitleCell',
+        'Cells/QualityCell',
+        'Cells/RelativeDateCell',
+        'History/Blacklist/BlacklistActionsCell',
+        'Shared/Grid/Pager',
+        'Shared/LoadingView',
+        'Shared/Toolbar/ToolbarLayout'
+    ], function (vent,
+                 Marionette,
+                 Backgrid,
+                 BlacklistCollection,
+                 SeriesTitleCell,
+                 QualityCell,
+                 RelativeDateCell,
+                 BlacklistActionsCell,
+                 GridPager,
+                 LoadingView,
+                 ToolbarLayout) {
+        return Marionette.Layout.extend({
+            template: 'History/Blacklist/BlacklistLayoutTemplate',
+
+            regions: {
+                blacklist : '#x-blacklist',
+                toolbar   : '#x-toolbar',
+                pager     : '#x-pager'
+            },
+
+            columns:
+                [
+                    {
+                        name : 'series',
+                        label: 'Series',
+                        cell : SeriesTitleCell,
+                        sortValue: 'series.title'
+                    },
+                    {
+                        name : 'sourceTitle',
+                        label: 'Source Title',
+                        cell : 'string',
+                        sortValue: 'sourceTitle'
+                    },
+                    {
+                        name    : 'quality',
+                        label   : 'Quality',
+                        cell    : QualityCell,
+                        sortable: false
+                    },
+                    {
+                        name : 'date',
+                        label: 'Date',
+                        cell : RelativeDateCell
+                    },
+                    {
+                        name    : 'this',
+                        label   : '',
+                        cell    : BlacklistActionsCell,
+                        sortable: false
+                    }
+                ],
+
+            initialize: function () {
+                this.collection = new BlacklistCollection({ tableName: 'blacklist' });
+                this.listenTo(this.collection, 'sync', this._showTable);
+                vent.on(vent.Events.CommandComplete, this._commandComplete, this);
+            },
+
+            onShow: function () {
+                this.blacklist.show(new LoadingView());
+                this._showToolbar();
+                this.collection.fetch();
+            },
+
+            _showTable: function (collection) {
+
+                this.blacklist.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 () {
+                var leftSideButtons = {
+                    type      : 'default',
+                        storeState: false,
+                        items     :
+                    [
+                        {
+                            title          : 'Clear Blacklist',
+                            icon           : 'icon-trash',
+                            command        : 'clearBlacklist'
+                        }
+                    ]
+                };
+
+                this.toolbar.show(new ToolbarLayout({
+                    left   :
+                        [
+                            leftSideButtons
+                        ],
+                    context: this
+                }));
+            },
+
+            _refreshTable: function (buttonContext) {
+                this.collection.state.currentPage = 1;
+                var promise = this.collection.fetch({ reset: true });
+
+                if (buttonContext) {
+                    buttonContext.ui.icon.spinForPromise(promise);
+                }
+            },
+
+            _commandComplete: function (options) {
+                if (options.command.get('name') === 'clearblacklist') {
+                    this._refreshTable();
+                }
+            }
+        });
+    });

src/UI/History/Blacklist/BlacklistLayoutTemplate.html

@@ -0,0 +1,11 @@
+<div id="x-toolbar"/>
+<div class="row">
+    <div class="span12">
+        <div id="x-blacklist"/>
+    </div>
+</div>
+<div class="row">
+    <div class="span12">
+        <div id="x-pager"/>
+    </div>
+</div>

src/UI/History/Blacklist/BlacklistModel.js

@@ -0,0 +1,21 @@
+'use strict';
+define(
+    [
+        'backbone',
+        'Series/SeriesCollection'
+    ], function (Backbone, SeriesCollection) {
+        return Backbone.Model.extend({
+
+            //Hack to deal with Backbone 1.0's bug
+            initialize: function () {
+                this.url = function () {
+                    return this.collection.url + '/' + this.get('id');
+                };
+            },
+
+            parse: function (model) {
+                model.series = SeriesCollection.get(model.seriesId);
+                return model;
+            }
+        });
+    });

src/UI/History/HistoryLayout.js

@@ -5,24 +5,28 @@ define(
         'backbone',
         'backgrid',
         'History/Table/HistoryTableLayout',
+        'History/Blacklist/BlacklistLayout',
         'History/Queue/QueueLayout'
-    ], function (Marionette, Backbone, Backgrid, HistoryTableLayout, QueueLayout) {
+    ], function (Marionette, Backbone, Backgrid, HistoryTableLayout, BlacklistLayout, QueueLayout) {
         return Marionette.Layout.extend({
             template: 'History/HistoryLayoutTemplate',
 
             regions: {
                 history    : '#history',
+                blacklist  : '#blacklist',
                 queueRegion: '#queue'
             },
 
             ui: {
                 historyTab: '.x-history-tab',
+                blacklistTab: '.x-blacklist-tab',
                 queueTab  : '.x-queue-tab'
             },
 
             events: {
-                'click .x-history-tab': '_showHistory',
-                'click .x-queue-tab'  : '_showQueue'
+                'click .x-history-tab'   : '_showHistory',
+                'click .x-blacklist-tab' : '_showBlacklist',
+                'click .x-queue-tab'     : '_showQueue'
             },
 
             initialize: function (options) {
@@ -55,6 +59,16 @@ define(
                 this._navigate('/history');
             },
 
+            _showBlacklist: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.blacklist.show(new BlacklistLayout());
+                this.ui.blacklistTab.tab('show');
+                this._navigate('/history/blacklist');
+            },
+
             _showQueue: function (e) {
                 if (e) {
                     e.preventDefault();

src/UI/History/HistoryLayoutTemplate.html

@@ -1,9 +1,11 @@
 <ul class="nav nav-tabs">
     <li><a href="#history" class="x-history-tab no-router">History</a></li>
+    <li><a href="#blacklist" class="x-blacklist-tab no-router">Blacklist</a></li>
     <li><a href="#queue" class="x-queue-tab no-router">Queue</a></li>
 </ul>
 
 <div class="tab-content">
     <div class="tab-pane" id="history"></div>
+    <div class="tab-pane" id="blacklist"></div>
     <div class="tab-pane" id="queue"></div>
 </div>