Radarr/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>
        <li>@Html.ActionLink("Series Editor", "SeriesEditor", "Series")</li>
    </ul>
}

<table id="seriesGrid" class="dataTablesGrid hidden-grid">
    <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 style="visibility: hidden">
    <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>
</div>
@section Scripts{
    @Html.IncludeScript("NzbDrone/series.js")

    <script type="text/javascript">
        
        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,
                "iCookieDuration": 60 * 60 *24 * 365, //1 year
                "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 "<a href='/Series/Details?seriesId=" + source["SeriesId"] + "'>" + source["Title"] + "</a>";
                                                                        }
                                                                        // '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);
            });
        });
        
        //After we delete a series do this...
        function afterDelete(seriesId) {
            $('.' + seriesId).hide();
            $('.details_' + seriesId).hide();
        }
        
        //After we save do this...
        function afterSave() {
            updateStatus();
        }

        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>
}