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

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

<style>
    /* progress bar container */
    .progressbar
    {
        border: 1px solid #065EFE;
        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;
    }
    
    .t-grid .t-alt
    {
        background: #E5ECF9;
    }
</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");
                                 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.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("<#= Overview #>"))
                .ClientEvents(clientEvents =>
                {
                    clientEvents.OnEdit("grid_edit");
                    clientEvents.OnSave("grid_save");
                    clientEvents.OnRowDataBound("grid_rowBound");
                })
                .Render();}
    </div>
}
@section Scripts{
    <script type="text/javascript">
        var windowElement;

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

        function grid_save(e) {
            $('#ajaxSaveWheel').show();
        }

        function grid_rowBound(e) {
            var dataItem = e.dataItem;
            var seriesId = dataItem.SeriesId;
            var episodeCount = dataItem.EpisodeCount;
            var episodeFileCount = dataItem.EpisodeFileCount;

            $("#progressbar_" + seriesId).episodeProgress(episodeFileCount, episodeCount);
        }
    </script>
    <script type="text/javascript">
        (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 + "%");
                    div.find(".progressText").html(episodes + " / " + totalEpisodes);
                });
            };
        })(jQuery);
    </script>
}