Radarr/NzbDrone.Web/Views/Series/Index.cshtml

@using NzbDrone.Core.Repository;
@using NzbDrone.Web.Models;
@model IEnumerable<NzbDrone.Core.Repository.Series>
           
@section TitleContent{
    Series
}

<script type="text/javascript" src="../../Scripts/doTimeout.js"></script>
<script>
    (function ($) {
        $.fn.episodeProgress = function (episodes, totalEpisodes) {
            return this.each(
                function () {
			        var div = $(this);
			        var progressBar = div.find(".progress");

			        var width = Math.round(episodes / totalEpisodes * 100);

			        progressBar.css("width", width + "%");

			        if (width > 97) {
			            progressBar.css("-khtml-border-top-right-radius", "7px");
			            progressBar.css("border-top-right-radius", "7px");
			            progressBar.css("-moz-border-top-right-radius", "7px");
			            progressBar.css("-webkit-border-top-right-radius", "7px");

			            progressBar.css("-khtml-border-bottom-right-radius", "7px");
			            progressBar.css("border-bottom-right-radius", "7px");
			            progressBar.css("-moz-border-bottom-right-radius", "7px");
			            progressBar.css("-webkit-border-bottom-right-radius", "7px");
			        }

			        div.find(".progressText").html(episodes + " / " + totalEpisodes);
			    });
            };
        })(jQuery);
</script>

<style>
/* progress bar container */
.progressbar
{
    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;
}

/* apply curves to the progress bar */
.progress
{
    -khtml-border-top-left-radius:7px;
    border-top-left-radius:7px;
    -moz-border-top-left-radius:7px;
    -webkit-border-top-left-radius:7px;
    
    -khtml-border-bottom-left-radius:7px;
    border-bottom-left-radius:7px;
    -moz-border-bottom-left-radius:7px;
    -webkit-border-bottom-left-radius:7px;
}

/* 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");}
}

@section MainContent{
    <div class="grid-container">
        @{Html.Telerik().Grid<SeriesModel>().Name("Grid")
                .TableHtmlAttributes(new { @class = "Grid" })
                .DataKeys(keys => keys.Add(p => p.SeriesId))
                .DataBinding(data => data.Ajax()
                    .Select("_AjaxSeriesGrid", "Series")
                    .Update("_SaveAjaxSeriesEditing", "Series")
                    .Delete("_DeleteAjaxSeriesEditing", "Series"))
                .Columns(columns =>
                             {
                                 columns.Bound(o => o.Title)
                                     .ClientTemplate("<a href=" +
                                                     Url.Action("Details", "Series", new {seriesId = "<#= SeriesId #>"}) +
                                                     "><#= Title #></a>");
                                 columns.Bound(o => o.SeasonsCount).Title("Seasons")
                                     .ClientTemplate("<a href=# onclick=\"openSeasonEditor(<#= SeriesId #>, \'<#= Title #>\'); return false;\"><#= SeasonsCount #></a>");
                                 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 =>
                                                     {
                                                         commands.Edit().ButtonType(GridButtonType.Image);
                                                         commands.Delete().ButtonType(GridButtonType.Image);
                                                     }).Title("Actions").Width(80);

                             })
                .Editable(editor => editor.Mode(GridEditMode.PopUp))
                .Sortable(sort => sort.OrderBy(order => order.Add(o => o.Title).Ascending()).Enabled(true))
                .DetailView(detailView => detailView.ClientTemplate("<div style=\"width:95%\"><#= Overview #></div>"))
                .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>
    </div>
}

<script type="text/javascript">
    var windowElement;

    function grid_edit(args) {
        $(args.form)
            .closest(".t-window")
            .data("tWindow")
            .center();
    }

    function grid_rowBound(e) {
        var dataItem = e.dataItem;
        var seriesId = dataItem.SeriesId;
        var getEpisodeCountUrl = '@Url.Action("GetEpisodeCount", "Series")';

        $("#progressbar_" + seriesId).episodeProgress(0, 0);

        $.ajax({
            type: "GET",
            url: getEpisodeCountUrl,
            data: jQuery.param({ seriesId: seriesId }),
            error: function (req, status, error) {
                alert("Sorry! We could search for " + id + " at this time. " + error);
            },
            success: function (data, textStatus, jqXHR) {
                var episodes = data.Episodes;
                var episodeTotal = data.EpisodeTotal;

                var counter = 0;
                var max = episodes + 1;

                $.doTimeout(10, function () {
                    if (counter >= max) {
                        $("#progressbar_" + seriesId).episodeProgress(episodes, episodeTotal);
                        return false;
                    }

                    $("#progressbar_" + seriesId).episodeProgress(counter, episodeTotal);

                    counter += 5;

                    return true;
                });
            }
        });
    }


    function openSeasonEditor(seriesId, seriesName) {
        windowElement = null;
        windowElement = $.telerik.window.create({
            title: "<b>Season Editor: " + seriesName + "</b>",
            contentUrl: '@Url.Action("SeasonEditor", "Series")' + '/?seriesId=' + seriesId,
            width: 360,
            height: 400,
            modal: true,
            resizable: false,
            draggable: true,
            scrollable: true
        });

        windowElement.data('tWindow').center();
    }

    function closeSeasonEditor() {
        $('#form').remove();
        var window = windowElement.data("tWindow");
        window.close();
    }
</script>