{% extends "base.html" %}

{% block content %}

  <div class="row">

    {% for device in devices %}
        <div>
            <h2>{{ device.name }}</h2>

            {% for series in device.get_series() %}
                <h3>
                    {{ series.name }}
                    <span id="{{ series.name }}_{{ device.name|replace(" ", "_") }}_latest"></span>
                </h3>
                <div id="{{ series.name }}_{{ device.name|replace(" ", "_") }}_chart"></div>
            {% endfor %}

        </div>
    {% endfor %}

  </div>

{% endblock %}

{% block js %}

<script type="text/javascript">

$(function(){

    var tv = 500;


    var graph_factory = function(series_name, device, start, end){

        var element_name = series_name + '_' + device + '_chart';

        element_name = element_name.replace(' ', '_');

        var url = '/data/' + series_name + '/' + device + '/' + start + '/' + end + '/';

        d3.json(url, function(data) {

            var series = data.series;

            var min = Math.min(series[0].min, series[1].min);
            var min = min * 0.95;
            var max = Math.max(series[0].max, series[1].max);
            var max = max * 1.05;

            var scaler = d3.scale.linear().domain([min, max]).nice();

            $.each(series, function(x, dict){
                dict.scale = scaler;
                $.each(dict.data, function(y, point){
                    point.x = Date.parse(point.x) / 1000;
                });
            });

            var graph = new Rickshaw.Graph({
                element: document.getElementById(element_name),
                width: 690,
                height: 160,
                renderer: 'multi',
                series: series,
                interpolation: 'linear',
            });

            var x_axis = new Rickshaw.Graph.Axis.Time({
                graph: graph
            });
            var y_axis = new Rickshaw.Graph.Axis.Y.Scaled({
                graph: graph,
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                scale: scaler
            });

            var hoverDetail = new Rickshaw.Graph.HoverDetail( {
                graph: graph
            } );

            graph.render();


        });


        var latest_element_name = series_name + '_' + device + '_latest';

        $.get("/api/devices/" + device).done(function(data){
            $("#" + latest_element_name).html(
                "(latest reading: " + data.latest[series_name].value + " on " + data.latest[series_name].created_at +")")
        });

    };


    fmt = function(date){
        // Convert the date into YYYY-MM-DD HH:MM:SS
        // btw, JavaScript date handling is horrible. It's basically broken.
        var yyyy =  date.getFullYear();
        var mm = ('0' + (date.getMonth()+1)).slice(-2);
        var dd = ('0' + (date.getDate())).slice(-2);
        var hh = ('0' + (date.getHours())).slice(-2);
        var min = ('0' + (date.getMinutes())).slice(-2);
        return yyyy + '-' + mm + '-' + dd + "%20" + hh + ":" + min;
    }

    var today = new Date();
    var past = new Date();
    past.setDate(past.getDate() - 1);

    var start = fmt(past);
    var end = fmt(today)

    {% for device in devices %}
        {% for series in device.get_series() %}
            graph_factory("{{ series.name }}", "{{ device.name }}", start, end);
        {% endfor %}
    {% endfor %}

});


</script>

{% endblock %}
