Datatables wired up on series grid

This commit is contained in:
Mark McDowall 2013-02-13 00:32:17 -06:00 committed by kay.one
parent 2a72063c19
commit 1671fd1776
24 changed files with 12335 additions and 45 deletions

View File

@ -56,7 +56,7 @@ namespace NzbDrone.Api
.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));

View File

@ -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" />

View File

@ -37,7 +37,7 @@ namespace NzbDrone.Api.Series
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 @@ namespace NzbDrone.Api.Series
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 @@ namespace NzbDrone.Api.Series
private Response UpdateSeries()
{
var request = Request.Body.FromJson<SeriesModel>();
var request = Request.Body.FromJson<SeriesResource>();
var series = _seriesProvider.GetSeries(request.Id);

View File

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

View File

@ -61,6 +61,7 @@ namespace NzbDrone.Core.Repository
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; }

View File

@ -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" />

View File

@ -23,7 +23,8 @@ namespace NzbDrone.Web.Backbone.NzbDrone
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));

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 440 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 411 B

View File

@ -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;
}

File diff suppressed because it is too large Load Diff

View File

@ -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');
}
}
}
}
});

View File

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

View File

@ -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: {

View File

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

View File

@ -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>

View File

@ -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"
}
]
});
}
});

View File

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

View File

@ -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>';
});
}

View File

@ -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>