Upcoming grid NzbDroned. Bye Telerik Grid.

NzbDrone.Core/Model/UpcomingEpisodesModel.cs

@@ -1,12 +0,0 @@
-using System.Collections.Generic;
-using NzbDrone.Core.Repository;
-
-namespace NzbDrone.Core.Model
-{
-    public class UpcomingEpisodesModel
-    {
-        public List<Episode> Yesterday { get; set; }
-        public List<Episode> Today { get; set; }
-        public List<Episode> Week { get; set; }
-    }
-}

NzbDrone.Core/NzbDrone.Core.csproj

@@ -325,7 +325,6 @@
     <Compile Include="Model\EpisodeStatusType.cs" />
     <Compile Include="Model\Sabnzbd\SabPriorityType.cs" />
     <Compile Include="Model\SeasonParseResult.cs" />
-    <Compile Include="Model\UpcomingEpisodesModel.cs" />
     <Compile Include="Providers\Indexer\IndexerBase.cs" />
     <Compile Include="Providers\ExternalNotificationProvider.cs" />
     <Compile Include="Providers\Indexer\NzbsOrg.cs" />

NzbDrone.Core/Providers/UpcomingEpisodesProvider.cs

@@ -18,20 +18,6 @@ namespace NzbDrone.Core.Providers
             _database = database;
         }
 
-        public virtual UpcomingEpisodesModel Upcoming()
-        {
-            var allEps = _database.Fetch<Episode, Series>(@"SELECT * FROM Episodes 
-                                                        INNER JOIN Series ON Episodes.SeriesId = Series.SeriesId
-                                                        WHERE Ignored = 0 AND AirDate BETWEEN @0 AND @1",
-                                                        DateTime.Today.AddDays(-1), DateTime.Today.AddDays(8));
-
-            var yesterday = allEps.Where(e => e.AirDate == DateTime.Today.AddDays(-1)).ToList();
-            var today = allEps.Where(e => e.AirDate == DateTime.Today).ToList();
-            var week = allEps.Where(e => e.AirDate > DateTime.Today).ToList();
-
-            return new UpcomingEpisodesModel { Yesterday = yesterday, Today = today, Week = week };
-        }
-
         public virtual List<Episode> Yesterday()
         {
             return _database.Fetch<Episode, Series>(@"SELECT * FROM Episodes 

NzbDrone.Web/Content/Grid.css

@@ -45,12 +45,27 @@
     border-color: #EEEEEE;
 }
 
+.title-row
+{
+    font-family: "Segoe UI Light" , "Open Sans" , "Segoe UI" , sans-serif;
+    font-size: 17px;
+    background-color: grey;
+    font-weight: lighter;
+    color: white;
+}
+    
 .detail-row
 {
     display: none;
 }
     
 /* Colour alternating rows */
+.seriesTable .alt-row
+{
+    background: #f0f5ff;
+}
+
+/*
 .seriesTable tr:nth-child(4n)
 {
     background: #f0f5ff;
@@ -59,7 +74,7 @@
 .seriesTable tr:nth-child(4n+1)
 {
     background: #f0f5ff;
-}
+}*/
 
 /* Episode Grid Row Colouring */
 .episodeIgnored
@@ -72,6 +87,8 @@
     background-color: #F5A9A9;
 }
 
+
+
 /* Telerik Grid */
 .t-grid td
 {

NzbDrone.Web/Controllers/UpcomingController.cs

@@ -4,6 +4,7 @@ using System.Linq;
 using System.Web.Mvc;
 using NzbDrone.Core;
 using NzbDrone.Core.Providers;
+using NzbDrone.Core.Repository;
 using NzbDrone.Web.Models;
 using Telerik.Web.Mvc;
 
@@ -23,13 +24,20 @@ namespace NzbDrone.Web.Controllers
 
         public ActionResult Index()
         {
-            return View();
+            var upcoming = new UpcomingEpisodesModel
+                               {
+                                       Yesterday = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Yesterday()),
+                                       Today = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Today()),
+                                       Tomorrow = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Tomorrow()),
+                                       Week = GetUpcomingEpisodeModels(_upcomingEpisodesProvider.Week())
+                               };
+            
+            return View(upcoming);
         }
 
