{% extends "layout.jinja2" %}

{% block content %}
<div class="content">
    <div class="row">
        <div class="col-xs-12">
            <h2>Latest Tag Values: {{tagname}}</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div id="time-range">
                <p><span id="slider-start" class="slider-time pull-left well"></span><span id="slider-end" class="slider-time pull-right well"></span></p>
                <div class="sliders_step1">
                    <div id="slider-range"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <canvas id="myChart" height="120"></canvas>
        </div>
    </div>
</div>


<script>

var urlparts = decodeURIComponent(window.location).split("/").slice(3)
var endD = new Date();
var end = endD.toISOString();
var dummyDate = new Date();
var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
var start = startD.toISOString();
var tagName = "{{tagname}}";
var scatterChart;

if(urlparts.length >= 5){
    start = urlparts[3];
    end = urlparts[4];
}

$.ajax({
    dataType: 'json',
    url:"/json/values/tag/{{tagname}}/daterange",
    success: drawSingleSlider
});

$.ajax({
    dataType: 'json',
    url: "/json/values/tag/" + tagName + "/between/" + start + "/" + end,
    success: drawSingleGraph
});

</script>
{% endblock content %}
