{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
    <div class="{% if error %}alert alert-danger{% endif %}">
        {% if error %}
            {{ error }}
        {% else %}
            Your request <b>{{ id }}</b> is being processed. Below you can see what's happening.
            During setup, buttons are disabled and will become available after test is finished.
        {% endif %}
    </div>
    {% if not error %}
    <div class="row marketing">
        <div class="log">
        </div>
        <canvas id="myChart" width="400" height="400"></canvas>
        <div class="download-buttons">
            <a href="{{ url_prefix }}/static/results/{{ id }}/scenario.jtl" id="download-btn" class="btn disabled btn-success">
               Download JTL file</a>
            <a href="{{ url_prefix }}/static/results/{{ id }}/scenario.log" id="download-btn" class="btn disabled btn-success">
               Download LOG file
            </a>
             <a href="{{ url_prefix }}/static/results/{{ id }}/response-times-over-time.csv" id="download-btn" class="btn disabled btn-success">
               Download response-times-over-time.csv file
            </a>
        </div>
    </div>
    {% endif %}
{% endblock %}
{% block javascript %}
<script src="https://code.jquery.com/jquery.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/Chart.min.js' %}"></script>
<script type="text/javascript">
    timer = null
    function doPoll(finish) {
        $.getJSON('{{ url_prefix }}/check/{{ id }}', function (json) {
            processData(json)
            if (json['finished'] == 1)
            {
                clearTimeout(timer)
                return
            }
            timer = setTimeout(doPoll, 2000)
        })
    }

    function processData(data) {
        if (data['error']) {
            $('.jumbotron').addClass('alert alert-danger')
            $('.jumbotron').html(data['error'])
            return
        }

        if (data['finished'] == 1) {
            $('.download-buttons #download-btn').each(function() {
                $(this).removeClass('disabled')
            });
        }

        $('.log').html('')
        for (var i=0; i<data['log_msgs'].length; i++)
        {
            $('.log').append(data['log_msgs'][i] + '<br />')
        }
    }

    $(document).ready(function () {
        doPoll()

        // Get context with jQuery - using jQuery's .get() method.
        var ctx = $("#myChart").get(0).getContext("2d");
        // This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx);

    })
</script>
{% endblock %}
