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

@model String
@using NzbDrone.Common
@using NzbDrone.Web.Models
@using NzbDrone.Web.Helpers
@{ViewBag.Title = "History";}
@section ActionMenu{
    <ul class="sub-menu">
        <li>@Ajax.ActionLink("Trim History", "Trim", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
        <li>@Ajax.ActionLink("Purge History", "Purge", "History", new AjaxOptions { OnSuccess = "reloadHistoryGrid" })</li>
    </ul>
}
@section HeaderContent
{
    @Html.IncludeCss("Grid.css")
}

<div class="grid-container">
    <table id="historyGrid" class="dataTablesGrid hidden-grid">
        <thead>
            <tr>
                <th></th>
                <th>Series Title</th>
                <th>Episode</th>
                <th>Episode Title</th>
                <th>Quality</th>
                <th>Grabbed On</th>
        
                @*Commands Column*@
                <th>Actions</th>
            
                @*Details Column*@
                <th style="display: none;">Details</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

@section Scripts{
    <script type="text/javascript">
        deleteHistoryRowUrl = '../History/Delete';
        redownloadUrl = '../History/Redownload';

        function reloadHistoryGrid() {
            var grid = $('#history').data('tGrid');
            grid.ajaxRequest();
        }

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

            oTable = $('.dataTablesGrid').dataTable({
            //"sAjaxSource": "History/AjaxBinding",
            //"bProcessing": true,
                "bShowAll": false,
                "aaData": @Html.Raw(Model),
            "bPaginate": true,
            "bLengthChange": false,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "bAutoWidth": false,
            "iDisplayLength": 20,
            "sPaginationType": "four_button",
            "aoColumns": [
                            { sWidth: '20px', "bSortable": false, "mDataProp": "Indexer", "fnRender": function (row) {
                                    return "<img src=\"/Content/Images/Indexers/" + row.aData["Indexer"] + ".png\" alt=\"" + row.aData["Indexer"] + "\">";
                                }
                            }, //Image
                            { sWidth: 'auto', "mDataProp": "SeriesTitle" }, //Series Title
                            { sWidth: '80px', "mDataProp": "EpisodeNumbering", "bSortable": false }, //EpisodeNumbering
                            { sWidth: 'auto', "mDataProp": "EpisodeTitle", "bSortable": false }, //Episode Title
                            { sWidth: '70px', "mDataProp": "Quality", "bSortable": false }, //Quality
                            { sWidth: '150px', "mDataProp": "Date" }, //Grabbed On
                            { sWidth: '40px', "mDataProp": "HistoryId", "bSortable": false, "fnRender": function (row) {
                                var deleteImage = "<img src=\"../../Content/Images/X.png\" alt=\"Delete\" title=\"Delete from History\" class=\"searchImage\" onclick=\"deleteHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ")\">";
                                var redownloadImage = "<img src=\"../../Content/Images/Downloading.png\" alt=\"Redownload\" title=\Redownload Episode\" class=\"searchImage\" onclick=\"redownloadHistory(this.parentNode.parentNode, " + row.aData["HistoryId"] + ", " + row.aData["EpisodeId"] + ")\">";

                                return deleteImage + redownloadImage;
                                //return createImageAjaxLink('/History/Delete?historyId=' + row.aData["HistoryId"], '../../Content/Images/X.png', 'Delete', 'Delete from History', 'searchImage');
                            }
                            }, //Actions
                {
                    sWidth: 'auto',
                    "mDataProp": "Details",
                    "bSortable": false,
                    "bVisible": false,
                    "fnRender": function(row) {
                        var result = "<b>Overview: </b>" + row.aData["EpisodeOverview"] + "<br/>" +
                            "<b>NZB Title: </b>" + row.aData["NzbTitle"] + "<br/>" +
                                "<b>Proper: </b>" + row.aData["IsProper"];
                        return result;
                    }
                } //Details
            ],
                "aaSorting": [[5, 'desc']]
            });
        });

        function deleteHistory(row, historyId) {
            //Delete from DB
            $.ajax({
                type: "POST",
                url: deleteHistoryRowUrl,
                data: { historyId: historyId },
                success: function() {
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));
                }
            });

        }

        function redownloadHistory(row, historyId, episodeId) {
            $.ajax({
                type: "POST",
                url: redownloadUrl,
                data: { historyId: historyId, episodeId: episodeId },
                success: function() {
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));
                }
            });
        }
    </script>
}