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

@using NzbDrone.Common
@using NzbDrone.Web.Helpers
@using NzbDrone.Web.Models;
@model string
@{ViewBag.Title = "NzbDrone";}

@section HeaderContent
{
    @Html.IncludeCss("Settings.css")
    @Html.IncludeCss("Grid.css")
}
<style>  
    .ui-progressbar
    {
        position:relative;
        width: 125px; 
        height: 20px;
        background-color: transparent;
        border: 1px solid #065EFE;
        margin: 2px;
    }
    
    .progressBarText 
    {
        position: absolute;
        display: block;
        width: 100%;
        text-align: center;
    }

    .ui-progressbar-value
    {
        overflow: hidden;
        border: 1px solid #065EFE;
    }

    .ui-progressbar-value .progressBarText
    {
        position: relative;
        font-weight: normal;
        color: white;
    }
    
    /* Set the row height so it won't resize when the progress bar is created */
    .seriesTable tr
    {
        height: 28px;
    }
    
    .editButton, .deleteButton
    {
        width: 18px;
        height: 18px;
        padding: 3px 1px;
        margin: 0px;
        vertical-align: middle;
    }
    
    .editButton:hover, .deleteButton:hover
    {
        background-color: #065EFE;
    }
    
    .commandsColumn, .statusColumn
    {
        text-align: center;
    }
    
    .ui-dialog-buttonpane .ui-dialog-buttonset .ui-delete-button
    {
        margin-right: 445px;
    }
    
</style>
@section ActionMenu{
    <ul class="sub-menu">
        <li>@Html.ActionLink("Add Series", "Index", "AddSeries")</li>
        <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null)</li>
    </ul>
}

<table id="seriesGrid" class="dataTablesGrid seriesTable">
    <thead>
        
        <tr>
            <th style="width: 10px">Status</th>
            <th style="width: auto">Title</th>
            <th style="width: 100px">Seasons</th>
            <th style="width: 100px">Quality</th>
            <th style="width: 140px">Next Airing</th>
            <th style="width: 100px">Episodes</th>
        
            @*Commands Column*@
            <th style="width: 80px">
            
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<div id="seriesEditor" title="Edit Series"></div>
<div id="seriesDelete" title="Delete Series">
    <input class="seriesId" type="hidden" value="">
    Are you sure you want to delete '<span class="seriesTitle"></span>'?
