Added Episodes of Episodes Total progress bar to Series Grid.

pull/3113/head
Mark McDowall 14 years ago
parent 1411cac54a
commit fdfd0a2153

@ -235,20 +235,27 @@ namespace NzbDrone.Web.Controllers
{ {
var series = new List<SeriesModel>(); var series = new List<SeriesModel>();
seriesInDb.ForEach(s => series.Add(new SeriesModel foreach (var s in seriesInDb)
{ {
SeriesId = s.SeriesId, var episodesTotal = s.Episodes;
Title = s.Title,
AirsDayOfWeek = s.AirsDayOfWeek.ToString(), series.Add(new SeriesModel
Monitored = s.Monitored, {
Overview = s.Overview, SeriesId = s.SeriesId,
Path = s.Path, Title = s.Title,
QualityProfileId = s.QualityProfileId, AirsDayOfWeek = s.AirsDayOfWeek.ToString(),
QualityProfileName = s.QualityProfile.Name, Monitored = s.Monitored,
SeasonsCount = s.Seasons.Where(x => x.SeasonNumber > 0).Count(), Overview = s.Overview,
SeasonFolder = s.SeasonFolder, Path = s.Path,
Status = s.Status QualityProfileId = s.QualityProfileId,
})); QualityProfileName = s.QualityProfile.Name,
SeasonsCount = s.Seasons.Where(x => x.SeasonNumber > 0).Count(),
SeasonFolder = s.SeasonFolder,
Status = s.Status,
Episodes = episodesTotal.Where(e => e.EpisodeFileId != 0).Count(),
EpisodeTotal = episodesTotal.Count()
});
}
return series; return series;
} }

@ -18,6 +18,8 @@ namespace NzbDrone.Web.Models
public string AirsDayOfWeek { get; set; } public string AirsDayOfWeek { get; set; }
public string QualityProfileName { get; set; } public string QualityProfileName { get; set; }
public string Overview { get; set; } public string Overview { get; set; }
public int Episodes { get; set; }
public int EpisodeTotal { get; set; }
//View & Edit //View & Edit
[DisplayName("Path")] [DisplayName("Path")]

@ -640,7 +640,7 @@
<Content Include="Content\jquery-ui.custom.css" /> <Content Include="Content\jquery-ui.custom.css" />
<Content Include="Content\jquery.jgrowl.css" /> <Content Include="Content\jquery.jgrowl.css" />
<Content Include="Content\notibar.css" /> <Content Include="Content\notibar.css" />
<Content Include="Content\style.css" /> <Content Include="Content\Site.css" />
<Content Include="Content\Images\XbmcNotification.png" /> <Content Include="Content\Images\XbmcNotification.png" />
<Content Include="favicon.ico" /> <Content Include="favicon.ico" />
<Content Include="Global.asax" /> <Content Include="Global.asax" />

@ -6,6 +6,57 @@
Series Series
} }
<script>
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var innerdiv = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
innerdiv.css("width", width + "%");
div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<style>
/* progress bar container */
.progressbar
{
border:1px solid grey;
width:125px;
height:20px;
position:relative;
color:black;
}
/* color bar */
.progressbar div.progress
{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#065EFE;
}
/* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
@section ActionMenu{ @section ActionMenu{
@{Html.RenderPartial("SubMenu");} @{Html.RenderPartial("SubMenu");}
} }
@ -30,6 +81,13 @@
columns.Bound(o => o.QualityProfileName).Title("Quality"); columns.Bound(o => o.QualityProfileName).Title("Quality");
columns.Bound(o => o.Status); columns.Bound(o => o.Status);
columns.Bound(o => o.AirsDayOfWeek); columns.Bound(o => o.AirsDayOfWeek);
columns.Bound(o => o.Episodes).Title("Episodes").Width(125)
.ClientTemplate("<div id=\"progressbar_<#= SeriesId #>\" class=\"progressbar\">" +
"<div class=\"progressText\"></div>" +
"<div class=\"progress\">" +
"<span class=\"progressText\" style=\"width: 125px;\"></span>" +
"</div>" +
"</div>");
columns.Bound(o => o.Path); columns.Bound(o => o.Path);
columns.Command(commands => columns.Command(commands =>
{ {
@ -44,6 +102,7 @@
.ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit"); .ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit");
clientEvents.OnDataBinding("grid_bind"); clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound"); clientEvents.OnDataBound("grid_bound");
clientEvents.OnRowDataBound("grid_rowBound");
}) })
.Render();} .Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span> <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
@ -54,11 +113,22 @@
var windowElement; var windowElement;
function grid_edit(args) { function grid_edit(args) {
$(args.form) $(args.form)
.closest(".t-window") .closest(".t-window")
.data("tWindow") .data("tWindow")
.center(); .center();
} }
function grid_rowBound(e) {
var data = e.dataItem;
var seriesId = data.SeriesId;
var episodes = data.Episodes;
var episodeTotal = data.EpisodeTotal;
$("#progressbar_" + seriesId).episodeProgress(episodes, episodeTotal);
}
function openSeasonEditor(seriesId, seriesName) { function openSeasonEditor(seriesId, seriesName) {
windowElement = null; windowElement = null;

@ -1,49 +1,72 @@
<style> <script>
.quality-selectee { width: 75px; padding: 1px; padding-left: 5px; margin: 3px; } (function ($) {
.quality-selecting { background: #85AEF9; } $.fn.episodeProgress = function (episodes, totalEpisodes) {
.quality-selected { background: #065EFE; color: white; } return this.each(
</style> function () {
var div = $(this);
<fieldset class="quality-selectee"> var innerdiv = div.find(".progress");
SDTV
</fieldset>
<fieldset class="quality-selectee">
DVD
</fieldset>
<fieldset class="quality-selectee">
HDTV
</fieldset>
<fieldset class="quality-selectee"> var width = Math.round(episodes / totalEpisodes * 100);
WEBDL innerdiv.css("width", width + "%");
</fieldset> div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<fieldset class="quality-selectee"> <style>
Bluray720p /* progress bar container */
</fieldset> .progressbar
{
z-index: 1;
border:1px solid grey;
-khtml-border-radius:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:125px;
height:20px;
position:relative;
color:black;
}
<fieldset class="quality-selectee"> .progress
Bluray1080p {
</fieldset> z-index: 5;
}
<br /> /* color bar */
.progressbar div.progress
@Html.TextBox("result", "") {
position:absolute;
<script type="text/javascript"> width:0;
$('.quality-selectee').click(function () { height:100%;
if ($(this).hasClass('quality-selected')) overflow:hidden;
$(this).removeClass('quality-selected'); background-color:#065EFE;
else }
$(this).addClass('quality-selected'); /* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
result = ""; <div id="progressbar" class="progressbar">
$(".quality-selected").each(function () { <div class="progressText"></div>
result += this.firstChild.data + ","; <div class="progress">
}); <span class="progressText" style="width: 125px;"></span>
</div>
</div>
$("#result").empty().val(result); <script>
}); $("#progressbar").episodeProgress(100, 200);
</script> </script>
Loading…
Cancel
Save