{% 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>
        <form action="{{ form_action }}" method="POST" id="waitform">
          <input type="hidden" name="taskid" value="{{ taskid }}">
          {% for field in form_data %}
            <input type="hidden" name="{{ field }}" value="{{ form_data[field] }}">
          {% endfor %}
          {{ csrf }}
          <p>
            We are waiting for your task to finish.
            This page should be refreshed automatically, but if not click
            <input type="submit" value="Here">.
          </p>
          <p id="status_p font-weight-bold" class="hidden">
            Your task is currently <span id="status"></span>
          </p>
          <p id="slow" class="hidden">
            This is taking longer than usual... Sorry for that.
          </p>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}


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

    function check_task_status(){
      console.log(_cnt);
      var _url = '{{ url_for("ui_ns.wait_task", taskid=taskid) }}';
      $.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);
          $('#status_p').show();
          if (res.status != 'PENDING'){
              $('#waitform').submit()
          }
          window.setTimeout(check_task_status, _delay);
        },
        error: function() {
          $('#waitform').submit()
        }
      });
    }

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