{% extends "layout.html" %}

{% block content %}
<div class="row">
    <div class="col-12">
        <figure>
            <div id="history_graph">{{history_graph|safe}}</div>
            <figcaption class="float-right">
                <span id="history_graph_zoom_out" class="h4 oi oi-zoom-out text-muted" style="cursor:pointer;"></span>
                <span id="history_graph_zoom_in" class="h4 oi oi-zoom-in text-muted" style="cursor:pointer;"></span>
            </figcaption>
            <figcaption class="float-left">
                <span class="h4 text-muted">{{instance_count}} instances</span>
                <span class="h4 text-muted">&mdash; {{client_count}} clients</span>
                <span class="h4 text-muted">&mdash; {{server_count}} servers</span>
            </figcaption>
        </figure>

    </div>
    <div class="col-12">

    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>
<script>
    let dataPoints = {{data_points}};
    let maxPoints = 2880;
    maxPoints = Math.min(maxPoints, dataPoints);
    let zoomLevel = Math.floor(maxPoints);
    let performingZoom = false;

    function updateHistoryGraph() {
        perfomingZoom = true;
        $.get('/history/' + zoomLevel)
            .done(function (content) {
                $('#history_graph').html(content.message);
                //maxPoints = Math.min(maxPoints, dataPoints);
                perfomingZoom = false;
            });
    }

    //setInterval(updateHistoryGraph, 30000);

    $('#history_graph_zoom_out').click(function () {
        if (performingZoom === true) {
            return false;
        }
        zoomLevel = Math.floor(zoomLevel * 2) <= maxPoints ? Math.floor(zoomLevel * 2) : maxPoints;
        updateHistoryGraph();
    });

    $('#history_graph_zoom_in').click(function () {
        if (performingZoom === true) {
            return false;
        }
        zoomLevel = zoomLevel / 2 > 2 ? Math.ceil(zoomLevel / 2) : 2;
        updateHistoryGraph();
    });

</script>
{% endblock %}