{% extends "master.html" %}

{% block title %}Waiting{% endblock %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="card m-t-3">
        <div class="card-header">
          <strong>Waiting</strong>
        </div>
        <div class="card-block">
          <p>
            We are waiting for your task to finish.
            This page should be refreshed automatically, but if not click
            <a href="{{ url_for('ui_ns.wait_task', taskid=task.id) }}">Here</a>
          </p>
          <p>
              Your task is currently <span id="status">{{ task.status }}</span>
          </p>
          <p id="slow" class="hidden">
            This is taking longer than usual... Sorry for that
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript">
var _delay = 1;
var _cnt = '{{ count }}';

function check_task_status(){
  var _url = '{{ url_for("ui_ns.wait_task", taskid=task.id) }}';
  $.ajax({
    url: _url ,
    type: 'GET',
    data: {
      js: 1,
      count: _cnt,
    },
    dataType: 'JSON',
    success: function(res) {
      _delay = res.count * 20;
      if (_delay > 2000){
        _delay = 2000;
      }
      _cnt = res.count;
      if (_cnt > 30) {
        $('#slow').show();
      }
      $('#status').text(res.status);
      window.setTimeout(check_task_status, _delay);
    },
    error: function() {
      var _url = '{{ url_for("ui_ns.wait_task", taskid=task.id, prev=prev) | safe }}';
      _url += _url.includes('?') ? '&' : '?';
      _url += 'count=' + _cnt;
      console.log('Sending to ' + _url);
      window.location = _url;
    }
  });
}

$(document).ready(function() {
  window.setTimeout(check_task_status, _delay);
});
  </script>
{% endblock %}