Datatables wired up on series grid

NzbDrone.Api/Bootstrapper.cs

@@ -56,7 +56,7 @@ public static void InitializeAutomapper()
                   .ForMember(dest => dest.QualityTypeId, opt => opt.MapFrom(src => src.Id));
 
             //Series
-            Mapper.CreateMap<Core.Repository.Series, SeriesModel>()
+            Mapper.CreateMap<Core.Repository.Series, SeriesResource>()
                   .ForMember(dest => dest.Id, opt => opt.MapFrom(src => src.SeriesId))
                   .ForMember(dest => dest.CustomStartDate, opt => opt.ResolveUsing<NullableDatetimeToString>().FromMember(src => src.CustomStartDate))
                   .ForMember(dest => dest.BacklogSetting, opt => opt.MapFrom(src => (Int32)src.BacklogSetting));

NzbDrone.Api/NzbDrone.Api.csproj

@@ -97,7 +97,7 @@
     <Compile Include="Extentions\Serializer.cs" />
     <Compile Include="Resolvers\NullableDatetimeToString.cs" />
     <Compile Include="RootFolders\RootFolderModule.cs" />
-    <Compile Include="Series\SeriesModel.cs" />
+    <Compile Include="Series\SeriesResource.cs" />
     <Compile Include="Series\SeriesModule.cs" />
     <Compile Include="Series\SeriesLookupModule.cs" />
     <Compile Include="ErrorManagment\ApiException.cs" />

NzbDrone.Api/Series/SeriesModule.cs

@@ -37,7 +37,7 @@ public SeriesModule(SeriesProvider seriesProvider, JobProvider jobProvider)
         private Response AllSeries()
         {
             var series = _seriesProvider.GetAllSeriesWithEpisodeCount().ToList();
-            var seriesModels = Mapper.Map<List<Core.Repository.Series>, List<SeriesModel>>(series);
+            var seriesModels = Mapper.Map<List<Core.Repository.Series>, List<SeriesResource>>(series);
 
             return seriesModels.AsResponse();
         }
@@ -45,7 +45,7 @@ private Response AllSeries()
         private Response GetSeries(int id)
         {
             var series = _seriesProvider.GetSeries(id);
-            var seriesModels = Mapper.Map<Core.Repository.Series, SeriesModel>(series);
+            var seriesModels = Mapper.Map<Core.Repository.Series, SeriesResource>(series);
 
             return seriesModels.AsResponse();
         }
