Loading overlays added to Series/Details, Upcoming and History views.

NzbDrone.Web/NzbDrone.Web.csproj

@@ -588,6 +588,7 @@
     <Content Include="Content\Images\Indexers\Unknown.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <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" />

NzbDrone.Web/Scripts/gridLoad.js

@@ -0,0 +1,11 @@
+function grid_bind(args) {
+    var id = this.attributes[0].textContent;
+    var parent = $('#' + id).parent();
+    parent.children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
+}
+
+function grid_bound(args) {
+    var id = this.attributes[0].textContent;
+    var parent = $('#' + id).parent();
+    $('.grid-container').children('.grid-loader').stop().fadeOut('slow');
+}

NzbDrone.Web/Views/History/Index.cshtml

@@ -11,34 +11,37 @@ History
             }).Render();}
 }
 @section MainContent{
-    @{Html.Telerik().Grid<HistoryModel>().Name("history")
-           .TableHtmlAttributes(new { @class = "Grid" })
-            .Columns(columns =>
-                         {
-                             columns.Bound(c => c.Indexer)
-                                    .ClientTemplate("<center><img alt='<#= Indexer #>' src='" + Url.Content("~/Content/Images/Indexers/") + "<#= Indexer #>.png' /></center>")
-                                    .Title("")
-                                    .Width(20);
-                             columns.Bound(c => c.SeriesTitle).Title("Series Name");
-                             columns.Bound(c => c.SeasonNumber).Title("Season").Width(1);
-                             columns.Bound(c => c.EpisodeNumber).Title("Episode").Width(1);
-                             columns.Bound(c => c.EpisodeTitle).Title("Episode Title");
-                             columns.Bound(c => c.Quality).Title("Quality").Width(50);
-                             columns.Bound(c => c.Date).Title("Grabbed on");
-                         })
-            .DetailView(detailView => detailView.ClientTemplate(
-                "<fieldset>" +
-                "<div><b>Overview: </b><#= EpisodeOverview #></div>" +
-                "<div><b>NZB Title: </b><#= NzbTitle #></div>" +
-                "<div><b>Proper: </b><#= IsProper #></div>" +
-                "</fieldset>"
-                                          ))
-            .DataBinding(data => data.Ajax().Select("_AjaxBinding", "History"))
-            .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.Date).Descending()).Enabled(true))
-            .Pageable(
-                c =>
-                c.PageSize(20).Position(GridPagerPosition.Bottom).Style(GridPagerStyles.NextPrevious))
-          //.Filterable()
-          //.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
-            .Render();}
+    <div class="grid-container">
+        @{Html.Telerik().Grid<HistoryModel>().Name("history")
+               .TableHtmlAttributes(new { @class = "Grid" })
+                .Columns(columns =>
+                             {
+                                 columns.Bound(c => c.Indexer)
+                                        .ClientTemplate("<center><img alt='<#= Indexer #>' src='" + Url.Content("~/Content/Images/Indexers/") + "<#= Indexer #>.png' /></center>")
+                                        .Title("")
+                                        .Width(20);
+                                 columns.Bound(c => c.SeriesTitle).Title("Series Name");
+                                 columns.Bound(c => c.SeasonNumber).Title("Season").Width(1);
+                                 columns.Bound(c => c.EpisodeNumber).Title("Episode").Width(1);
+                                 columns.Bound(c => c.EpisodeTitle).Title("Episode Title");
+                                 columns.Bound(c => c.Quality).Title("Quality").Width(50);
+                                 columns.Bound(c => c.Date).Title("Grabbed on");
+                             })
+                .DetailView(detailView => detailView.ClientTemplate(
+                    "<fieldset>" +
+                    "<div><b>Overview: </b><#= EpisodeOverview #></div>" +
+                    "<div><b>NZB Title: </b><#= NzbTitle #></div>" +
+                    "<div><b>Proper: </b><#= IsProper #></div>" +
+                    "</fieldset>"
+                                              ))
+                .DataBinding(data => data.Ajax().Select("_AjaxBinding", "History"))
+                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.Date).Descending()).Enabled(true))
+                .Pageable(
+                    c =>
+                    c.PageSize(20).Position(GridPagerPosition.Bottom).Style(GridPagerStyles.NextPrevious))
+              //.Filterable()
+              //.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
+                .Render();}
+        <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+    </div>
 }

NzbDrone.Web/Views/Series/Details.cshtml

@@ -85,7 +85,7 @@
                     clientEvents.OnDataBound("grid_bound");
                 })
                 .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.EpisodeNumber).Descending()).Enabled(true))
-                .Footer(false)
+                .Footer(true)
                 .DataBinding(
                     d =>
                     d.Ajax().Select("_AjaxSeasonGrid", "Series",
@@ -131,13 +131,5 @@
         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>
 }

NzbDrone.Web/Views/Series/Index.cshtml

@@ -60,14 +60,6 @@
                 .center();
         }
 
