{% extends "admin-base.twig" %}

{% block adminpage %}

<p>{% trans "This page shows you the current state of background jobs in Datawrapper." %}</p>

<ul class="unstyled" style="padding-left: 10px; border-left: 6px solid #bcd">
    <li><b>{{ queued }}</b> {% trans "queued jobs" %} ({% trans "estimated time to finish" %}: <b>{{ est_time }}</b> {% trans "minutes" %}) </li>
    <li><b>{{ failed }}</b> {% trans "failed jobs" %} </li>
    <li><b>{{ done }}</b> {% trans "completed jobs" %} </li>
</ul>

{% if jobs %}


<style type="text/css">
.msg {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
}
tr:hover .msg {
    overflow: visible;
    white-space: normal;
    text-overflow: none;
    -o-text-overflow: none;
}
</style>

<script type="text/javascript">

$(function() {
    function changeStatus(job_id, status) {
        return $.ajax({
            url: '/api/jobs/'+job_id,
            type: 'PUT',
            dataType: 'json',
            data: JSON.stringify({ status: status }),
            success: function() {
                dw.backend.logMessage('Status of job <b>'+job_id+'</b> has been changed to <b>'+status+'</b>.', $('table').parent());
                var tr = $('tr[data-id='+job_id+']');
                tr.remove();
                if ($('tbody tr').length === 0) location.reload();
            },
            error: function(error, res, f, b) {
                dw.backend.logError('Error:' + f, $('table').parent());
            }
        });
    }
    $('a.retry').click(function(e) {
        e.preventDefault();
        changeStatus($(e.target).parents('tr').data('id'), 'queued');
    });
    $('a.cancel').click(function(e) {
        e.preventDefault();
        changeStatus($(e.target).parents('tr').data('id'), 'canceled');
    });
});

</script>

<div>
    <div class="alert alert">
        <h4>{% trans "Warning!" %}</h4>
        {% trans "The following jobs have not been finished properly." %}
    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead><tr>
            <th>#</th>
            <th>{% trans "Created" %}</th>
            <th>{% trans "Type" %}</th>
            <th>{% trans "User" %}</th>
            <th>{% trans "Chart" %}</th>
            <th>{% trans "Visualization" %}</th>
            <th>{% trans "Theme" %}</th>
            <th>{% trans "Fail Reason" %}</th>
            <th>...</th>
        </tr></thead>
        <tbody>

    {% for job in jobs %}
        <tr data-id="{{ job.id }}">
            <td>{{ job.id }}</td>
            <td>{{ job.createdAt | date("Y-m-d") }}</td>
            <td>{{ job.type }}</td>
            <td><a href="/admin/charts/{{ job.user.id }}">{{ job.user.email }}</td>
            <td><a href="/chart/{{ job.chartid }}/visualize">{{ job.chartid }}</a></td>
            <td>{{ job.chart.type }}</td>
            <td>{{ job.chart.theme }}</td>
            <td><div class="msg">{{ job.failReason }}</div></td>
            <td style="text-align:right;white-space:nowrap">
                <a class="retry" href="#retry"><i class="icon-refresh"></i></a>
                &nbsp;
                <a class="cancel" href="#cancel"><i class="icon-remove"></i></a>
            </td>
        </tr>
    {% endfor %}
        </tbody>
    </table>
</div>

{% else %}

<div class="alert alert-success">
    <h4>{% trans "Good news!" %}</h4>
    {% trans "All jobs have been finished properly." %}
</div>

{% endif %}

{% endblock %}
