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

Moved Json Pages to api folder and added auto update javascript to overview pages.

Browse source
This commit is contained in:
Ziver Koc 2022-05-27 02:13:33 +02:00
parent 95ff5b81c0
commit ef365f360c
11 changed files with 210 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

31
hal-core/resource/resource/web/event_overview.tmpl
View file

@ -5,20 +5,20 @@
<div class="panel-heading">Local Events</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<table id="event-device-table" class="table table-hover table-condensed">
<thead>
<th class="col-md-4">Name</th>
<th class="col-md-3">Type</th>
<th class="col-md-2">Data</th>
<th class="col-md-1">Data</th>
<th class="col-md-2">Last Update</th>
<th class="col-md-1 text-right">Actions</th>
<th class="col-md-2 text-right">Actions</th>
</thead>
{{#events}}
<tr>
<tr data-device-id="{{.getId()}}">
<td><a href="?id={{.getId()}}">{{.getName()}}</a></td>
<td>{{.getDeviceConfig().getClass().getSimpleName()}}</td>
<td>{{.getDeviceData()}}</td>
<td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
<td class="timestamp">{{.getDeviceData().getTimestamp()}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="modify">
@ -44,4 +44,25 @@
$(this).closest('form').submit();
});
});
// Auto update
setInterval(function() {
fetch('/api/event')
.then(response => response.json())
.then(data => {
var table = document.getElementById('event-device-table');
for (const row of table.rows) {
var dataItem = data.find(item => item.id == row.dataset.deviceId);
if (dataItem) {
row.cells[2].innerHTML = dataItem.data?.valueStr;
row.cells[3].innerHTML = dataItem.data?.timestamp;
$(row.cells[3]).relTimestamp();
$(row.cells[4].querySelector('[type="checkbox"]')).bootstrapSwitch('state', dataItem.data?.value === 1, true);
}
}
});
}, 3000);
</script>

28
hal-core/resource/resource/web/js/hal.js vendored
View file

@ -101,26 +101,32 @@ function createChart(elementId, url, updateTime=-1){
});
}
function updateChart(chart, url, updateTime=-1){
console.log('Updating chart: '+chart.element.id);
$.getJSON(url, function(json){
console.log('Updating chart: ' + chart.element.id);
$.getJSON(url, function(json) {
chart.load(getChartData(json));
});
if (updateTime > 0)
setTimeout(function(){ updateChart(chart, url, updateTime); }, updateTime);
if (updateTime > 0) {
setTimeout(function() {
updateChart(chart, url, updateTime);
}, updateTime);
}
}
function getChartData(json){
var dataXaxis = {};
var dataYaxis = {};
var data = [];
var labels = [];
json.forEach(function(sensor, i) {
var index = 'data'+i;
labels[index] = sensor.user +": "+ sensor.name;
dataXaxis[index] = 'data'+i+'x';
data.push([index+'x'].concat(sensor.timestamps));
data.push([index].concat(sensor.data));
if (sensor.type == "PowerConsumptionSensorData")
json.forEach(function(sensor, i) {
var index = 'data' + i;
labels[index] = sensor.user + ': ' + sensor.name;
dataXaxis[index] = 'data' + i + 'x';
data.push([index + 'x'].concat(sensor.aggregate.timestamps));
data.push([index].concat(sensor.aggregate.data));
if (sensor.type == 'PowerConsumptionSensorData')
dataYaxis[index] = 'y';
else //if (sensor.type == "TemperatureSensorData")
dataYaxis[index] = 'y2';

4
hal-core/resource/resource/web/map.tmpl
View file

@ -136,7 +136,7 @@
function drawMap(){
// Get map data
$.getJSON("/data/map?action=getdata", function(json){
$.getJSON("/api/map?action=getdata", function(json){
// reset map
svg.clear();
@ -183,7 +183,7 @@
$.ajax({
async: false,
dataType: "json",
url: "/data/map?",
url: "/api/map?",
data: {
action: "save",
id: element.attr("device-id"),

6
hal-core/resource/resource/web/sensor_detail.tmpl
View file

@ -93,8 +93,8 @@
<script>
$(function(){
createChart("#min-chart", "/data/sensor?aggr=minute&id={{sensor.getId()}}", 5*60*1000);
createChart("#hour-chart", "/data/sensor?aggr=hour&id={{sensor.getId()}}", 60*60*1000);
createChart("#week-chart", "/data/sensor?aggr=week&id={{sensor.getId()}}", 7*24*60*60*1000);
createChart("#min-chart", "/api/sensor?aggr=minute&id={{sensor.getId()}}", 5*60*1000);
createChart("#hour-chart", "/api/sensor?aggr=hour&id={{sensor.getId()}}", 60*60*1000);
createChart("#week-chart", "/api/sensor?aggr=week&id={{sensor.getId()}}", 7*24*60*60*1000);
});
</script>

27
hal-core/resource/resource/web/sensor_overview.tmpl
View file

@ -5,7 +5,7 @@
<div class="panel-heading">Local Sensors</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<table id="sensor-device-table" class="table table-hover table-condensed">
<thead>
<th class="col-md-4">Name</th>
<th class="col-md-3">Type</th>
@ -13,11 +13,11 @@
<th class="col-md-2">Last Update</th>
</thead>
{{#sensors}}
<tr>
<tr data-device-id="{{.getId()}}">
<td><a href="?id={{.getId()}}">{{.getName()}}</a></td>
<td>{{.getDeviceConfig().getClass().getSimpleName()}}</td>
<td>{{.getDeviceData()}}</td>
<td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
<td class="timestamp">{{.getDeviceData().getTimestamp()}}</td>
</tr>
{{/sensors}}
</table>
@ -31,4 +31,25 @@
$(this).closest('form').submit();
});
});
// Auto update
setInterval(function() {
fetch('/api/sensor')
.then(response => response.json())
.then(data => {
var table = document.getElementById('sensor-device-table');
for (const row of table.rows) {
var dataItem = data.find(item => item.id == row.dataset.deviceId);
if (dataItem) {
row.cells[2].innerHTML = dataItem.data?.valueStr;
row.cells[3].innerHTML = dataItem.data?.timestamp;
$(row.cells[3]).relTimestamp();
}
}
});
}, 3000);
</script>