ziver/webadmin
1
0
Fork 0
Code Pull requests Releases Activity

Implementatioin of UPS web ui

Browse source
This commit is contained in:
Ziver Koc 2016-04-04 17:04:21 +02:00
parent 8048c535c4
commit 6a90b291ae
2 changed files with 63 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/wa/server/plugin/nutups/UPSStatus.java
View file

@ -41,13 +41,14 @@ public class UPSStatus implements WAStatus {
DataNode upsRoot = new DataNode(DataNode.DataType.List); DataNode upsRoot = new DataNode(DataNode.DataType.List);
for (NutUPSClient.UPSDevice ups : nutClient.getUPSList()){ for (NutUPSClient.UPSDevice ups : nutClient.getUPSList()){
DataNode upsNode = new DataNode(DataNode.DataType.Map); DataNode upsNode = new DataNode(DataNode.DataType.Map);
root.set("id", ups.getId()); upsNode.set("id", ups.getId());
root.set("model", ups.getModelName()); upsNode.set("model", ups.getModelName());
root.set("desc", ups.getDescription()); upsNode.set("desc", ups.getDescription());
root.set("charge", ups.getBatteryCharge()); upsNode.set("charge", ups.getBatteryCharge());
root.set("load", ups.getPowerLoad()); upsNode.set("load", ups.getPowerLoad());
root.set("power_usage", ups.getPowerUsage()); upsNode.set("power_usage", ups.getPowerUsage());
root.add(upsNode);
upsRoot.add(upsNode);
} }
root.set("ups", upsRoot); root.set("ups", upsRoot);
} }

66
src/wa/server/plugin/nutups/UPSStatus.tmpl
View file

@ -9,9 +9,9 @@ $(function() {
function updateUps(){ function updateUps(){
$.getJSON("{{nav.getUrl()}}&json&ups", function( data ) { $.getJSON("{{nav.getUrl()}}&json&ups", function( data ) {
$.each(data['ups'], function( index, hdd ){ $.each(data['ups'], function( index, ups ){
var element = null; var element = null;
var html_id = "ups-id-" + hdd.id; var html_id = "ups-id-" + ups.id;
if($("#"+html_id).length) if($("#"+html_id).length)
element = $("#" + html_id); element = $("#" + html_id);
else{ // Create new element else{ // Create new element
@ -20,15 +20,22 @@ function updateUps(){
$(element).appendTo("#ups-container"); $(element).appendTo("#ups-container");
} }
$(element).find(".ups-id").html(); $(element).find(".ups-id").html(ups.id);
$(element).find(".ups-model").html(); $(element).find(".ups-model").html(ups.model);
$(element).find(".ups-description").html(); $(element).find(".ups-description").html(ups.desc);
$(element).find(".ups-charge").html(+"%"); $(element).find(".ups-charge").html(ups.charge+"%");
$(element).find(".ups-load").html(+"%"); $(element).find(".ups-load").html(ups.load+"%");
$(element).find(".ups-usage").html(+"W"); $(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, 2000); setTimeout(updateUps, 5000);
} }
</script> </script>
@ -37,7 +44,7 @@ function updateUps(){
<div class="panel-heading ups-title"></div> <div class="panel-heading ups-title"></div>
<div class="panel-body"> <div class="panel-body">
<div class="col-md-4"> <div class="col-md-4">
<div class="battery"></div> <div class="battery"><div class="charge"></div></div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<table class="table small net-detail"> <table class="table small net-detail">
@ -52,4 +59,41 @@ function updateUps(){
<!--<div><canvas id="hdd-io" height="400"></canvas></div>--> <!--<div><canvas id="hdd-io" height="400"></canvas></div>-->
</div> </div>
</div></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>