-        [GridAction]
+        private List<UpcomingEpisodeModel> GetUpcomingEpisodeModels(List<Episode> episodes)
-        public ActionResult _AjaxBindingYesterday()
         {
-            var upcoming = _upcomingEpisodesProvider.Yesterday().Select(u => new UpcomingEpisodeModel
+            return episodes.Select(u => new UpcomingEpisodeModel
             {
                 SeriesId = u.Series.SeriesId,
                 EpisodeId = u.EpisodeId,
@@ -42,72 +50,7 @@ namespace NzbDrone.Web.Controllers
                 AirDate = u.AirDate.Value.ToBestDateString(),
                 AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
                 Status = u.Status.ToString()
-            });
+            }).OrderBy(e => e.AirDateTime).ToList();
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingToday()
-        {
-            var upcoming = _upcomingEpisodesProvider.Today().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingTomorrow()
-        {
-            var upcoming = _upcomingEpisodesProvider.Tomorrow().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
-        }
-
-        [GridAction]
-        public ActionResult _AjaxBindingWeek()
-        {
-            var upcoming = _upcomingEpisodesProvider.Week().Select(u => new UpcomingEpisodeModel
-            {
-                SeriesId = u.Series.SeriesId,
-                EpisodeId = u.EpisodeId,
-                SeriesTitle = u.Series.Title,
-                SeasonNumber = u.SeasonNumber,
-                EpisodeNumber = u.EpisodeNumber,
-                Title = u.Title,
-                Overview = u.Overview,
-                AirDateTime = GetDateTime(u.AirDate.Value, u.Series.AirTimes),
-                AirDate = u.AirDate.Value.ToBestDateString(),
-                AirTime = String.IsNullOrEmpty(u.Series.AirTimes) ? "?" : Convert.ToDateTime(u.Series.AirTimes).ToShortTimeString(),
-                Status = u.Status.ToString()
-            });
-
-            return View(new GridModel(upcoming));
         }
 
         private DateTime GetDateTime(DateTime airDate, string airTime)

NzbDrone.Web/Models/UpcomingEpisodesModel.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using NzbDrone.Core.Model;
+using NzbDrone.Core.Repository;
+
+namespace NzbDrone.Web.Models
+{
+    public class UpcomingEpisodesModel
+    {
+        public List<UpcomingEpisodeModel> Yesterday { get; set; }
+        public List<UpcomingEpisodeModel> Today { get; set; }
+        public List<UpcomingEpisodeModel> Tomorrow { get; set; }
+        public List<UpcomingEpisodeModel> Week { get; set; }
+    }
+}

NzbDrone.Web/NzbDrone.Web.csproj

@@ -228,6 +228,7 @@
     <Compile Include="Helpers\DescriptionExtension.cs" />
     <Compile Include="Helpers\HtmlPrefixScopeExtensions.cs" />
     <Compile Include="Helpers\IsCurrentActionHelper.cs" />
+    <Compile Include="Models\UpcomingEpisodesModel.cs" />
     <Compile Include="Models\SeasonModel.cs" />
     <Compile Include="Models\SeriesDetailsModel.cs" />
     <Compile Include="Models\MiscSettingsModel.cs" />
@@ -508,12 +509,14 @@
     <Content Include="App_GlobalResources\GridLocalization.en-US.resx">
       <Generator>GlobalResourceProxyGenerator</Generator>
       <LastGenOutput>GridLocalization.en-US.designer.cs</LastGenOutput>
+      <SubType>Designer</SubType>
     </Content>
   </ItemGroup>
   <ItemGroup>
     <Content Include="App_GlobalResources\EditorLocalization.en-US.resx">
       <Generator>GlobalResourceProxyGenerator</Generator>
       <LastGenOutput>EditorLocalization.en-US.designer.cs</LastGenOutput>
+      <SubType>Designer</SubType>
     </Content>
   </ItemGroup>
   <ItemGroup>
@@ -552,6 +555,12 @@
   <ItemGroup>
     <Content Include="Views\Series\SeriesEditor.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Upcoming\Index2.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Upcoming\UpcomingEpisode.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

NzbDrone.Web/Views/Series/Details.cshtml

@@ -79,7 +79,7 @@
         var ignoreSeason = "ignoreSeason_" + season.SeasonNumber;
         <div class="seasonToggleTop">
             <img src='../../Content/Images/@(season.AnyWanted ? "notIgnored" : "ignored").png'
-                 class='ignoredEpisodesMaster ignoreEpisode @ignoreSeason @(season.AnyWanted ? "" : "ignored")'
+                 class='ignoredEpisodesMaster ignoreEpisode @ignoreSeason@(season.AnyWanted ? " " : " ignored")'
                  title='Click to toggle season ignore status' />
             <a href="@string.Format("#SeasonSection_{0}", season.SeasonNumber)" class="seasonToggleLabel">@(season.SeasonNumber == 0 ? "Specials" : "Season " + season.SeasonNumber)</a>
         </div>

NzbDrone.Web/Views/Series/Episode.cshtml

@@ -23,7 +23,7 @@
 
     @*Commands Column*@
     <td class="@cellColourClass">
-        <img src='../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png' class='ignoreEpisode ignoreEpisode_@(Model.SeasonNumber) @(Model.Ignored ? "ignored" : "")' id='@Model.EpisodeId' title='Click to toggle episode ignore status' />
+        <img src='../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png' class='ignoreEpisode ignoreEpisode_@(Model.SeasonNumber)@(Model.Ignored ? " ignored" : " ")' id='@Model.EpisodeId' title='Click to toggle episode ignore status' />
         <img src='../../Content/Images/@(Model.Status).png' alt='@Model.Status' title='@Model.Status' class='statusImage status-@Model.Status' />
         @Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { EpisodeId = Model.EpisodeId }, null, null)
         @Ajax.ImageActionLink("../../Content/Images/Rename.png", new { Alt = "Rename", Title = "Rename episode", @class = "renameImage" }, "Rename", "Episode", new { EpisodeFileId = Model.EpisodeFileId }, null, null)