@@ -67,7 +67,7 @@ private Response AddSeries()
 
         private Response UpdateSeries()
         {
-            var request = Request.Body.FromJson<SeriesModel>();
+            var request = Request.Body.FromJson<SeriesResource>();
 
             var series = _seriesProvider.GetSeries(request.Id);
 

NzbDrone.Api/Series/SeriesResource.cs

@@ -7,7 +7,7 @@
 
 namespace NzbDrone.Api.Series
 {
-    public class SeriesModel
+    public class SeriesResource
     {
         public Int32 Id { get; set; }
 

NzbDrone.Core/Repository/Series.cs

@@ -61,6 +61,7 @@ public class Series
 
         public string TvRageTitle { get; set; }
 
+        //Todo: This should be a double since there are timezones that aren't on a full hour offset
         public int UtcOffset { get; set; }
 
         public DateTime? FirstAired { get; set; }

NzbDrone.Web/NzbDrone.Web.csproj

@@ -209,6 +209,7 @@
     <Content Include="_backboneApp\AddSeries\RootFolders\RootDirItemTemplate.html" />
     <Content Include="_backboneApp\AddSeries\RootFolders\RootDirModel.js" />
     <Content Include="_backboneApp\AddSeries\RootFolders\RootDirCollection.js" />
+    <Content Include="_backboneApp\Content\jquery.dataTables.bootstrap.css" />
     <Content Include="_backboneApp\JsLibraries\backbone.modelbinder.js" />
     <Content Include="_backboneApp\AddSeries\New\AddNewSeriesTemplate.html" />
     <Content Include="_backboneApp\AddSeries\New\AddNewSeriesView.js" />
@@ -216,6 +217,9 @@
     <Content Include="_backboneApp\AddSeries\SearchResultModel.js" />
     <Content Include="_backboneApp\AddSeries\SearchResultCollection.js" />
     <Content Include="_backboneApp\Content\Intelisense\bootstrap.css" />
+    <Content Include="_backboneApp\JsLibraries\jquery.dataTables.extensions.js" />
+    <Content Include="_backboneApp\JsLibraries\jquery.dataTables-1.10.0-dev.js" />
+    <Content Include="_backboneApp\JsLibraries\jquery.dataTables.bootstrap.pagination.js" />
     <Content Include="_backboneApp\Quality\qualityProfileModel.js" />
     <Content Include="_backboneApp\Quality\qualityProfileCollection.js" />
     <Content Include="_backboneApp\Quality\qualityTypeModel.js" />

NzbDrone.Web/_backboneApp/CassetteConfiguration.cs

@@ -23,7 +23,8 @@ public void Configure(BundleCollection bundles)
                 APP_PATH + "\\Content\\Bootstrap\\bootstrap.less",
                 APP_PATH + "\\Content\\base.css",
                 APP_PATH + "\\Content\\menu.css",
-                APP_PATH + "\\AddSeries\\addSeries.css"
+                APP_PATH + "\\AddSeries\\addSeries.css",
+                APP_PATH + "\\Content\\jquery.dataTables.bootstrap.css"
             },
                 bundle => bundle.AddReference("/" + FONTS));
 

NzbDrone.Web/_backboneApp/Content/Bootstrap/mixins.less

@@ -579,6 +579,7 @@
 
     .row {
       margin-left: @gridGutterWidth * -1;
+	  margin-right: @gridGutterWidth * -1;
       .clearfix();
     }
 

NzbDrone.Web/_backboneApp/Content/jquery.dataTables.bootstrap.css

@@ -0,0 +1,110 @@
+div.dataTables_length {
+	/*float: right;
+	margin: 10px;*/
+	display: inline-block;
+	margin-right: 30px;
+	padding-top: 5px;
+}
+
+div.bottomRight {
+	float: right;
+}
+
+div.dataTables_length label {
+	text-align: left;
+	display: inline-block;
+	padding-bottom: 0px;
+}
+
+div.dataTables_length select {
+	width: 75px;
+}
+
+div.dataTables_filter label {
+	float: right;
+}
+
+div.dataTables_info {
+	padding-top: 8px;
+    display: inline-block;
+}
+
+div.dataTables_paginate {
+	float: right;
+	margin: 0;
+    display: inline-block;
+}
+
+table.table {
+	clear: both;
+	margin-bottom: 6px !important;
+}
+
+.dataTables_wrapper {
+	position: relative;
+}
+
+table.table thead .sorting,
+table.table thead .sorting_asc,
+table.table thead .sorting_desc,
+table.table thead .sorting_asc_disabled,
+table.table thead .sorting_desc_disabled {
+	cursor: pointer;
+	*cursor: hand;
+}
+
+/*table.table thead .sorting:after {
+    width: 12px;
+    font-family: FontAwesome;
+    content: "\f106 \f107";
+    -webkit-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+}
+
+table.table thead .sorting_asc:after {
+    font-family: FontAwesome;
+    content: "\f106";
+}
+
+table.table thead .sorting_desc:after {
+    font-family: FontAwesome;
+    content: "\f107";
+}*/
+
+table.table thead .sorting { background: url('./images/sort_both.png') no-repeat center right; }
+table.table thead .sorting_asc { background: url('./images/sort_asc.png') no-repeat center right; }
+table.table thead .sorting_desc { background: url('./images/sort_desc.png') no-repeat center right; }
+
+table.table thead .sorting_asc_disabled { background: url('./images/sort_asc_disabled.png') no-repeat center right; }
+table.table thead .sorting_desc_disabled { background: url('./images/sort_desc_disabled.png') no-repeat center right; }
+
+table.dataTable th:active {
+	outline: none;
+}
+
+/*table.dataTable tr.odd { background-color: #F9F9F9; }*/
+
+/*
+ * Processing indicator
+ */
+.dataTables_processing {
+	position: absolute;
+	top: 50px;
+	left: 50%;
+	width: 250px;
+	height: 30px;
+	line-height: 30px;
+	margin-left: -125px;
+	padding: 0px 0 0px 0;
+	border: 1px solid #ddd;
+	text-align: center;
+	color: #999;
+	font-size: 14px;
+	background-color: white;
+	clear: both;
+}
+
+.dataTables_searchButton {
+    margin-left: 4px;
+}

NzbDrone.Web/_backboneApp/JsLibraries/jquery.dataTables.bootstrap.pagination.js

@@ -0,0 +1,97 @@
+/// <reference path="jquery.dataTables-1.10.0-dev.js" />
+/// <reference path="jquery.dataTables.extensions.js" />
+
+/* Default class modification */
+$.extend($.fn.dataTableExt.oStdClasses, {
+    "sWrapper": "dataTables_wrapper form-horizontal"
+});
+
+/* API method to get paging information */
+$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
+    return {
+        "iStart": oSettings._iDisplayStart,
+        "iEnd": oSettings.fnDisplayEnd(),
+        "iLength": oSettings._iDisplayLength,
+        "iTotal": oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
+        "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
+    };
+};
+
+/* Bootstrap style pagination control */
+$.extend($.fn.dataTableExt.oPagination, {
+    "bootstrap": {
+        "fnInit": function (oSettings, nPaging, fnDraw) {
+            var oLang = oSettings.oLanguage.oPaginate;
+            var fnClickHandler = function (e) {
+                e.preventDefault();
+                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
+                    fnDraw(oSettings);
+                }
+            };
+
+            $(nPaging).addClass('pagination').append(
+				'<ul>' +
+					'<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
+					'<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
+				'</ul>'
+			);
+            var els = $('a', nPaging);
+            $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler);
+            $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);
+        },
+
+        "fnUpdate": function (oSettings, fnDraw) {
+            var iListLength = 5;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+            var an = oSettings.aanFeatures.p;
+            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
+
+            if (oPaging.iTotalPages < iListLength) {
+                iStart = 1;
+                iEnd = oPaging.iTotalPages;
+            }
+            else if (oPaging.iPage <= iHalf) {
+                iStart = 1;
+                iEnd = iListLength;
+            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
+                iStart = oPaging.iTotalPages - iListLength + 1;
+                iEnd = oPaging.iTotalPages;
+            } else {
+                iStart = oPaging.iPage - iHalf + 1;
+                iEnd = iStart + iListLength - 1;
+            }
+
+            for (i = 0, iLen = an.length ; i < iLen ; i++) {
+                // Remove the middle elements
+                $('li:gt(0)', an[i]).filter(':not(:last)').remove();
+
+                // Add the new list items and their event handlers
+                for (j = iStart ; j <= iEnd ; j++) {
+                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
+                    $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
+						.insertBefore($('li:last', an[i])[0])
+						.bind('click', function (e) {
+						    e.preventDefault();
+						    oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
+						    fnDraw(oSettings);
+						});
+                }
+
+                // Add / remove disabled classes from the static elements
+                if (oPaging.iPage === 0) {
+                    $('li:first', an[i]).addClass('disabled');
+                } else {
+                    $('li:first', an[i]).removeClass('disabled');
+                }
+
+                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
+                    $('li:last', an[i]).addClass('disabled');
+                } else {
+                    $('li:last', an[i]).removeClass('disabled');
+                }
+            }
+        }
+    }
+});

