{% extends '_base_list.html' %}
{% load i18n static %}
{% block table_search %}{% endblock %}
{% block table_container %}
    <table class="table table-striped table-bordered table-hover " id="task_list_table">
        <thead>
        <tr>
            <th class="text-center">
                <input id="" type="checkbox" class="ipt_check_all">
            </th>
            <th class="text-left">{% trans 'Name' %}</th>
            <th class="text-center">{% trans 'Run times' %}</th>
            <th class="text-center">{% trans 'Hosts' %}</th>
            <th class="text-center">{% trans 'Success' %}</th>
            <th class="text-center">{% trans 'Date' %}</th>
            <th class="text-center">{% trans 'Time' %}</th>
            <th class="text-center">{% trans 'Action' %}</th>
        </tr>
        </thead>
    </table>
{% endblock %}

{% block content_bottom_left %}{% endblock %}
{% block custom_foot_js %}
<script>
$(document).ready(function () {
    var options = {
        ele: $('#task_list_table'),
        buttons: [],
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData, rowData) {
                cellData = htmlEscape(cellData);
                var innerHtml = '<a href="{% url "ops:task-detail" pk=DEFAULT_PK %}">' + cellData + '</a>'
                innerHtml = innerHtml.replace('{{ DEFAULT_PK }}', rowData.id);
                $(td).html(innerHtml);
            }},
            {targets: 2, createdCell: function (td, cellData) {
                var summary = cellData ? cellData.stat : {failed: 0, success: 0, total: 0};
                var innerHtml = '<span class="text-danger">failed</span>/<span class="text-navy">success</span>/total';
                innerHtml = innerHtml.replace('failed', summary.failed)
                    .replace('success', summary.success)
                    .replace('total', summary.total);
                $(td).html(innerHtml);
            }},
            {targets: 3, createdCell: function (td, cellData) {
                var hostsAmount = cellData ? cellData.hosts_amount : 0;
                 $(td).html(hostsAmount)
            }},
            {targets: 4, createdCell: function (td, cellData) {
                var successBtn = '<i class="fa fa-check text-navy"></i>';
                var failedBtn = '<i class="fa fa-times text-danger"></i>';
                if (cellData && cellData.is_success) {
                    $(td).html(successBtn)
                } else {
                    $(td).html(failedBtn)
                }
            }},
            {targets: 5, createdCell: function (td, cellData) {
                if (cellData) {
                    $(td).html(toSafeLocalDateStr(cellData.date_start));
                } else {
                    $(td).html('');
                }
            }},
            {targets: 6, createdCell: function (td, cellData) {
                cellData = cellData ? cellData.timedelta : 0;
                var delta = readableSecond(cellData);
                $(td).html(delta);
            }},
            {
                targets: 7,
                createdCell: function (td, cellData, rowData) {
                    var runBtn = '<a data-uid="ID" class="btn btn-xs btn-primary btn-run">{% trans "Run" %}</a> '.replace('ID', cellData);
                    var delBtn = '<a data-uid="ID" class="btn btn-xs btn-danger btn-del">{% trans "Delete" %}</a>'.replace('ID', cellData);
                    $(td).html(runBtn + delBtn)
                }
            }
        ],
        ajax_url: '{% url "api-ops:task-list" %}',
        columns: [
            {data: "id"}, {data: "name", className: "text-left"},
            {data: "latest_history", orderable: false},
            {data: "latest_history", orderable: false},
            {data: "latest_history", orderable: false}, {data: "latest_history"},
            {data: "latest_history", orderable:false}, {data: "id", orderable: false},
        ],
        order: [],
        op_html: $('#actions').html()
    };
    jumpserver.initServerSideDataTable(options);
}).on('click', '.btn-del', function () {
    var $this = $(this);
    var name = $this.closest("tr").find(":nth-child(2)").children('a').html();
    var uid = $this.data('uid');
    var the_url = '{% url "api-ops:task-detail" pk=DEFAULT_PK %}'.replace('{{ DEFAULT_PK }}', uid);
    objectDelete($this, name, the_url);
}).on('click', '.btn-run', function () {
    var $this = $(this);
    var name = $this.closest("tr").find(":nth-child(2)").children('a').html();
    var uid = $this.data('uid');
    var the_url = '{% url "api-ops:task-run" pk=DEFAULT_PK %}'.replace('{{ DEFAULT_PK }}', uid);
    var error = function (data) {
        alert(data)
    };
    var success = function(data) {
        var task_id = data.task;
        showCeleryTaskLog(task_id);
    };
    requestApi({
        url: the_url,
        error: error,
        method: 'GET',
        success: success,
        success_message: "{% trans 'Task start: ' %}" + " " + name
    });
})
</script>
{% endblock %}

