{% extends "base.html" %}
{% load i18n %}
{% block headtitle %}Scheduled Tasks{% endblock %}


{% block main_content %}
<div class="page-header">
  <h1>{% trans 'Scheduled Tasks' %}</h1>
</div>

<table class="table table-bordered table-condensed" id="tasks_table">
  <thead>
    <tr>
      <th>{% trans 'Task Description' %}</th>
      <th>{% trans 'Next Auto Execution' %}</th>
      <th>{% trans 'Frequency' %}</th>
      <th>{% trans 'Last Execution' %}</th>
      <th>{% trans 'Last Result' %}</th>
      <th>{% trans 'Is Running' %}</th>
      <th>{% trans 'Is Scheduled' %}</th>
      <th>{% trans 'Force Execution' %}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="8" class="dataTables_empty">{% trans 'Loading data from server...' %}</td>
    </tr>
  </tbody>
</table>
{% endblock %}


{% block post_javascripts %}
<script type="text/javascript">
LOADING_ICON = '<img src="/static/ecm/img/throbber.gif" alt="Running"/>';
SCHEDULED_ICON = '<img src="/static/ecm/img/clock.png" alt="Scheduled"/>';
TABLE = null;
$(document).ready(function() {
    TABLE = $('#tasks_table').dataTable($.extend(true, {}, DATATABLE_DEFAULTS, {
        iDisplayLength: 25,
        sAjaxSource: "/scheduler/tasks/data/",
        bProcessing: false,
        sDom: 'rt',
          aoColumns: [
              { bSearchable: false, bSortable: false},
              { bSearchable: false, bSortable: false},
              { bSearchable: false, bSortable: false},
              { bSearchable: false, bSortable: false},
              { sClass: 'center', bSearchable: false, bSortable: false},
              { sClass: 'center', bSearchable: false, bSortable: false},
              { sClass: 'center', bSearchable: false, bSortable: false},
              { sClass: 'center', bSearchable: false, bSortable: false}
          ],
          fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
              var lauch_btn = $('td:eq(7) a', nRow);
              lauch_btn.addClass('btn btn-mini btn-info');
              lauch_btn.attr('data-loading-text', 'Running...')

              var success = aData[4];
              var running = aData[5];
              var scheduled = aData[6];

              if (success) {
                  $('td:eq(4)', nRow).html('success');
                  $('td:eq(4)', nRow).css('color', 'green');
              } else {
                  $('td:eq(4)', nRow).html('<strong>ERROR</strong>');
                  $('td:eq(4)', nRow).css('color', 'red');
              }

              if (running) {
                  $('td:eq(5)', nRow).html(LOADING_ICON);
              } else {
                  $('td:eq(5)', nRow).html('-');
              }

              if (scheduled) {
                  $('td:eq(6)', nRow).html(SCHEDULED_ICON);
              } else {
                  $('td:eq(6)', nRow).html('-');
              }

              if (running || scheduled) {
                  lauch_btn.button('loading');
              }

              lauch_btn.on('click', function (event) {
                  event.preventDefault();
                  $.get(this.href)
                   .success(function () {
                       lauch_btn.button('loading');
                       $('td:eq(6)', nRow).html(SCHEDULED_ICON);
                   });
              });
              return nRow;
          }
    }));

    setTimeout("refreshTable();", 5000);
});
function refreshTable() {
    TABLE.fnDraw();
    setTimeout("refreshTable();", 5000);
}

</script>
{% endblock %}