-    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');
-    }
-
     function openSeasonEditor(seriesId, seriesName) {
         windowElement = null;
         windowElement = $.telerik.window.create({

NzbDrone.Web/Views/Shared/SiteLayout.cshtml

@@ -49,6 +49,7 @@
                     .Add("Notification.js")
                     .Add("jquery-tgc-countdown-1.0.js")
                     .Add("MicrosoftAjax.js")
-                    .Add("MicrosoftMvcValidation.js"))
+                    .Add("MicrosoftMvcValidation.js")
+                    .Add("gridLoad.js"))
         .Render();}
 </html>

NzbDrone.Web/Views/Upcoming/Index.cshtml

@@ -9,116 +9,144 @@ Upcoming
 }
 @section MainContent{
     <div id="yesterday">
-        <h2>
-            Yesterday</h2>
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Yesterday").NoRecordsTemplate(
-                "No watched shows aired yesterday")
-                .TableHtmlAttributes(new { @class = "Grid" })
-                .Columns(columns =>
-                             {
-                                 columns.Bound(c => c.SeriesName)
-                                     .ClientTemplate("<a href=" +
-                                                     Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                     "><#= SeriesName #></a>")
-                                     .Title("Series Name");
-                                 columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                 columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                 columns.Bound(c => c.Title).Title("Episode Title");
-                                 columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
-                             })
-                .DetailView(detailView => detailView.ClientTemplate(
-                    "<fieldset>" +
-                    "<div><b>Overview: </b><#= Overview #></div>" +
-                    "</fieldset>"
-                                              ))
-                .DataBinding(data => data.Ajax().Select("_AjaxBindingYesterday", "Upcoming"))
-                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
-              //.Pageable(c => c.PageSize(20).Position(GridPagerPosition.Both).Style(GridPagerStyles.PageInput | GridPagerStyles.NextPreviousAndNumeric))
-              //.Filterable()
-              //.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
-                .Render();}
+        <h2>Yesterday</h2>
+        <div class="grid-container">
+            @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Yesterday").NoRecordsTemplate(
+                    "No watched shows aired yesterday")
+                    .TableHtmlAttributes(new { @class = "Grid" })
+                    .Columns(columns =>
+                                    {
+                                        columns.Bound(c => c.SeriesName)
+                                            .ClientTemplate("<a href=" +
+                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
+                                                            "><#= SeriesName #></a>")
+                                            .Title("Series Name");
+                                        columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
+                                        columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
+                                        columns.Bound(c => c.Title).Title("Episode Title");
+                                        columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
+                                    })
+                    .DetailView(detailView => detailView.ClientTemplate(
+                        "<fieldset>" +
+                        "<div><b>Overview: </b><#= Overview #></div>" +
+                        "</fieldset>"
+                                                    ))
+                    .ClientEvents(clientEvents =>
+                    {
+                        clientEvents.OnDataBinding("grid_bind");
+                        clientEvents.OnDataBound("grid_bound");
+                    })
+                    .DataBinding(data => data.Ajax().Select("_AjaxBindingYesterday", "Upcoming"))
+                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
+                    //.Pageable(c => c.PageSize(20).Position(GridPagerPosition.Both).Style(GridPagerStyles.PageInput | GridPagerStyles.NextPreviousAndNumeric))
+                    //.Filterable()
+                    //.ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
+                    .Render();}
+            <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+        </div>
     </div>
     <br />
     <div id="today">
-        <h2>
-            Today</h2>
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Today").NoRecordsTemplate("No watched shows airing today.")
-                .TableHtmlAttributes(new { @class = "Grid" })
-                .Columns(columns =>
-                             {
-                                 columns.Bound(c => c.SeriesName)
-                                     .ClientTemplate("<a href=" +
-                                                     Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                     "><#= SeriesName #></a>")
-                                     .Title("Series Name");
-                                 columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                 columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                 columns.Bound(c => c.Title).Title("Episode Title");
-                                 columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
-                             })
-                .DetailView(detailView => detailView.ClientTemplate(
-                    "<fieldset>" +
-                    "<div><b>Overview: </b><#= Overview #></div>" +
-                    "</fieldset>"
-                                              ))
-                .DataBinding(data => data.Ajax().Select("_AjaxBindingToday", "Upcoming"))
-                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
-                .Render();}
+        <h2>Today</h2>
+        <div class="grid-container">
+            @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Today").NoRecordsTemplate("No watched shows airing today.")
+                    .TableHtmlAttributes(new { @class = "Grid" })
+                    .Columns(columns =>
+                                    {
+                                        columns.Bound(c => c.SeriesName)
+                                            .ClientTemplate("<a href=" +
+                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
+                                                            "><#= SeriesName #></a>")
+                                            .Title("Series Name");
+                                        columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
+                                        columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
+                                        columns.Bound(c => c.Title).Title("Episode Title");
+                                        columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
+                                    })
+                    .DetailView(detailView => detailView.ClientTemplate(
+                        "<fieldset>" +
+                        "<div><b>Overview: </b><#= Overview #></div>" +
+                        "</fieldset>"
+                                                    ))
+                    .ClientEvents(clientEvents =>
+                    {
+                        clientEvents.OnDataBinding("grid_bind");
+                        clientEvents.OnDataBound("grid_bound");
+                    })
+                    .DataBinding(data => data.Ajax().Select("_AjaxBindingToday", "Upcoming"))
+                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
+                    .Render();}
+            <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+        </div>
     </div>
     <br />
     <div id="tomorrow">
