{% extends "newbase.html" %}
{% load static %}
{% 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 %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>

<script>
  var previous = null;
  var current = null;
  var formNotChanged = true;
  (function checkJobs() {
  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/list-jobs/', function(json) {
  current = JSON.stringify(json);
  $('form').each(function() {
     $(this).change(function() {
        formNotChanged = false;
     });
  });
  if (previous && current && previous !== current && formNotChanged) {
      if (previous.length != current.length) {
        console.log('refresh');
        location.reload();
      }

      $('.progressBar').each(function() {
          var bar = $(this);
          var maxvalue = $(this).attr('data').substring(3);
          var barid = $(this).attr('id').substring(0,10)
          $.each(json, function(index,record) {
            var recordid = record['id'].substring(0,10)

            if (recordid == barid) {
              if (record['progrss']<100 || parseInt(maxvalue)<100) {
              maxvalue = record['progress'].toString();
            }
            }
          });
          var text = $(this).children('div').data('show');
          progress(maxvalue, bar, text);


      });
  };
  previous = current;
  });
  setTimeout(checkJobs, 1000);
  }());

</script>
{% endblock %}


{% block main %}


<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" id="{{ task|lookup:'id' }}" 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 %}

{% block sidebar %}
{% include 'menu_workouts.html' %}
{% endblock %}