{% extends "base.html" %}
{% load staticfiles %}
{% load rowerfilters %}

{% block title %}Rowsandall - Tasks {% endblock %}

{% block meta %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style type="text/css">
    .progressBar div {
        border-radius:5px;
       height: 100%; 
/*        padding: 4px 10px; */
        font-size: 15px;
        color: #fff;
        text-align: right;
        line-height: 22px;
        width: 0;
        vertical-align: middle;
        background-color: #0099ff;
    }
</style>
<script type='text/javascript'
   src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
   $(document).ready(function(){
            $('.progressBar').each(function() {
                var bar = $(this);
                var maxvalue = $(this).attr('data');
                maxvalue = 0;
                var text = $(this).children('div').data('show');
                progress1(maxvalue, bar, text);
            });
            $('.progressBar').each(function() {
                var bar = $(this);
                var maxvalue = $(this).attr('data');
                maxvalue = maxvalue.substring(3);
                var text = $(this).children('div').data('show');
                progress(maxvalue, bar, text); 
            });
    });
    
    function progress1(percent, element, text) {
        element.find('div').animate({ width: percent+'%' }, 1).html(text +"&nbsp;"+ percent + "%&nbsp;");
    }
    function progress(percent, element, text) {
        element.find('div').animate({ width: percent+'%' }, 'slow').html(text +"&nbsp;"+ percent + "%&nbsp;");
    }
</script>
{% endblock %}

{% block scripts %}
{% include "monitorjobs.html" %}
{% endblock %}

    
{% block content %}

  
<h1>Your Tasks Status</h1>
<p>Manage the asynchronous tasks running for you</p>


<div class="grid_12 alpha">
  <table width="100%" class="listtable shortpadded">
    <thead>
      <tr>
        <th>ID</th>
        <th>Task</th>
        <th>Started At</th>
        <th>Progress</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
  {% for task in taskstatus %}
      <tr>
        <td>
          {{ task|lookup:'id' }}
        </td>
        <td>
          {{ task|lookup:'verbose' }}
        </td>
        <td>
          {{ task|lookup:'started_at' }}
        </td>
        <td>
    <div  class="progressBar" data="max{{ task|lookup:'progress' }}"  style="width: 100%;">
    <div data-show="">    {{ task|lookup:'progress' }}</div>
    </div>

        </td>
        <td>
          {{ task|lookup:'status' }}
        </td>
        {% if task|lookup:'failed' %}
        <td>
          <a href="/rowers/job-kill/{{ task|lookup:'id' }}" class="button red small">Remove</a>
        </td>
        {% elif task|lookup:'finished' %}
        <td>
          <a href="/rowers/job-kill/{{ task|lookup:'id' }}" class="button green small">Remove</a>
        </td>
        {% else %}
        <td>
          &nbsp;
        </td>
        {% endif %}
      </tr>
      {% endfor %}
      </tbody>
  </table>
</div>



{% endblock %}