calibre-web/cps/templates/tasks.html

{% extends "layout.html" %}
{% block header %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
{% endblock %}
{% block body %}
<div class="discover">
    <h2>{{_('Tasks list')}}</h2>
    <table class="table table-no-bordered" id="table" data-url="{{'/ajax/emailstat'}}"  data-sort-name="starttime" data-sort-order="asc">
      <thead>
        <tr>
            {% if g.user.role_admin() %}
            <th data-halign="right" data-align="right" data-field="user" data-sortable="true">{{_('User')}}</th>
            {% endif %}
            <th data-halign="right" data-align="right" data-field="type" data-sortable="true">{{_('Task')}}</th>
            <th data-halign="right" data-align="right" data-field="status" data-sortable="true">{{_('Status')}}</th>
            <th data-halign="right" data-align="right" data-field="progress" data-sortable="true" data-sorter="elementSorter">{{_('Progress')}}</th>
            <th data-halign="right" data-align="right" data-field="runtime" data-sortable="true" data-sort-name="rt">{{_('Runtime')}}</th>
            <th data-halign="right" data-align="right" data-field="starttime" data-sortable="true" data-sort-name="id">{{_('Starttime')}}</th>
            <th data-field="id" data-visible="false"></th>
            <th data-field="rt" data-visible="false"></th>
        </tr>
      </thead>
    </table>
  <!--div class="btn btn-default" id="tasks_delete">{{_('Delete finished tasks')}}</div>
  <div class="btn btn-default" id="tasks_hide">{{_('Hide all tasks')}}</div-->
</div>
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
        <script>
            $('#table').bootstrapTable({
               formatNoMatches: function () {
                return '';
                },
                striped: true
            });
            setInterval(function() {
                $.ajax({
                    method:"get",
                    url: "{{'/ajax/emailstat'}}",
                    async: true,
                    timeout: 900,
                    success:function(data){
                    $('#table').bootstrapTable("load", data);
                }
                });
            }, 1000);
            function elementSorter(a, b) {
                a = +a.slice(0, -2);
                b = +b.slice(0, -2);
                if (a > b) return 1;
                if (a < b) return -1;
                return 0;
            }
        </script>

{% endblock %}