Activity instead of History

New: Renamed history to activity
New: Queue is default tab of activity

src/UI/Activity/ActivityLayout.js

@@ -0,0 +1,85 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backbone',
+        'backgrid',
+        'Activity/History/HistoryLayout',
+        'Activity/Blacklist/BlacklistLayout',
+        'Activity/Queue/QueueLayout'
+    ], function (Marionette, Backbone, Backgrid, HistoryLayout, BlacklistLayout, QueueLayout) {
+        return Marionette.Layout.extend({
+            template: 'Activity/ActivityLayoutTemplate',
+
+            regions: {
+                queueRegion : '#queue',
+                history     : '#history',
+                blacklist   : '#blacklist'
+            },
+
+            ui: {
+                queueTab     : '.x-queue-tab',
+                historyTab   : '.x-history-tab',
+                blacklistTab : '.x-blacklist-tab'
+            },
+
+            events: {
+                'click .x-queue-tab'     : '_showQueue',
+                'click .x-history-tab'   : '_showHistory',
+                'click .x-blacklist-tab' : '_showBlacklist'
+            },
+
+            initialize: function (options) {
+                if (options.action) {
+                    this.action = options.action.toLowerCase();
+                }
+            },
+
+            onShow: function () {
+                switch (this.action) {
+                    case 'history':
+                        this._showHistory();
+                        break;
+                    case 'blacklist':
+                        this._showBlacklist();
+                        break;
+                    default:
+                        this._showQueue();
+                }
+            },
+
+            _navigate: function (route) {
+                Backbone.history.navigate(route);
+            },
+
+            _showHistory: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.history.show(new HistoryLayout());
+                this.ui.historyTab.tab('show');
+                this._navigate('/activity/history');
+            },
+
+            _showBlacklist: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.blacklist.show(new BlacklistLayout());
+                this.ui.blacklistTab.tab('show');
+                this._navigate('/activity/blacklist');
+            },
+
+            _showQueue: function (e) {
+                if (e) {
+                    e.preventDefault();
+                }
+
+                this.queueRegion.show(new QueueLayout());
+                this.ui.queueTab.tab('show');
+                this._navigate('/activity/queue');
+            }
+        });
+    });

src/UI/Activity/ActivityLayoutTemplate.hbs

@@ -0,0 +1,11 @@
+<ul class="nav nav-tabs">
+    <li><a href="#queue" class="x-queue-tab no-router">Queue</a></li>
+    <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>
+</ul>
+
+<div class="tab-content">
+    <div class="tab-pane" id="queue"></div>
+    <div class="tab-pane" id="history"></div>
+    <div class="tab-pane" id="blacklist"></div>
+</div>

src/UI/Activity/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/Activity/Blacklist/BlacklistCollection.js

@@ -0,0 +1,50 @@
+'use strict';
+define(
+    [
+        'Activity/Blacklist/BlacklistModel',
+        'backbone.pageable',
+        'Mixins/AsSortedCollection',
+        'Mixins/AsPersistedStateCollection'
+    ], function (BlacklistModel, PageableCollection, AsSortedCollection, 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'
+                }
+            },
+
+            sortMappings: {
+                'series'   : { sortKey: 'series.sortTitle' }
+            },
+
+            parseState: function (resp) {
+                return { totalRecords: resp.totalRecords };
+            },
+
+            parseRecords: function (resp) {
+                if (resp) {
+                    return resp.records;
+                }
+
+                return resp;
+            }
+        });
+
+        Collection = AsSortedCollection.call(Collection);
+        return AsPersistedStateCollection.call(Collection);
+    });

src/UI/Activity/Blacklist/BlacklistLayout.js

