Finished Series Index Table formatting

UI/Index.html

@@ -104,6 +104,7 @@
 <script src="/Mixins/tablesorter.extensions.js"></script>
 <script src="/Mixins/spoon.js"></script>
 <script src="/Mixins/backbone.modelbinder.mixin.js"></script>
+<script src="/Mixins/backbone.Backgrid.mixin.js"></script>
 
 <script data-main="/app" src="/JsLibraries/require.js"></script>
 <script src="/Routing.js"></script>

UI/Mixins/backbone.Backgrid.mixin.js

@@ -0,0 +1,83 @@
+Backgrid.SeriesStatusCell = Backgrid.Cell.extend({
+    className: "series-status-cell",
+
+    render: function () {
+        this.$el.empty();
+        var monitored = this.model.get('monitored');
+        var status = this.model.get('status');
+
+        if (!monitored) {
+            this.$el.html('<i class="icon-pause grid-icon" title="Not Monitored"></i>');
+        }
+        else if (status === 0) {
+            this.$el.html('<i class="icon-play grid-icon" title="Continuing"></i>');
+        }
+
+        else {
+            this.$el.html('<i class="icon-stop grid-icon" title="Ended"></i>');
+        }
+
+        return this;
+    }
+});
+
+Backgrid.AirDateCell = Backgrid.Cell.extend({
+    className: "air-date-cell",
+
+    render: function () {
+        this.$el.empty();
+        var airDate = this.model.get(this.column.get("name"));
+
+        this.$el.html(bestDateString(airDate));
+
+        return this;
+    }
+});
+
+Backgrid.EpisodeProgressCell = Backgrid.Cell.extend({
+    className: "episode-progress-cell",
+    template: 'Series/EpisodeProgressTemplate',
+
+    render: function () {
+        var data = this.model.toJSON();
+        var html = Marionette.Renderer.render(this.template, data);
+        this.$el.html(html);
+
+        return this;
+    }
+});
+
+Backgrid.ControlsColumnCell = Backgrid.Cell.extend({
+    className: "controls-cell",
+    template: 'Series/Index/Table/ControlsColumnTemplate',
+
+    render: function () {
+        var data = this.model.toJSON();
+        var html = Marionette.Renderer.render(this.template, data);
+        this.$el.html(html);
+
+        return this;
+    }
+});
+
+Backgrid.SeriesIndexTableRow = Backgrid.Row.extend({
+    events: {
+        'click .x-edit'  : 'editSeries',
+        'click .x-remove': 'removeSeries'
+    },
+
+    editSeries: function () {
+        var view = new NzbDrone.Series.Edit.EditSeriesView({ model: this.model});
+
+        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            view: view
+        });
+    },
+
+    removeSeries: function () {
+        var view = new NzbDrone.Series.Delete.DeleteSeriesView({ model: this.model });
+        NzbDrone.vent.trigger(NzbDrone.Events.OpenModalDialog, {
+            view: view
+        });
+    }
+});

UI/Series/EpisodeProgressTemplate.html

@@ -0,0 +1,5 @@
+<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>

UI/Series/Index/SeriesIndexLayout.js

@@ -58,27 +58,27 @@ define([
                         name: 'nextAiring',
                         label: 'Next Airing',
                         editable: false,
-                        cell: 'datetime',
+                        cell: 'airDate'
-                        formatter: new Backgrid.AirDateFormatter()
                     },
                     {
                         name: 'episodes',
                         label: 'Episodes',
                         editable: false,
                         sortable: false,
-                        cell: 'string'
+                        cell: 'episodeProgress'
                     },
                     {
                         name: 'edit',
                         label: '',
                         editable: false,
                         sortable: false,
-                        cell: 'string'
+                        cell: 'controlsColumn'
                     }
                 ];
 
                 this.series.show(new Backgrid.Grid(
                     {
+                        row: Backgrid.SeriesIndexTableRow,
                         columns : columns,
                         collection : this.seriesCollection,
                         className: 'table table-hover'

UI/Series/Index/Table/ControlsColumnTemplate.html

@@ -0,0 +1,2 @@
+<i class="icon-cog x-edit" title="Edit Series"></i>
+<i class="icon-remove x-remove" title="Delete Series"></i>

UI/app.js

@@ -71,49 +71,6 @@ define('app', function () {
 
         console.log('starting application');
 
-        //TODO: move these out of here
-        Backgrid.SeriesStatusCell = Backgrid.Cell.extend({
-            className: "series-status-cell",
-
-            render: function () {
-                this.$el.empty();
-                var monitored = this.model.get('monitored');
-                var status = this.model.get('status');
-
-                if (!monitored) {
-                    this.$el.html('<i class="icon-pause grid-icon" title="Not Monitored"></i>');
-                }
-                else if (status === 0) {
-                    this.$el.html('<i class="icon-play grid-icon" title="Continuing"></i>');
-                }
-
-                else {
-                    this.$el.html('<i class="icon-stop grid-icon" title="Ended"></i>');
-                }
-
-                return this;
-            }
-        });
-
-        var AirDateFormatter = Backgrid.AirDateFormatter = function () {};
-        AirDateFormatter.prototype = new Backgrid.CellFormatter();
-        _.extend(AirDateFormatter.prototype, {
-            /**
-             Converts any value to a string using Ecmascript's implicit type
-             conversion. If the given value is `null` or `undefined`, an empty string is
-             returned instead.
-
-             @member Backgrid.StringFormatter
-             @param {*} rawValue
-             @return {string}
-             */
-            fromRaw: function (rawValue) {
-                return 'Hello World';
-
-                if (_.isUndefined(rawValue) || _.isNull(rawValue)) return '';
-                return rawValue + '';
-            }
-        });
     });
 
     NzbDrone.addRegions({
@@ -122,7 +79,6 @@ define('app', function () {
         notificationRegion: '#notification-region'
     });
 
-
     window.NzbDrone.start();
 
     return NzbDrone;