Added Episodes of Episodes Total progress bar to Series Grid.

NzbDrone.Web/Controllers/SeriesController.cs

@@ -235,7 +235,11 @@ namespace NzbDrone.Web.Controllers
         {
             var series = new List<SeriesModel>();
 
-            seriesInDb.ForEach(s => series.Add(new SeriesModel
+            foreach (var s in seriesInDb)
+            {
+                var episodesTotal = s.Episodes;
+
+                series.Add(new SeriesModel
                                {
                                    SeriesId = s.SeriesId,
                                    Title = s.Title,
@@ -247,8 +251,11 @@ namespace NzbDrone.Web.Controllers
                                    QualityProfileName = s.QualityProfile.Name,
                                    SeasonsCount = s.Seasons.Where(x => x.SeasonNumber > 0).Count(),
                                    SeasonFolder = s.SeasonFolder,
-                Status = s.Status
+                                   Status = s.Status,
-            }));
+                                   Episodes = episodesTotal.Where(e => e.EpisodeFileId != 0).Count(),
+                                   EpisodeTotal = episodesTotal.Count()
+                               });
+            }
 
             return series;
         }

NzbDrone.Web/Models/SeriesModel.cs

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

NzbDrone.Web/NzbDrone.Web.csproj

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

NzbDrone.Web/Views/Series/Index.cshtml

@@ -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>
@@ -60,6 +119,17 @@
             .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;
         windowElement = $.telerik.window.create({

NzbDrone.Web/Views/Settings/Test.cshtml

@@ -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);
-
+			    }
-<fieldset class="quality-selectee">
+		    );
-Bluray720p
+        };
-</fieldset>
+    })(jQuery);
-
+</script>
-<fieldset class="quality-selectee">
-Bluray1080p
-</fieldset>
 
-<br />
+<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; 
+}
 
-@Html.TextBox("result", "")
+.progress
+{
+    z-index: 5;
+}
 
-<script type="text/javascript">
+/* color bar */
-    $('.quality-selectee').click(function () {
+.progressbar div.progress
-        if ($(this).hasClass('quality-selected'))
+{
-            $(this).removeClass('quality-selected');
+    position:absolute;
-        else
+    width:0;
-            $(this).addClass('quality-selected');
+    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>
 
-        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>