From 1fca5f3e5f1c6c1ff6ae34ad4b59f22302d1b887 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Thu, 19 May 2011 08:08:00 -0700
Subject: [PATCH] Series Details updated with overlay when loading.

---
 NzbDrone.Web/NzbDrone.Web.csproj         |   1 +
 NzbDrone.Web/Views/Series/Details.cshtml | 114 +++++++++++++----------
 2 files changed, 68 insertions(+), 47 deletions(-)

diff --git a/NzbDrone.Web/NzbDrone.Web.csproj b/NzbDrone.Web/NzbDrone.Web.csproj
index c724f2bd6..b32615548 100644
--- a/NzbDrone.Web/NzbDrone.Web.csproj
+++ b/NzbDrone.Web/NzbDrone.Web.csproj
@@ -577,6 +577,7 @@
     <Content Include="Content\Images\Indexers\NzbsOrg.png" />
     <Content Include="Content\Images\Indexers\NzbsRus.png" />
     <Content Include="Content\Images\Indexers\Unknown.png" />
+    <Content Include="Content\Images\Loading.gif" />
     <Content Include="Content\Images\Plus.png" />
     <Content Include="Content\Images\spin.gif" />
     <Content Include="Content\Images\ui-bg_diagonals-small_0_aaaaaa_40x40.png" />
