{% extends "base.html" %}
{% load staticfiles %}

{% block extrahead %}
{{ block.super }}
<script src="{% static "node_modules/plotly.js-dist/plotly.js" %}"></script>
<script>

function drawGraph(data, graph_id, graph_title){
    var container = document.getElementById(graph_id);
    var plot_data = { x: data[0],
        y: data[1],
        line: {shape: "hv"},
        type: "scatter",
        mode: "lines+makers",
    };
    var layout = {
        title: graph_title,
        yaxis: {
            rangemode: 'tozero',
            autorange: true
        }
    };
    Plotly.newPlot(container, [plot_data], layout);
}

function getData() {
    var req = new XMLHttpRequest();
    var url = "/booking/stats/json";
    var day_input = document.getElementById("number_days");
    var days = day_input.value;
    //var days = document.getElementById("number_days").value;
    if(days){
        url = url + "?days=" + days;
    }
    req.onreadystatechange = function(){
        if( req.readyState == XMLHttpRequest.DONE) {
            var data = JSON.parse(req.responseText);
            drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
            drawGraph(data["user"], "user_graph_container", "Active Users");
        }
    }
    req.open("GET", url, true);
    req.send();
}

</script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-auto">
        <p>Number of days to plot: </p>
        <div class="form-group d-flex align-content-center">
            <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
            <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12 col-md-10">
        <!-- These graphs do NOT get redrawn when the browser size is changed -->
        <div id="all_graph_container border" class="mw-100">
            <div id="booking_graph_wrapper">
                <div id="booking_graph_container"/>
            </div>
            <div id="user_graph_wrapper">
                <div id="user_graph_container"/>
            </div>
        </div>
    </div>
</div>
<script>
var data = {{data|safe}};
drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
drawGraph(data["user"], "user_graph_container", "Active Users");
</script>
{% endblock content %}