@@ -0,0 +1,131 @@
+'use strict';
+define(
+    [
+        'vent',
+        'marionette',
+        'backgrid',
+        'Activity/Blacklist/BlacklistCollection',
+        'Cells/SeriesTitleCell',
+        'Cells/QualityCell',
+        'Cells/RelativeDateCell',
+        'Activity/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: 'Activity/Blacklist/BlacklistLayoutTemplate',
+
+            regions: {
+                blacklist : '#x-blacklist',
+                toolbar   : '#x-toolbar',
+                pager     : '#x-pager'
+            },
+
+            columns:
+                [
+                    {
+                        name      : 'series',
+                        label     : 'Series',
+                        cell      : SeriesTitleCell
+                    },
+                    {
+                        name      : 'sourceTitle',
+                        label     : 'Source Title',
+                        cell      : 'string'
+                    },
+                    {
+                        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);
+                this.listenTo(vent, vent.Events.CommandComplete, this._commandComplete);
+            },
+
+            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/Activity/Blacklist/BlacklistLayoutTemplate.hbs

@@ -0,0 +1,11 @@
+<div id="x-toolbar"/>
+<div class="row">
+    <div class="col-md-12 table-responsive">
+        <div id="x-blacklist"/>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-12">
+        <div id="x-pager"/>
+    </div>
+</div>

src/UI/Activity/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/Activity/History/Details/HistoryDetailsAge.js

@@ -0,0 +1,19 @@
+'use strict';
+define(
+    [
+        'handlebars'
+    ], function (Handlebars) {
+
+        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));
+        });
+    });

src/UI/Activity/History/Details/HistoryDetailsLayout.js

@@ -0,0 +1,40 @@
+'use strict';
+define(
+    [
+        'jquery',
+        'vent',
+        'marionette',
+        'Activity/History/Details/HistoryDetailsView'
+    ], function ($, vent, Marionette, HistoryDetailsView) {
+
+        return 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 }));
+            },
+
+            _markAsFailed: function () {
+                var url = window.NzbDrone.ApiRoot + '/history/failed';
+                var data = {
+                    id: this.model.get('id')
+                };
+
+                $.ajax({
+                    url: url,
+                    type: 'POST',
+                    data: data
+                });
+
+                vent.trigger(vent.Commands.CloseModalCommand);
+            }
+        });
+    });

src/UI/Activity/History/Details/HistoryDetailsLayoutTemplate.hbs