NzbDrone.Web/_backboneApp/JsLibraries/jquery.dataTables.extensions.js

@@ -0,0 +1,51 @@
+//Hidden title string sorting
+$.extend(jQuery.fn.dataTableExt.oSort, {
+    "title-string-pre": function (a) {
+        return a.match(/title="(.*?)"/)[1].toLowerCase();
+    },
+
+    "title-string-asc": function (a, b) {
+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+    },
+
+    "title-string-desc": function (a, b) {
+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+    }
+});
+
+
+//bestDateString sorting
+$.extend(jQuery.fn.dataTableExt.oSort, {
+    "best-date-pre": function (a) {
+        var match = a.match(/data-date="(.*?)"/)[1];
+
+        if (match === '')
+            return Date.create().addYears(100);
+
+        return Date.create(match);
+    },
+
+    "best-date-asc": function (a, b) {
+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+    },
+
+    "best-date-desc": function (a, b) {
+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+    }
+});
+
+
+//Skip articles sorting
+$.extend(jQuery.fn.dataTableExt.oSort, {
+    "skip-articles-pre": function (a) {
+        return a.replace(/^(the|an|a|) /i, "");
+    },
+
+    "skip-articles-asc": function (a, b) {
+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+    },
+
+    "skip-articles-desc": function (a, b) {
+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
+    }
+});

