{% extends "tweet/base.html" %}

{% block title %}Download continu{% endblock %}   

{% block content %}
    <div class="page-header">
    <h1>Download Excel voor continu zoeken</h1> 
    </div>

    <h2>Voortgang</h2>
    <p>Het Excel-bestand wordt nu voor je gemaakt, even geduld aub...</p>
    <p><span id="done">0</span> van de <span id="total">?</span> tweets ge-exporteerd</p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 0%;">
        0%
      </div>
    </div>
    <a class="btn btn-success" disabled="disabled" href="{% url 'tweet:download_stream' %}">Download Excel</a>
   </div>

<script type="text/javascript" charset="utf-8">
var updateProgress=function() {
  $(".progress-bar").each(function(){
    //alert("id: " + id);
    url="{% url 'tweet:export_stream_progress' %}"
    $.ajax({
        url: url,
        success: function(data) {
          bar=$(".progress-bar")
          bar.html(data.progress+"%");
          bar.css('width', data.progress+'%');
          bar.attr("aria-valuenow", data.progress);
          $("#done").html(data.done);
          $("#total").html(data.total);
          if(data.finished) {
            $(".btn").removeAttr("disabled");
            clearInterval(ticker);
          }
        },
        error: function() {
          // ignore alert("Error!")
        }
    })
  });
}

var ticker = setInterval(function(){updateProgress()},1000);
</script>
{% endblock %}