Activity instead of History

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

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;
+            }
+        });
+    });