diff --git a/NzbDrone.Web/Views/Series/Details.cshtml b/NzbDrone.Web/Views/Series/Details.cshtml
index 88722f824..c1046493c 100644
--- a/NzbDrone.Web/Views/Series/Details.cshtml
+++ b/NzbDrone.Web/Views/Series/Details.cshtml
@@ -58,60 +58,72 @@
     {
 
         <br />
-        <h3>
-            Season @season.SeasonNumber</h3>
-        Season season1 = season;
-        Html.Telerik().Grid<EpisodeModel>().Name("seasons_" + season.SeasonNumber)
-            .TableHtmlAttributes(new { @class = "Grid" })
-            .Columns(columns =>
-                         {
-                             columns.Bound(o => o.EpisodeId)
-                                 .ClientTemplate(
-                                     "<input type='checkbox' name='checkedEpisodes' value='<#= EpisodeId #>' />")
-                                 .Title("")
-                                 .Width(1)
-                                 .HtmlAttributes(new { style = "text-align:center" });
+        <h3>Season @season.SeasonNumber</h3>
+        <div class="grid-container">
+            @{Season season1 = season;
+            Html.Telerik().Grid<EpisodeModel>().Name("seasons_" + season.SeasonNumber)
+                .TableHtmlAttributes(new { @class = "Grid" })
+                .Columns(columns =>
+                             {
+                                 columns.Bound(o => o.EpisodeId)
+                                     .ClientTemplate(
+                                         "<input type='checkbox' name='checkedEpisodes' value='<#= EpisodeId #>' />")
+                                     .Title("")
+                                     .Width(1)
+                                     .HtmlAttributes(new { style = "text-align:center" });
 
-                             columns.Bound(c => c.EpisodeNumber).Width(10).Title("Episode");
-                             columns.Bound(c => c.Title).Title("Title").Width(300);
-                             columns.Bound(c => c.AirDate).Format("{0:d}").Width(10);
-                             columns.Bound(c => c.Quality).Width(10);
-                             columns.Bound(c => c.Path);
-                         })
-            //.DetailView(detailView => detailView.Template(e => Html.RenderPartial("EpisodeDetail", e)))
-            .DetailView(detailView => detailView.ClientTemplate("<div><#= Overview #> </br><#= Path #> </div>"))
-            .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber).Descending()).Enabled(true))
-            .Footer(false)
-            .DataBinding(
-                d =>
-                d.Ajax().Select("_AjaxSeasonGrid", "Series",
-                                new RouteValueDictionary { { "seasonId", season1.SeasonId.ToString() } }))
-            //.EnableCustomBinding(true)
-            //.ClientEvents(e => e.OnDetailViewExpand("episodeDetailExpanded")) //Causes issues displaying the episode detail multiple times...
-            .ToolBar(
-                c =>
-                c.Custom().Text("Rename Season").Action("RenameSeason", "Series", new { seasonId = season1.SeasonId })
-                    .ButtonType(GridButtonType.Text))
-            .Render();
+                                 columns.Bound(c => c.EpisodeNumber).Width(10).Title("Episode");
+                                 columns.Bound(c => c.Title).Title("Title").Width(300);
+                                 columns.Bound(c => c.AirDate).Format("{0:d}").Width(10);
+                                 columns.Bound(c => c.Quality).Width(10);
+                                 columns.Bound(c => c.Path);
+                             })
+                .DetailView(detailView => detailView.ClientTemplate("<div><#= Overview #> </br><#= Path #> </div>"))
+                .ClientEvents(clientEvents =>
+                {
+                    clientEvents.OnDataBinding("grid_bind");
+                    clientEvents.OnDataBound("grid_bound");
+                })
+                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber).Descending()).Enabled(true))
+                .Footer(false)
+                .DataBinding(
+                    d =>
+                    d.Ajax().Select("_AjaxSeasonGrid", "Series",
+                                    new RouteValueDictionary { { "seasonId", season1.SeasonId.ToString() } }))
+                .ToolBar(
+                    c =>
+                    c.Custom().Text("Rename Season").Action("RenameSeason", "Series", new { seasonId = season1.SeasonId })
+                        .ButtonType(GridButtonType.Text))
+                .Render();}
+                <span class="grid-loader"><img src="@Url.Content("~/Content/Images/Loading.gif")" alt="Loading"/> Loading...</span>
+        </div>
     }
     @{var specialSeasons = Model.Seasons.Where(s => s.SeasonNumber == 0).FirstOrDefault();}
     @if (specialSeasons != null)
     {
 
         <br />
-        <h3>
-            Specials</h3>
-        Html.Telerik().Grid(specialSeasons.Episodes).Name("seasons_specials")
-            .TableHtmlAttributes(new { @class = "Grid" })
-            .Columns(columns =>
-                         {
-                             columns.Bound(c => c.EpisodeNumber).Width(0).Title("Episode");
-                             columns.Bound(c => c.Title);
-                             columns.Bound(c => c.AirDate).Format("{0:d}").Width(0);
-                         })
-            .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber)).Enabled(false))
-            .Footer(false)
-            .Render();
+        <h3>Specials</h3>
+        <div class="grid-container">
+            @{Html.Telerik().Grid(specialSeasons.Episodes).Name("seasons_specials")
+                    .TableHtmlAttributes(new {@class = "Grid"})
+                    .Columns(columns =>
+                                 {
+                                     columns.Bound(c => c.EpisodeNumber).Width(0).Title("Episode");
+                                     columns.Bound(c => c.Title);
+                                     columns.Bound(c => c.AirDate).Format("{0:d}").Width(0);
+                                 })
+                    //.DetailView(detailView => detailView.ClientTemplate("<div><#= Overview #> </br><#= Path #> </div>"))
+                    .ClientEvents(clientEvents =>
+                    {
+                        clientEvents.OnDataBinding("grid_bind");
+                        clientEvents.OnDataBound("grid_bound");
+                    })
+                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber)).Enabled(false))
+                    .Footer(false)
+                    .Render(); }
+            <span class="grid-loader"><img src="@Url.Content("~/Content/Images/Loading.gif")" alt="Loading"/> Loading...</span>
+        </div>
     }
 }
 @section Scripts{
@@ -119,5 +131,13 @@
         function episodeDetailExpanded(e) {
             $console.log("OnDetailViewExpand :: " + e.masterRow.cells[1].innerHTML);
         }
+
+        function grid_bind(args) {
+            $('.grid-container').children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
+        }
+
+        function grid_bound(args) {
+            $('.grid-container').children('.grid-loader').stop().fadeOut('slow');
+        }
     </script>
 }