@@ -0,0 +1,22 @@
+<div class="modal-content">
+    <div class="history-detail-modal">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+
+            <h3>
+                {{#if_eq eventType compare="grabbed"}}Grabbed{{/if_eq}}
+                {{#if_eq eventType compare="downloadFailed"}}Download Failed{{/if_eq}}
+                {{#if_eq eventType compare="downloadFolderImported"}}Episode Imported{{/if_eq}}
+                {{#if_eq eventType compare="episodeFileDeleted"}}Episode File Deleted{{/if_eq}}
+            </h3>
+
+        </div>
+        <div class="modal-body">
+
+        </div>
+        <div class="modal-footer">
+            {{#if_eq eventType compare="grabbed"}}<button class="btn btn-danger x-mark-as-failed">mark as failed</button>{{/if_eq}}
+            <button class="btn" data-dismiss="modal">close</button>
+        </div>
+    </div>
+</div>

src/UI/Activity/History/Details/HistoryDetailsView.js

@@ -0,0 +1,11 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'Activity/History/Details/HistoryDetailsAge'
+    ], function (Marionette) {
+
+        return Marionette.ItemView.extend({
+            template: 'Activity/History/Details/HistoryDetailsViewTemplate'
+        });
+    });

src/UI/Activity/History/Details/HistoryDetailsViewTemplate.hbs

@@ -0,0 +1,98 @@
+{{#if_eq eventType compare="grabbed"}}
+<dl class="dl-horizontal">
+
+    <dt>Name:</dt>
+    <dd>{{sourceTitle}}</dd>
+
+    {{#with data}}
+    {{#if indexer}}
+    <dt>Indexer:</dt>
+    <dd>{{indexer}}</dd>
+    {{/if}}
+
+    {{#if releaseGroup}}
+    <dt>Release Group:</dt>
+    <dd>{{releaseGroup}}</dd>
+    {{/if}}
+
+    {{#if nzbInfoUrl}}
+    <dt>Info:</dt>
+    <dd><a href="{{nzbInfoUrl}}">{{nzbInfoUrl}}</a></dd>
+    {{/if}}
+
+    {{#if downloadClient}}
+    <dt>Download Client:</dt>
+    <dd>{{downloadClient}}</dd>
+    {{/if}}
+
+    {{#if downloadClientId}}
+    <dt>Download Client ID:</dt>
+    <dd>{{downloadClientId}}</dd>
+    {{/if}}
+
+    {{#if age}}
+    {{historyAge}}
+    {{/if}}
+    {{/with}}
+</dl>
+{{/if_eq}}
+
+{{#if_eq eventType compare="downloadFailed"}}
+<dl class="dl-horizontal">
+
+    <dt>Name:</dt>
+    <dd>{{sourceTitle}}</dd>
+
+    {{#with data}}
+    <dt>Message:</dt>
+    <dd>{{message}}</dd>
+    {{/with}}
+</dl>
+{{/if_eq}}
+
+{{#if_eq eventType compare="downloadFolderImported"}}
+<dl class="dl-horizontal">
+
+    {{#if sourceTitle}}
+    <dt>Name:</dt>
+    <dd>{{sourceTitle}}</dd>
+    {{/if}}
+
+    {{#with data}}
+    {{#if droppedPath}}
+    <dt>Source:</dt>
+    <dd>{{droppedPath}}</dd>
+    {{/if}}
+
+    {{#if importedPath}}
+    <dt>Imported To:</dt>
+    <dd>{{importedPath}}</dd>
+    {{/if}}
+    {{/with}}
+</dl>
+{{/if_eq}}
+
+{{#if_eq eventType compare="episodeFileDeleted"}}
+<dl class="dl-horizontal">
+
+    <dt>Path:</dt>
+    <dd>{{sourceTitle}}</dd>
+
+    {{#with data}}
+    <dt>Reason:</dt>
+    <dd>
+        {{#if_eq reason compare="Manual"}}
+            File was deleted by via UI
+        {{/if_eq}}
+
+        {{#if_eq reason compare="MissingFromDisk"}}
+            NzbDrone was unable to find the file on disk so it was removed
+        {{/if_eq}}
+
+        {{#if_eq reason compare="Upgrade"}}
+            File was deleted to import an upgrade
+        {{/if_eq}}
+    </dd>
+    {{/with}}
+</dl>
+{{/if_eq}}

src/UI/Activity/History/HistoryCollection.js

@@ -0,0 +1,70 @@
+'use strict';
+define(
+    [
+        'Activity/History/HistoryModel',
+        'backbone.pageable',
+        'Mixins/AsFilteredCollection',
+        'Mixins/AsSortedCollection',
+        'Mixins/AsPersistedStateCollection'
+    ], function (HistoryModel, PageableCollection, AsFilteredCollection, AsSortedCollection, AsPersistedStateCollection) {
+        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;
+            }
+        });
+
+        Collection = AsFilteredCollection.call(Collection);
+        Collection = AsSortedCollection.call(Collection);
+        return AsPersistedStateCollection.call(Collection);
+    });

src/UI/Activity/History/HistoryDetailsCell.js

@@ -0,0 +1,27 @@
+'use strict';
+
+define(
+    [
+        'vent',
+        'Cells/NzbDroneCell'
+    ], function (vent, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            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 });
+            }
+        });
+    });

src/UI/Activity/History/HistoryLayout.js

@@ -0,0 +1,173 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Activity/History/HistoryCollection',
+        'Cells/EventTypeCell',
+        'Cells/SeriesTitleCell',
+        'Cells/EpisodeNumberCell',
+        'Cells/EpisodeTitleCell',
+        'Activity/History/HistoryQualityCell',
+        'Cells/RelativeDateCell',
+        'Activity/History/HistoryDetailsCell',
+        'Shared/Grid/Pager',
+        'Shared/Toolbar/ToolbarLayout',
+        'Shared/LoadingView'
+    ], function (Marionette,
+                 Backgrid,
+                 HistoryCollection,
+                 EventTypeCell,
+                 SeriesTitleCell,
+                 EpisodeNumberCell,
+                 EpisodeTitleCell,
+                 HistoryQualityCell,
+                 RelativeDateCell,
+                 HistoryDetailsCell,
+                 GridPager,
+                 ToolbarLayout,
+                 LoadingView) {
+        return Marionette.Layout.extend({
+            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' });
+                this.listenTo(this.collection, 'sync', this._showTable);
+            },
+
+            onShow: function () {
+                this.history.show(new LoadingView());
+                this._showToolbar();
+            },
+
+            _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 () {
+                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
+                            }
+                        ]
+                };
+
+                this.toolbar.show(new ToolbarLayout({
+                    right  :
+                        [
+                            filterOptions
+                        ],
+                    context: this
+                }));
+            },
+
+            _setFilter: function(buttonContext) {
+                var mode = buttonContext.model.get('key');
+
+                this.collection.state.currentPage = 1;
+                var promise = this.collection.setFilterMode(mode);
+
+                if (buttonContext) {
+                    buttonContext.ui.icon.spinForPromise(promise);
+                }
+            }
+        });
+    });

src/UI/Activity/History/HistoryLayoutTemplate.hbs

@@ -0,0 +1,11 @@
+<div id="x-history-toolbar"/>
+<div class="row">
+    <div class="col-md-12 table-responsive">
+        <div id="x-history"/>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md-12">
+        <div id="x-history-pager"/>
+    </div>
+</div>

src/UI/Activity/History/HistoryModel.js

@@ -0,0 +1,16 @@
+'use strict';
+define(
+    [
+        'backbone',
+        'Series/SeriesModel',
+        'Series/EpisodeModel'
+    ], function (Backbone, SeriesModel, EpisodeModel) {
+        return Backbone.Model.extend({
+            parse: function (model) {
+                model.series = new SeriesModel(model.series);
+                model.episode = new EpisodeModel(model.episode);
+                model.episode.set('series', model.series);
+                return model;
+            }
+        });
+    });

src/UI/Activity/History/HistoryQualityCell.js

@@ -0,0 +1,36 @@
+'use strict';
+define(
+    [
+        'Cells/NzbDroneCell'
+    ], function (NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className: 'history-quality-cell',
+
+            render: function () {
+
+                var title = '';
+                var quality = this.model.get('quality');
+                var revision = quality.revision;
+
+                if (revision.real && revision.real > 0) {
+                    title += ' REAL';
+                }
+
+                if (revision.version && revision.version > 1) {
+                    title += ' PROPER';
+                }
+
+                title = title.trim();
+
+                if (this.model.get('qualityCutoffNotMet')) {
+                    this.$el.html('<span class="badge badge-inverse" title="{0}">{1}</span>'.format(title, quality.quality.name));
+                }
+                else {
+                    this.$el.html('<span class="badge" title="{0}">{1}</span>'.format(title, quality.quality.name));
+                }
+
+                return this;
+            }
+        });
+    });

src/UI/Activity/Queue/QueueCollection.js

@@ -0,0 +1,31 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'backbone',
+        'backbone.pageable',
+        'Activity/Queue/QueueModel',
+        'Mixins/backbone.signalr.mixin'
+    ], function (_, Backbone, PageableCollection, QueueModel) {
+        var QueueCollection = PageableCollection.extend({
+            url  : window.NzbDrone.ApiRoot + '/queue',
+            model: QueueModel,
+
+            state: {
+                pageSize: 15
+            },
+
+            mode: 'client',
+
+            findEpisode: function (episodeId) {
+                return _.find(this.fullCollection.models, function (queueModel) {
+                    return queueModel.get('episode').id === episodeId;
+                });
+            }
+        });
+
+        var collection = new QueueCollection().bindSignalR();
+        collection.fetch();
+
+        return collection;
+    });

src/UI/Activity/Queue/QueueLayout.js

@@ -0,0 +1,93 @@
+'use strict';
+define(
+    [
+        'marionette',
+        'backgrid',
+        'Activity/Queue/QueueCollection',
+        'Cells/SeriesTitleCell',
+        'Cells/EpisodeNumberCell',
+        'Cells/EpisodeTitleCell',
+        'Cells/QualityCell',
+        'Activity/Queue/QueueStatusCell',
+        'Activity/Queue/TimeleftCell',
+        'Shared/Grid/Pager'
+    ], function (Marionette,
+                 Backgrid,
+                 QueueCollection,
+                 SeriesTitleCell,
+                 EpisodeNumberCell,
+                 EpisodeTitleCell,
+                 QualityCell,
+                 QueueStatusCell,
+                 TimeleftCell,
+                 GridPager) {
+        return Marionette.Layout.extend({
+            template: 'Activity/Queue/QueueLayoutTemplate',
+
+            regions: {
+                table: '#x-queue',
+                pager: '#x-queue-pager'
+            },
+
+            columns:
+                [
+                    {
+                        name      : 'status',
+                        label     : '',
+                        cell      : QueueStatusCell,
+                        cellValue : 'this'
+                    },
+                    {
+                        name      : 'series',
+                        label     : 'Series',
+                        cell      : SeriesTitleCell,
+                        sortable  : false
+                    },
+                    {
+                        name      : 'episode',
+                        label     : 'Episode',
+                        cell      : EpisodeNumberCell,
+                        sortable  : false
+                    },
+                    {
+                        name      : 'episode',
+                        label     : 'Episode Title',
+                        cell      : EpisodeTitleCell,
+                        sortable  : false
+                    },
+                    {
+                        name      : 'quality',
+                        label     : 'Quality',
+                        cell      : QualityCell,
+                        sortable  : false
+                    },
+                    {
+                        name      : 'timeleft',
+                        label     : 'Timeleft',
+                        cell      : TimeleftCell,
+                        cellValue : 'this'
+                    }
+                ],
+
+            initialize: function () {
+                this.listenTo(QueueCollection, 'sync', this._showTable);
+            },
+
+            onShow: function () {
+                this._showTable();
+            },
+
+            _showTable: function () {
+                this.table.show(new Backgrid.Grid({
+                    columns   : this.columns,
+                    collection: QueueCollection,
+                    className : 'table table-hover'
+                }));
+
+                this.pager.show(new GridPager({
+                    columns   : this.columns,
+                    collection: QueueCollection
+                }));
+            }
+        });
+    });

src/UI/Activity/Queue/QueueLayoutTemplate.hbs

@@ -0,0 +1,11 @@
+<div class="row">
+    <div class="col-md-12 table-responsive">
+        <div id="x-queue"/>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-md-12">
+        <div id="x-queue-pager"/>
+    </div>
+</div>

src/UI/Activity/Queue/QueueModel.js

@@ -0,0 +1,16 @@
+'use strict';
+define(
+    [
+        'backbone',
+        'Series/SeriesModel',
+        'Series/EpisodeModel'
+    ], function (Backbone, SeriesModel, EpisodeModel) {
+        return Backbone.Model.extend({
+            parse: function (model) {
+                model.series = new SeriesModel(model.series);
+                model.episode = new EpisodeModel(model.episode);
+                model.episode.set('series', model.series);
+                return model;
+            }
+        });
+    });

src/UI/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,89 @@
+'use strict';
+
+define(
+    [
+        'marionette',
+        'Cells/NzbDroneCell'
+    ], function (Marionette, NzbDroneCell) {
+        return NzbDroneCell.extend({
+
+            className : 'queue-status-cell',
+            template  : 'Activity/Queue/QueueStatusCellTemplate',
+
+            render: function () {
+                this.$el.empty();
+
+                if (this.cellValue) {
+                    var status = this.cellValue.get('status').toLowerCase();
+                    var trackedDownloadStatus = this.cellValue.get('trackedDownloadStatus').toLowerCase();
+                    var icon = 'icon-nd-downloading';
+                    var title = 'Downloading';
+                    var itemTitle = this.cellValue.get('title');
+                    var content = itemTitle;
+
+                    if (status === 'paused') {
+                        icon = 'icon-pause';
+                        title = 'Paused';
+                    }
+
+                    if (status === 'queued') {
+                        icon = 'icon-cloud';
+                        title = 'Queued';
+                    }
+
+                    if (status === 'completed') {
+                        icon = 'icon-inbox';
+                        title = 'Downloaded';
+                    }
+                    
+                    if (status === 'pending') {
+                        icon = 'icon-time';
+                        title = 'Pending';
+                    }
+
+                    if (status === 'failed') {
+                        icon = 'icon-nd-download-failed';
+                        title = 'Download failed';
+                    }
+
+                    if (status === 'warning') {
+                        icon = 'icon-nd-download-warning';
+                        title = 'Download warning: check download client for more details';
+                    }
+
+                    if (trackedDownloadStatus === 'warning') {
+                        icon += ' icon-nd-warning';
+
+                        this.templateFunction = Marionette.TemplateCache.get(this.template);
+                        content = this.templateFunction(this.cellValue.toJSON());
+                    }
+
+                    if (trackedDownloadStatus === 'error') {
+                        if (status === 'completed') {
+                            icon = 'icon-nd-import-failed';
+                            title = 'Import failed: ' + itemTitle;
+                        }
+                        else {
+                            icon = 'icon-nd-download-failed';
+                            title = 'Download failed';
+                        }
+
+                        this.templateFunction = Marionette.TemplateCache.get(this.template);
+                        content = this.templateFunction(this.cellValue.toJSON());
+                    }
+
+                    this.$el.html('<i class="{0}"></i>'.format(icon));
+                    this.$el.popover({
+                        content  : content,
+                        html     : true,
+                        trigger  : 'hover',
+                        title    : title,
+                        placement: 'right',
+                        container: this.$el
+                    });
+                }
+
+                return this;
+            }
+        });
+    });

src/UI/Activity/Queue/QueueStatusCellTemplate.hbs

@@ -0,0 +1,8 @@
+{{#each statusMessages}}
+    {{title}}
+    <ul>
+        {{#each messages}}
+            <li>{{this}}</li>
+        {{/each}}
+    </ul>
+{{/each}}

src/UI/Activity/Queue/QueueView.js

@@ -0,0 +1,46 @@
+'use strict';
+define(
+    [
+        'underscore',
+        'marionette',
+        'Activity/Queue/QueueCollection'
+    ], function (_, Marionette, QueueCollection) {
+        return Marionette.ItemView.extend({
+            tagName: 'span',
+
+            initialize: function () {
+                this.listenTo(QueueCollection, 'sync', this.render);
+                QueueCollection.fetch();
+            },
+
+            render: function () {
+                this.$el.empty();
+
+                if (QueueCollection.length === 0) {
+                    return this;
+                }
+
+                var count = QueueCollection.fullCollection.length;
+                var label = 'label-info';
+
+                var errors = QueueCollection.fullCollection.some(function (model) {
+                    return model.get('trackedDownloadStatus').toLowerCase() === 'error';
+                });
+
+                var warnings = QueueCollection.fullCollection.some(function (model) {
+                    return model.get('trackedDownloadStatus').toLowerCase() === 'warning';
+                });
+
+                if (errors) {
+                    label = 'label-danger';
+                }
+
+                else if (warnings) {
+                    label = 'label-warning';
+                }
+
+                this.$el.html('<span class="label {0}">{1}</span>'.format(label, count));
+                return this;
+            }
+        });
+    });

src/UI/Activity/Queue/TimeleftCell.js

@@ -0,0 +1,42 @@
+'use strict';
+
+define(
+    [
+        'Cells/NzbDroneCell',
+        'filesize',
+        'moment'
+    ], function (NzbDroneCell, fileSize, moment) {
+        return NzbDroneCell.extend({
+
+            className: 'timeleft-cell',
+
+            render: function () {
+                this.$el.empty();
+
+                if (this.cellValue) {
+
+                    //If the release is pending we want to use the timeleft as the time it will be processed at
+                    if (this.cellValue.get('status').toLowerCase() === 'pending') {
+                        this.$el.html('-');
+                        this.$el.attr('title', 'Will be processed {0}'.format(moment(this.cellValue.get('estimatedCompletionTime')).calendar()));
+                        this.$el.attr('data-container', 'body');
+
+                        return this;
+                    }
+
+                    var timeleft = this.cellValue.get('timeleft');
+                    var totalSize = fileSize(this.cellValue.get('size'), 1, false);
+                    var remainingSize = fileSize(this.cellValue.get('sizeleft'), 1, false);
+
+                    if (timeleft === undefined) {
+                        this.$el.html('-');
+                    }
+                    else {
+                        this.$el.html('<span title="{1} / {2}">{0}</span>'.format(timeleft, remainingSize, totalSize));
+                    }
+                }
+
+                return this;
+            }
+        });
+    });

src/UI/Activity/activity.less

@@ -0,0 +1,4 @@
+
+.queue-status-cell .popover {
+  max-width: 800px;
+}