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

@using NzbDrone.Web.Helpers
@{ViewBag.Title = "NzbDrone";}

@section HeaderContent
{
    @Html.IncludeCss("Settings.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;
        line-height: normal;
    }

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

    .ui-progressbar-value .progressBarText
    {
        position: relative;
        font-weight: normal;
        color: white;
        line-height: normal;
    }
    
    /* Set the row height so it won't resize when the progress bar is created */
    .seriesTable tr
    {
        height: 28px;
    }
       
    .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", null, new { Title = "Add a new or existing series" })</li>
        <li>@Ajax.ActionLink("Start RSS Sync", "RssSync", "Command", null, null, new { Title = "Check for newly released downloads" })</li>
        <li>@Html.ActionLink("Series Editor", "Editor", "Series", null, new { Title = "Edit multiple 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: 100px">Network</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 class="series-delete-files">
            @Html.CheckBox("DeleteFromDisk")
            <label for="DeleteFromDisk">Delete all files from disk?</label>
        </div>
    </div>
</div>
@section Scripts{
    @Html.IncludeScript("NzbDrone/series.js")

    <script type="text/javascript">
        
        var pauseImage = '<i class="icon-pause grid-icon" title="Not Monitored"></i>';
        var stopImage = '<i class="icon-stop grid-icon" title="Ended"></i>';
        var playImage = '<i class="icon-play grid-icon" title="Continuing"></i>';

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

            oTable = $('.dataTablesGrid').dataTable({
                "sAjaxSource": "Series/Series",
                "bServerSide": false,
                "bShowAll": false,
                "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" }, //Seasons
                                { sWidth: '100px', "mDataProp": "QualityProfileName", sClass: "qualityColumn" }, //Quality
                                { sWidth: '120px', "mDataProp": "Network" }, //Network
                                { 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 = 100;
                                        if (row.aData["EpisodeCount"] > 0)
                                            progress = row.aData["EpisodeFileCount"] / row.aData["EpisodeCount"] * 100;
                                        
                                        var result = "<div class='progressBar' data-value='" + 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 "<i class='icon-cog editButton gridAction' title = 'Edit Series' data-series-id='" + row.aData["SeriesId"] + "' data-series-title='" + row.aData["Title"] + "' ></i> " +
                                                "<i class='icon-remove deleteButton gridAction' title = 'Delete Series' data-series-id='" + row.aData["SeriesId"] + "' data-series-title='" + row.aData["Title"] + "'></i>";
                                    }
                                }, //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>Air Time: </b>" + row.aData["AirTime"] + "<br/>" +
                                                        "<b>Overview: </b>" + row.aData["Overview"] + "<br/>";
                                        return result;
                                    }
                                } //Details
                            ],
                "aaSorting": [[1, 'asc']],
                "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                    $(nRow).attr('data-series-id', aData["SeriesId"].toString());
                },
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    var element = $(nRow).find('.progressBar');
                    
                    var progressbar = $(element).progressbar({
                        value: parseInt($(element).attr("data-value"))
                    });

                    var label = progressbar.find('.progressBarText').clone().width(progressbar.width());
                    progressbar.find('.ui-progressbar-value').append(label);
                },
                "oLanguage": {
                    "sEmptyTable": "No series have been added"
                }
            });
        });
        
        //After we delete a series do this...
        function afterDelete(seriesId) {
            var row = $('[data-series-id="' + seriesId + '"]');
            
            if ($(row).hasClass('details-opened')) {
                var nextRow = $(row).next('tr');
                if($(nextRow).children('.Details').length > 0) {
                    $(nextRow).hide();
                }
            }
            
            $(row).hide();
        }
        
        //After we save do this...
        function afterSave() {
            updateStatus();
            
            //Update Quality
            var seriesId = $('#SeriesId').val();
            var quality = $('#QualityProfileId :selected').text();
            $('.' + seriesId).children('.qualityColumn').text(quality);
        }

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