NzbDrone.Web/Views/Upcoming/Index.cshtml

@@ -1,7 +1,6 @@
-@model List<UpcomingEpisodeModel>
+@using NzbDrone.Web.Helpers
-@using NzbDrone.Common
+@model NzbDrone.Web.Models.UpcomingEpisodesModel
-@using NzbDrone.Web.Helpers
+
-@using NzbDrone.Web.Models
 @{ViewBag.Title = "Upcoming";}
 @section HeaderContent
 {
@@ -12,178 +11,109 @@
         <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null, null)</li>
     </ul>
 }
-<div id="yesterday">
-    <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.SeriesTitle)
-                                            .ClientTemplate("<a href=" +
-                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                            "><#= SeriesTitle #></a>")
-                                            .Title("Series Title");
-                                        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").Width(350);
-                                        columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                        columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { EpisodeId = "<#= EpisodeId #>" }, null, null)
-                                                            ).Width(100);
-                                    })
-                    .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.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="today">
-    <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.SeriesTitle)
-                                            .ClientTemplate("<a href=" +
-                                                            Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                            "><#= SeriesTitle #></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").Width(350);
-                                        columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                        columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                    })
-                    .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.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
-                    {
-                        clientEvents.OnRowDataBound("grid_rowBound");
-                        if (EnviromentProvider.IsProduction)
-                            clientEvents.OnError("grid_onError");
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="tomorrow">
-    <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.SeriesTitle)
-                                         .ClientTemplate("<a href=" +
-                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
-                                                         "><#= SeriesTitle #></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").Width(350);
-                                     columns.Bound(c => c.AirDateTime).Title("Air Time")
-                                         .ClientTemplate("<#= AirTime #>")
-                                         .Width(160);
-                                     columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                 })
-                    .DetailView(detailView => detailView.ClientTemplate(
-                        "<fieldset>" +
-                        "<div><b>Overview: </b><#= Overview #></div>" +
-                        "</fieldset>"
-                                                  ))
 
