cosmicpi-rpi_V1.5/frontend/templates/dashboard.html

{% extends "cosmic_base.html" %}
{% block title %}Dashboard{% endblock %}
{% block head_additions %}

<script>

var reloading;

function checkReloading() {
    if (window.location.hash=="#autoreload") {
        reloading=setTimeout("window.location.reload();", 5000);
        document.getElementById("reloadCB").checked=true;
    }
}

function toggleAutoRefresh(cb) {
    if (cb.checked) {
        window.location.replace("#autoreload");
        reloading=setTimeout("window.location.reload();", 5000);
    } else {
        window.location.replace("#");
        clearTimeout(reloading);
    }
}

window.onload=checkReloading;

</script>
{% endblock %}
{% block content %}
	<h1>Dashboard</h1>

    <input type="checkbox" onclick="toggleAutoRefresh(this);" id="reloadCB"> Auto Refresh dashboard every 5 seconds

    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading">
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <img id="img" src="/histogram.png?start_time=-120&end_time=9000000000&bin_size_seconds=1"/>
            </div>
        </div>
    </div>


    {% for value in values_to_display %}
    <div class="col-lg-4 col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="{{ value['icon'] }}"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge" style="font-size: 24px">{{ value['value'] }}</div>
                        <div>{{ value['name'] }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}


{% endblock %}