<div id="ups-container"></div>



<script language="javascript" type="text/javascript">
$(function() {
    updateUps();
});

function updateUps(){
    $.getJSON("{{nav.getUrl()}}&json&ups", function( data ) {
        $.each(data['ups'], function( index, ups ){
            var element = null;
            var html_id = "ups-id-" + ups.id;
            if($("#"+html_id).length)
                element = $("#" + html_id);
            else{ // Create new element
                element = $("#template").children().clone();
                $(element).attr("id", html_id);
                $(element).appendTo("#ups-container");
            }

            $(element).find(".ups-id").html(ups.id);
            $(element).find(".ups-model").html(ups.model);
            $(element).find(".ups-description").html(ups.desc);
            $(element).find(".ups-charge").html(ups.charge+"%");
            $(element).find(".ups-load").html(ups.load+"%");
            $(element).find(".ups-usage").html(ups.power_usage+"W");

            // Set battery icon
            var battery = $(element).find(".battery .charge");
            battery.height(ups.charge+"%");
            if(ups.charge < 30)      battery.css("background-color", "red");
            else if(ups.charge < 50) battery.css("background-color", "orange");
            else                     battery.css("background-color", "green");
        });
    });
    setTimeout(updateUps, 5000);
}
</script>

<div id="template" class="hidden">
    <div id="" class="col-md-6"><div class="panel panel-default">
        <div class="panel-heading ups-title"></div>
        <div class="panel-body">
            <div class="col-md-4">
                <div class="battery"><div class="charge"></div></div>
            </div>
            <div class="col-md-8">
                <table class="table small net-detail">
                    <tr><th>ID</th><td class="ups-id"></td></tr>
                    <tr><th>Model</th><td class="ups-model"></td></tr>
                    <tr><th>Description</th><td class="ups-description"></td></tr>
                    <tr><th>Battery Charge</th><td class="ups-charge"></td></tr>
                    <tr><th>Device Load</th><td class="ups-load"></td></tr>
                    <tr><th>Power Usage</th><td class="ups-usage"></td></tr>
                </table>
            </div>
            <!--<div><canvas id="hdd-io" height="400"></canvas></div>-->
        </div>
    </div></div>
</div>

<style>
.battery {
    background-color: #fff;
    border: 5px solid #000;
    height: 150px;
    margin: 30 auto;
    position: relative;
    width: 80px;
}
.battery::after {
    background-color: #000;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    right: 15px;
    top: -15px;
    width: 40px;
}
.battery .charge {
    background-color: gray;
    height: 10%;
    width: 100%;
    position: absolute;
    bottom: 0;
}
.battery .charge[height<=100] {
    background-color: green;
}
.battery .charge[height<=40] {
    background-color: yellow;
}
.battery .charge[height<=30] {
    background-color: red;
}
</style>