-                    .DataBinding(data => data.Ajax().Select("_AjaxBindingTomorrow", "Upcoming"))
+<table class="seriesTable">
-                    .Sortable(rows => rows.OrderBy(epSort => epSort.Add(c => c.AirDateTime).Ascending()).Enabled(true))
+    <colgroup>
-                    .ClientEvents(clientEvents =>
+        <col/>
+        <col style="width:40px" />
+        <col style="width:40px" />
+        <col style="width:350px" />
+        <col style="width:160px" />
+        <col style="width:100px" />
+    </colgroup>
+    <tr>
+        <th>Series Title</th>
+        <th>Season #</th>
+        <th>Episode #</th>
+        <th>Episode Title</th>
+        <th>Air Time</th>
+        
+        @*Commands/Status Column*@
+        <th>
+            Status
+        </th>
+    </tr>
+    <tr class="title-row">
+        <td colspan="6">
+            Yesterday
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Yesterday.Count; i++)
     {
-                        clientEvents.OnRowDataBound("grid_rowBound");
+        var episode = Model.Yesterday[i];
-                        if (EnviromentProvider.IsProduction)
+        
-                            clientEvents.OnError("grid_onError");
+        if (i % 2 == 0)
-                    })
-                    .Render();}
-    </div>
-</div>
-<br />
-<div id="week">
-    <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.SeriesTitle)
+            Html.RenderPartial("UpcomingEpisode", episode);
-                                         .ClientTemplate("<a href=" +
+        }
-                                                         Url.Action("Details", "Series", new { seriesId = "<#= SeriesId #>" }) +
+
-                                                         "><#= SeriesTitle #></a>")
+        else
-                                         .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").Width(350);
-                                     columns.Bound(c => c.AirDateTime).Title("Air Date/Time")
-                                         .ClientTemplate("<#= AirDate #> at <#= AirTime #>")
-                                         .Width(160);
-                                     columns.Bound(c => c.Status)
-                                            .ClientTemplate("<img src='../../Content/Images/<#= Status #>.png' alt='<#= Status #>' title='<#= Status #>' class='statusImage status-<#= Status #>' />" +
-                                                            "<a href=\"../Episode/Season?episodeId=<#= EpisodeId #>\" onclick=\"searchForEpisode('<#= EpisodeId #>'); return false;\"><img src='../../Content/Images/Search.png' alt='Search' title='Search for episode' class='searchImage' /></a>"
-                                                            ).Width(100);
-                                 })
-                    .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.AirDateTime).Ascending()).Enabled(true))
-                    .ClientEvents(clientEvents =>
         {
-                        clientEvents.OnRowDataBound("grid_rowBound");
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
-                        if (EnviromentProvider.IsProduction)
+        }
-                            clientEvents.OnError("grid_onError");
+    }
-                    })
+    <tr class="title-row">
-                    .Render();}
+        <td colspan="6">
-    </div>
+            Today
-</div>
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Today.Count; i++)
+    {
+        var episode = Model.Today[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+    <tr class="title-row">
+        <td colspan="6">
+            Tomorrow
+        </td>
+    
+    @for (int i = 0; i < Model.Tomorrow.Count; i++)
+    {
+        var episode = Model.Tomorrow[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+    <tr class="title-row">
+        <td colspan="6">
+            Future Forecast
+        </td>
+    </tr>
+    
+    @for (int i = 0; i < Model.Week.Count; i++)
+    {
+        var episode = Model.Week[i];
+        
+        if (i % 2 == 0)
+        {
+            Html.RenderPartial("UpcomingEpisode", episode);
+        }
+
+        else
+        {
+            Html.RenderPartial("UpcomingEpisode", episode, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
+        }
+    }
+</table>
 
 @section Scripts{
-    <script type="text/javascript">
+
-        function grid_rowBound(e) {
-            highlightRow(e);
-        }
-    </script>
 }

NzbDrone.Web/Views/Upcoming/UpcomingEpisode.cshtml

@@ -0,0 +1,48 @@
+@using NzbDrone.Core.Model
+@using NzbDrone.Web.Helpers
+@using NzbDrone.Web.Models
+@model UpcomingEpisodeModel
+           
+@{
+    Layout = null;
+}
+
+<tr class='@Model.EpisodeId data-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")'>
+    <td>@Html.ActionLink(Model.SeriesTitle, "Details", "Series", new { seriesId = Model.SeriesId }, null)</td>
+    <td>@Model.SeasonNumber</td>
+    <td>@Model.EpisodeNumber</td>
+    <td>@Model.Title</td>
+    
+    <td>
+        @{ if(Model.AirDateTime >= DateTime.Today.AddDays(-1) && Model.AirDateTime <= DateTime.Today.AddDays(2))
+           {
+               @(Model.AirTime)
+           }
+           else
+           {
+               @(Model.AirDate + " at " + Model.AirTime)
+           }
+        }
+    </td>
+    
+    @{
+        string cellColourClass = String.Empty;
+
+        if (Model.Status == "Missing")
+        {
+            cellColourClass = "episodeMissing";
+        }
+    }
+
+    @*Commands Column*@
+    <td class="@cellColourClass">
+        <img src='../../Content/Images/@(Model.Status).png' alt='@Model.Status' title='@Model.Status' class='statusImage status-@Model.Status' />
+        @Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "searchImage" }, "Search", "Episode", new { episodeId = Model.EpisodeId }, null, null)
+    </td>
+</tr>
+
+<tr class='detail-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")'>
+    <td colspan="6">
+        <b>Overview: </b>@Model.Overview
+    </td>
+</tr>