-        <h2>
-            Tomorrow</h2>
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Tomorrow").NoRecordsTemplate(
-                "No watched shows airing tomorrow")
-                .TableHtmlAttributes(new { @class = "Grid" })
-                .Columns(columns =>
-                             {
-                                 columns.Bound(c => c.SeriesName)
-                                     .ClientTemplate("<a href=" +
-                                                     Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                     "><#= SeriesName #></a>")
-                                     .Title("Series Name");
-                                 columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                 columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                 columns.Bound(c => c.Title).Title("Episode Title");
-                                 columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
-                             })
-                .DetailView(detailView => detailView.ClientTemplate(
-                    "<fieldset>" +
-                    "<div><b>Overview: </b><#= Overview #></div>" +
-                    "</fieldset>"
-                                              ))
-                .DataBinding(data => data.Ajax().Select("_AjaxBindingTomorrow", "Upcoming"))
-                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
-                .Render();}
+        <h2>Tomorrow</h2>
+        <div class="grid-container">
+            @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Tomorrow").NoRecordsTemplate(
+                    "No watched shows airing tomorrow")
+                    .TableHtmlAttributes(new { @class = "Grid" })
+                    .Columns(columns =>
+                                 {
+                                     columns.Bound(c => c.SeriesName)
+                                         .ClientTemplate("<a href=" +
+                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
+                                                         "><#= SeriesName #></a>")
+                                         .Title("Series Name");
+                                     columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
+                                     columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
+                                     columns.Bound(c => c.Title).Title("Episode Title");
+                                     columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
+                                 })
+                    .DetailView(detailView => detailView.ClientTemplate(
+                        "<fieldset>" +
+                        "<div><b>Overview: </b><#= Overview #></div>" +
+                        "</fieldset>"
+                                                  ))
+                    .ClientEvents(clientEvents =>
+                    {
+                        clientEvents.OnDataBinding("grid_bind");
+                        clientEvents.OnDataBound("grid_bound");
+                    })
+                    .DataBinding(data => data.Ajax().Select("_AjaxBindingTomorrow", "Upcoming"))
+                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
+                    .Render();}
+            <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+        </div>
     </div>
     <br />
     <div id="week">
-        <h2>
-            Future Forecast</h2>
-        @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Week").NoRecordsTemplate(
-                "No watched shows airing in the next week...")
-                .TableHtmlAttributes(new { @class = "Grid" })
-                .Columns(columns =>
-                             {
-                                 columns.Bound(c => c.SeriesName)
-                                     .ClientTemplate("<a href=" +
-                                                     Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                     "><#= SeriesName #></a>")
-                                     .Title("Series Name");
-                                 columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
-                                 columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
-                                 columns.Bound(c => c.Title).Title("Episode Title");
-                                 columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
-                             })
-                .DetailView(detailView => detailView.ClientTemplate(
-                    "<fieldset>" +
-                    "<div><b>Overview: </b><#= Overview #></div>" +
-                    "</fieldset>"
-                                              ))
-                .DataBinding(data => data.Ajax().Select("_AjaxBindingWeek", "Upcoming"))
-                .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
-                .Render();}
+        <h2>Future Forecast</h2>
+        <div class="grid-container">
+            @{Html.Telerik().Grid<UpcomingEpisodeModel>().Name("Week").NoRecordsTemplate(
+                    "No watched shows airing in the next week...")
+                    .TableHtmlAttributes(new { @class = "Grid" })
+                    .Columns(columns =>
+                                 {
+                                     columns.Bound(c => c.SeriesName)
+                                         .ClientTemplate("<a href=" +
+                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
+                                                         "><#= SeriesName #></a>")
+                                         .Title("Series Name");
+                                     columns.Bound(c => c.SeasonNumber).Title("Season #").Width(40);
+                                     columns.Bound(c => c.EpisodeNumber).Title("Episode #").Width(40);
+                                     columns.Bound(c => c.Title).Title("Episode Title");
+                                     columns.Bound(c => c.AirDate).Title("Air Date").Width(160);
+                                 })
+                    .DetailView(detailView => detailView.ClientTemplate(
+                        "<fieldset>" +
+                        "<div><b>Overview: </b><#= Overview #></div>" +
+                        "</fieldset>"
+                                                  ))
+                    .ClientEvents(clientEvents =>
+                    {
+                        clientEvents.OnDataBinding("grid_bind");
+                        clientEvents.OnDataBound("grid_bound");
+                    })
+                    .DataBinding(data => data.Ajax().Select("_AjaxBindingWeek", "Upcoming"))
+                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDate).Ascending()).Enabled(true))
+                    .Render();}
+            <span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
+        </div>
     </div>
 }