NzbDrone.Web/_backboneApp/Series/Index/IndexLayout.js

@@ -2,9 +2,11 @@
 /// <reference path="../../app.js" />
 /// <reference path="../SeriesCollection.js" />
 /// <reference path="SeriesItemView.js" />
+/// <reference path="../../JsLibraries/jquery.dataTables.bootstrap.pagination.js" />
 
 NzbDrone.Series.IndexLayout = Backbone.Marionette.Layout.extend({
     template: 'Series/Index/IndexLayoutTemplate',
+    className: "row",
     route: 'Series/index',
 
     ui: {

NzbDrone.Web/_backboneApp/Series/Index/IndexLayoutTemplate.html

@@ -1 +1 @@
-<div id="series" class="result-list span18 offset1"></div>
+<div id="series" class="result-list span20"></div>

NzbDrone.Web/_backboneApp/Series/Index/SeriesItemTemplate.html

@@ -3,10 +3,14 @@
 <td name="seasonCount"></td>
 <td name="qualityProfileName"></td>
 <td name="network"></td>
-<td>{{formatBestDate nextAiring}}</td>
-<td>
-{{{formatProgress episodeFileCount episodeCount}}}
+<!-- If only DT could access the backbone model -->
+<td><span 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>

NzbDrone.Web/_backboneApp/Series/Index/SeriesItemView.js

@@ -56,5 +56,42 @@ NzbDrone.Series.Index.SeriesCollectionView = Backbone.Marionette.CompositeView.e
     initialize: function() {
         this.qualityProfileCollection.fetch();
         this.itemViewOptions = { qualityProfiles: this.qualityProfileCollection };
+    },
+    
+    onRender: function() {
+        $('.table').dataTable({
+            sDom: "<'row'<'span14'l><'span6'f>r>t<'row'<'span14'i><'span6'p>>",
+            sPaginationType: "bootstrap",
+            bLengthChange: false,
+            bPaginate: false,
+            bFilter: false,
+            aaSorting: [[1, 'asc']],
+            bStateSave: true,
+            iCookieDuration: 60 * 60 * 24 * 365, //1 year
+            oLanguage: {
+                sInfo: "_TOTAL_ series",
+                sEmptyTable: "No series have been added"
+            },
+            aoColumns: [
+                {
+                    sType: "title-string"
+                },
+                null,
+                null,
+                null,
+                null,
+                {
+                    sType: "best-date"
+                },
+                {
+                    bSortable: false,
+                    sWidth: "125px"
+                },
+                {
+                    bSortable: false,
+                    sWidth: "50px"
+                }
+            ]
+        });
     }
 });

NzbDrone.Web/_backboneApp/Series/SeriesModel.js

@@ -1,3 +1,38 @@
 NzbDrone.Series.SeriesModel = Backbone.Model.extend({
-    url: NzbDrone.Constants.ApiRoot + '/series' 
+    url: NzbDrone.Constants.ApiRoot + '/series',
+    
+    mutators: {
+        bestDateString: function () {
+            var dateSource = this.get('nextAiring');
+
+            if (!dateSource) return '';
+
+            var date = Date.create(dateSource);
+
+            if (date.isYesterday()) return 'Yesterday';
+            if (date.isToday()) return 'Today';
+            if (date.isTomorrow()) return 'Tomorrow';
+            if (date.isToday()) return 'Today';
+            if (date.isBefore(Date.create().addDays(7))) return date.format('{Weekday}');
+
+            return date.format('{MM}/{dd}/{yyyy}');
+        },
+        
+        percentOfEpisodes: function () {
+            var episodeCount = this.get('episodeCount');
+            var episodeFileCount = this.get('episodeFileCount');
+
+            var percent = 100;
+
+            if (episodeCount > 0)
+                percent = episodeFileCount / episodeCount * 100;
+
+            return percent;
+        }
+    },
+
+    defaults: {
+        episodeFileCount: 0,
+        episodeCount: 0
+    }
 });

NzbDrone.Web/_backboneApp/app.js

@@ -63,6 +63,7 @@ NzbDrone.Router = Backbone.Marionette.AppRouter.extend({
     controller: new NzbDrone.Controller(),
     // "someMethod" must exist at controller.someMethod
     appRoutes: {
+        'series': 'series',
         'series/index': 'series',
         'series/add': 'addSeries',
         'series/add/:action(/:query)': 'addSeries',
@@ -93,33 +94,4 @@ NzbDrone.registerHelpers = function() {
 
         return '<i class="icon-stop grid-icon" title="Ended"></i>';
     });
-
-    Handlebars.registerHelper("formatBestDate", function (dateSource) {
-        if (!dateSource) return '';
-
-        var date = Date.create(dateSource);
-
-        if (date.isYesterday()) return 'Yesterday';
-        if (date.isToday()) return 'Today';
-        if (date.isTomorrow()) return 'Tomorrow';
-        if (date.isToday()) return 'Today';
-        if (date.isBefore(Date.create().addDays(7))) return date.format('{Weekday}');
-
-        return date.format('{MM}/{dd}/{yyyy}');
-    });
-
-    Handlebars.registerHelper("formatProgress", function (episodeFileCount, episodeCount) {
-        var percent = 100;
-
-        if (!episodeFileCount) episodeFileCount = 0;
-        if (!episodeCount) episodeCount = 0;
-
-        if (episodeCount > 0)
-            percent = episodeFileCount / episodeCount * 100;
-
-        var result = '<div class="progress">';
-        result += '<span class="progressbar-back-text">' + episodeFileCount + ' / ' + episodeCount + '</span>';
-        result += '<div class="bar" style="width: ' + percent + '%"><span class="progressbar-front-text">' + episodeFileCount + ' / ' + episodeCount + '</span></div>';
-        return result + '</div>';
-    });
 }

NzbDrone/NzbDrone.Console.csproj

@@ -78,10 +78,6 @@
     <Reference Include="EnvDTE80, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a">
       <EmbedInteropTypes>True</EmbedInteropTypes>
     </Reference>
-    <Reference Include="Ninject, Version=3.0.0.0, Culture=neutral, PublicKeyToken=c7192dc5380945e7, processorArchitecture=MSIL">
-      <SpecificVersion>False</SpecificVersion>
-      <HintPath>..\packages\Ninject.3.0.1.10\lib\net40\Ninject.dll</HintPath>
-    </Reference>
     <Reference Include="NLog, Version=2.0.0.0, Culture=neutral, PublicKeyToken=5120e14c03d0593c, processorArchitecture=MSIL">
       <HintPath>..\packages\NLog.2.0.0.2000\lib\net40\NLog.dll</HintPath>
     </Reference>