{% extends "master.html" %}

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

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-md-7 mx-auto">
      <div class="alert alert-info text-center mt-5">
        <div class="mb-3">
          <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
        </div>
        <h3 class="font-weight-bold mb-3">
          Waiting
        </h3>
        <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 class="font-weight-bold">
          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>
{% endblock %}

{% block jscripts %}
{{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}">
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();
        $('.alert.alert-info').toggleClass("alert-info alert-warning");
      }
      $('#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 %}