{% 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 pr-3 mr-4">
                <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>
        </figure>
       
    </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 zoomLevel = Math.ceil(dataPoints / 2);
        //console.log(dataPoints);

        function updateHistoryGraph() {
            $.get('/history/' + zoomLevel)
                .done(function (content) {
                    $('#history_graph').html(content.message);
                });
        }
        setInterval(updateHistoryGraph, 30000);

        $('#history_graph_zoom_out').click(function () {
           // console.log(zoomLevel);
            zoomLevel = zoomLevel * 2 < dataPoints ? Math.ceil(zoomLevel * 2) : dataPoints;
            updateHistoryGraph();
        });

        $('#history_graph_zoom_in').click(function () {
           // console.log(zoomLevel);
            zoomLevel = zoomLevel / 2 > 2 ? Math.ceil(zoomLevel / 2) : 2;
            updateHistoryGraph();
        });
        
    </script>
{% endblock %}