Added Episodes of Episodes Total progress bar to Series Grid.

This commit is contained in:
Mark McDowall 2011-06-01 20:36:30 -07:00
parent 1411cac54a
commit fdfd0a2153
5 changed files with 166 additions and 64 deletions

View File

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

View File

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

View File

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

View File

@ -6,6 +6,57 @@
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{
@{Html.RenderPartial("SubMenu");}
}
@ -30,6 +81,13 @@
columns.Bound(o => o.QualityProfileName).Title("Quality");
columns.Bound(o => o.Status);
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.Command(commands =>
{
@ -44,6 +102,7 @@
.ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit");
clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
clientEvents.OnRowDataBound("grid_rowBound");
})
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
@ -54,11 +113,22 @@
var windowElement;
function grid_edit(args) {
$(args.form)
.closest(".t-window")
.data("tWindow")
.center();
}
$(args.form)
.closest(".t-window")
.data("tWindow")
.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) {
windowElement = null;

View File

@ -1,49 +1,72 @@
<style>
.quality-selectee { width: 75px; padding: 1px; padding-left: 5px; margin: 3px; }
.quality-selecting { background: #85AEF9; }
.quality-selected { background: #065EFE; color: white; }
<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
{
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;
}
.progress
{
z-index: 5;
}
/* 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>
<fieldset class="quality-selectee">
SDTV
</fieldset>
<div id="progressbar" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<fieldset class="quality-selectee">
DVD
</fieldset>
<fieldset class="quality-selectee">
HDTV
</fieldset>
<fieldset class="quality-selectee">
WEBDL
</fieldset>
<fieldset class="quality-selectee">
Bluray720p
</fieldset>
<fieldset class="quality-selectee">
Bluray1080p
</fieldset>
<br />
@Html.TextBox("result", "")
<script type="text/javascript">
$('.quality-selectee').click(function () {
if ($(this).hasClass('quality-selected'))
$(this).removeClass('quality-selected');
else
$(this).addClass('quality-selected');
result = "";
$(".quality-selected").each(function () {
result += this.firstChild.data + ",";
});
$("#result").empty().val(result);
});
<script>
$("#progressbar").episodeProgress(100, 200);
</script>