</div>
@section Scripts{
    <script type="text/javascript">
        var seriesEditorUrl = './Series/SeriesEditor';
        var saveSeriesEditorUrl = './Series/SaveSeriesEditor';
        var seriesDeleteUrl = './Series/DeleteSeries';
        var pauseImage = '<img src="../../Content/Images/pause.png" width="24" height="24" alt="Paused" title="Not monitored" />';
        var stopImage = '<img src="../../Content/Images/stop.png" width="24" height="24" alt="Ended" title="Ended" />';
        var playImage = '<img src="../../Content/Images/play.png" width="24" height="24" alt="Active" title="Continuing" />';

        $(document).ready(function () {
            $('#seriesGrid').removeClass('hidden-grid');

            oTable = $('.dataTablesGrid').dataTable({
                "bShowAll": false,
                "aaData": @Html.Raw(Model),
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": true,
                "bInfo": false,
                "bAutoWidth": false,
                "bStateSave": true,
                "aoColumns": [
                                { sWidth: '70px',
                                  "sClass": "statusColumn",
                                  "mDataProp": function (source, type, val) {
                                                    // 'display' and 'filter' use our fancy naming
                                                    if (type === 'display' || type === 'filter') {
                                                        var monitored = source["Monitored"];
                                                        var status = source["Status"];
                                    
                                                        if (!monitored) {
                                                            return pauseImage;
                                                        }
                                    
                                                        else {
                                                            if (status === "Ended"){
                                                                return stopImage;
                                                            }
                                            
                                                            else {
                                                                return playImage;
                                                            }
                                                        }
                                                    }
                                                    // 'sort' and 'type' both just use the raw data
                                                    return source["Status"];
                                                }
                                }, //Status
                                { sWidth: 'auto', "mDataProp": function (source, type, val) {
                                                                        // 'display' and 'filter' use our fancy naming
                                                                        if (type === 'display' || type === 'filter') {
                                                                            return source["Title"];
                                                                        }
                                                                        // 'sort' and 'type' both just use the raw data
                                                                        return source["TitleSorter"];
                                                                    } 
                                }, //Title
                                { sWidth: '100px', "mDataProp": "SeasonsCount", "bSortable": false }, //Seasons
                                { sWidth: '100px', "mDataProp": "QualityProfileName" }, //Quality
                                { sWidth: '120px', "mDataProp": function (source, type, val) {
                                                                        // 'display' and 'filter' use our fancy naming
                                                                        if (type === 'display' || type === 'filter') {
                                                                            return source["NextAiring"];
                                                                        }
                                                                        // 'sort' and 'type' both just use the raw data
                                                                        return source["NextAiringSorter"];
                                                                    } 
                                }, //Next Airing
                                { sWidth: '140px', "mDataProp": "Episodes", "bSortable": false, "fnRender": function (row) {
                                        var progress = row.aData["EpisodeFileCount"] / row.aData["EpisodeCount"] * 100;
                                        
                                        var result = "<div class='progressBar' rel='" + progress + "'>" +
                                                        "<span class='progressBarText'>" + row.aData["EpisodeFileCount"] + " / " + row.aData["EpisodeCount"] +"</span>" +
                                                     "</div>";

                                        return result;
                                    }
                                }, //Episodes
                                { sWidth: '50px', "mDataProp": "HasBanner", "bSortable": false, "fnRender": function (row) {
                                        return "<img src='../../Content/Images/settings.png' class='editButton' value='" + row.aData["SeriesId"] + "' rel='" + row.aData["Title"] + "' />" +
                                                "<img src='../../Content/Images/close.png' class='deleteButton' value='" + row.aData["SeriesId"] + "' rel='" + row.aData["Title"] + "'/>";
                                    }
                                }, //Commands
                                { sWidth: '60px', "mDataProp": "Details", "bSortable": false, "bVisible": false, "fnRender": function (row) {
                                        var result = "<b>Airs Day of Week: </b>" + row.aData["AirsDayOfWeek"] + "<br/>" +
                                                        "<b>Overview: </b>" + row.aData["Overview"] + "<br/>";
                                        return result;
                                    }
                                } //Details
                            ],
                "aaSorting": [[1, 'asc']],
                "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                    $(nRow).addClass(aData["SeriesId"].toString());
                }
            });

            $(".progressBar").each(function () {
                var element = this;

                var progressbar = $(element).progressbar({
                    value: parseInt($(element).attr("rel"))
                });

                var label = progressbar.find('.progressBarText').clone().width(progressbar.width());
                progressbar.find('.ui-progressbar-value').append(label);
            });
        });

        $("#seriesEditor").dialog({
            autoOpen: false,
            height: 'auto',
            width: 670,
            resizable: false,
            modal: true,
            buttons: {
                "Delete": {
                    text: "Delete",
                    class: "ui-delete-button",
                    click: function () {
                        var answer = confirm("Are you sure you want to delete this series?");
                        if (answer) {
                            var seriesId = $('#SeriesId').val();

                            $.ajax({
                                type: "POST",
                                url: seriesDeleteUrl,
                                data: { seriesId: seriesId },
                                success: function (data) {
                                    //Remove the row from the grid... along with the details row
                                    $('.' + seriesId).hide();
                                    $('.details_' + seriesId).hide();
                                }
                            });
                            $(this).dialog("close");
                        }
                    }
                },
                "Save": function () {
                    //Save the form
                    $('#SeriesEditorForm').submit();
                    updateStatus();

                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#seriesDelete").dialog({
            autoOpen: false,
            resizable: false,
            height: 'auto',
            width: 450,
            modal: true,
            buttons: {
                "Delete": function () {
                    var seriesId = $('.seriesId').val();
                    $.ajax({
                        type: "POST",
                        url: seriesDeleteUrl,
                        data: { seriesId: seriesId },
                        success: function (data) {
                            //Remove the row from the grid... along with the details row
                            $('.' + seriesId).hide();
                            $('.details_' + seriesId).hide();
                        }
                    });
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        $(".editButton")
            .live('click', function () {
                //Get the SeriesId and Title
                var seriesId = parseInt($(this).attr("value"));
                var title = $(this).attr("rel");

                //Set the title of the dialog
                $("#seriesEditor").dialog("option", "title", title);

                //Pre-populate the view with ajax
                $('#seriesEditor').html('<div style="text-align: center; width: 100%; height: 100%;"><img src="../../Content/Images/ajax-loader.gif" style="padding-top: 120px;" /></div>');

                //Get the view
                $.ajax({
                    url: seriesEditorUrl,
                    data: { seriesId: seriesId },
                    success: function (data) {
                        $('#seriesEditor').html(data);
                    }
                });

                //Open the dialog
                $("#seriesEditor").dialog("open");
            });

        $(".deleteButton")
            .live('click', function () {
                //Get the SeriesId and Title
                var seriesId = parseInt($(this).attr("value"));
                var title = $(this).attr("rel");

                //Set the title of the dialog
                //$("#seriesDelete").dialog("option", "title", "Delete Series: " + title);

                //Fill in the view
                $('#seriesDelete').children('.seriesId').val(seriesId);
                $('#seriesDelete').children('.seriesTitle').html(title);

                //Open the dialog
                $("#seriesDelete").dialog("open");
            });
            
            function updateStatus() {
                var monitored = $('#Monitored').attr('checked');
                var seriesId = $('#SeriesId').val();
                var status = $('#Status').val();
                var imgContainer = $('.' + seriesId).children('.statusColumn');
                                    
                if (!monitored) {
                    imgContainer.html(pauseImage);
                }
                                    
                else {
                    if (status === "Ended"){
                        imgContainer.html(stopImage);
                    }
                                            
                    else {
                        imgContainer.html(playImage);
                    }
                }
            }
    </script>
}