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

@using NzbDrone.Common
@using NzbDrone.Web.Helpers
@using NzbDrone.Web.Models;
@model List<NzbDrone.Web.Models.SeriesModel>
@{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 class="seriesTable">
    
    <colgroup>
        <col style="width: 10px"/>
        <col style="width:auto" />
        <col style="width:100px" />
        <col style="width:100px" />
        <col style="width:140px" />
        <col style="width:100px" />
        <col style="width:80px"/>
    </colgroup>
    <thead>
        
        <tr>
            <th>Status</th>
            <th>Title</th>
            <th>Seasons</th>
            <th>Quality</th>
            <th>Next Airing</th>
            <th>Episodes</th>
        
            @*Commands Column*@
            <th>
            
            </th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
            var series = Model[i];
        
            if (i % 2 == 0)
            {
                Html.RenderPartial("Series", series);
            }

            else
            {
                Html.RenderPartial("Series", series, new ViewDataDictionary { new KeyValuePair<string, object>("AltRow", true) });
            }
        }
    </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';

        $(document).ready(function () {
            $(".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")
            //.button()
            .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")
            //.button()
            .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 img = $('.' + seriesId).children('.statusColumn').children('img');
                var state = img.attr('alt');

                if (state == "Ended")
                    return;

                if (state == "Active") {
                    if (!monitored) {
                        img.attr('title', 'Not monitored');
                        img.attr('alt', 'Paused');
                        img.attr('src', '../../Content/Images/pause.png');
                    }
                }

                if (state == "Paused") {
                    if (monitored) {
                        img.attr('title', 'Continuing');
                        img.attr('alt', 'Active');
                        img.attr('src', '../../Content/Images/play.png');
                    }
                }
            }
    </script>
}