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

Implementation of level and color data types

Browse source
This commit is contained in:
Ziver Koc 2023-05-06 01:11:10 +02:00
parent a89b418350
commit 234125bc35
30 changed files with 664 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

82
hal-core/resources/web/event_overview.tmpl
View file

@ -13,26 +13,6 @@
<th class="col-md-2">Last Update</th>
<th class="col-md-2 text-right">Actions</th>
</thead>
{{#events}}
<tr data-device-id="{{.getId()}}">
<td><a href="?id={{.getId()}}">{{.getName()}}</a></td>
<td>{{.getDeviceConfig().getClass().getSimpleName()}}</td>
<td>{{.getDeviceData()}}</td>
<td class="timestamp">{{.getDeviceData().getTimestamp()}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="modify">
<input type="hidden" name="action_id" value="{{.getId()}}">
<div class="btn-toolbar pull-right">
<input class="toggle-switch" type="checkbox" name="enabled"
data-on-color="danger"
{{#.getDeviceData().getData()}}checked{{/.getDeviceData().getData()}} >
</div>
</form>
</td>
</tr>
{{/events}}
</table>
</div>
</div>
@ -45,24 +25,70 @@
});
});
updateDevices();
// Auto update
setInterval(function() {
updateDevices();
}, 3000);
function updateDevices() {
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);
for (const deviceData of data) {
var row = Array.from(table.rows).find(row => row.dataset.deviceId == deviceData.id);
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);
if (!row) {
row = table.insertRow();
row.insertCell(0);
row.insertCell(1);
row.insertCell(2);
row.insertCell(3);
row.insertCell(4);
}
// Update Cells
row.dataset.deviceId = deviceData.id
row.cells[0].innerHTML = deviceData.name;
row.cells[1].innerHTML = deviceData.config?.typeConfig;
row.cells[2].innerHTML = deviceData.data?.valueStr;
row.cells[3].innerHTML = deviceData.data?.timestamp;
$(row.cells[3]).relTimestamp();
var actionHtml = "";
switch (deviceData.config?.typeData) {
case "ColorEventData":
actionHtml =
'<input type="hidden" name="type" value="color">' +
'<input type="color" name="data" onchange="this.form.submit()" value="' + deviceData.data?.valueStr + '">';
break;
case "LevelEventData":
actionHtml =
'<input type="hidden" name="type" value="level">' +
'<input type="range" name="data" min="0" max="100" step="10" onchange="this.form.submit()" value="' + (deviceData.data?.value * 100) + '">';
break;
case "OnOffEventData":
actionHtml =
'<input type="hidden" name="type" value="on-off">' +
'<input class="toggle-switch" type="checkbox" name="data" data-on-color="danger" onchange="this.form.submit()" ' + (deviceData.data?.valueStr=="ON" ? "checked" : "") + '>';
//$(row.cells[4].querySelector('[type="checkbox"]')).bootstrapSwitch('state', deviceData.data?.value === 1, true);
break;
}
row.cells[4].innerHTML = '<form method="POST">' +
'<input type="hidden" name="action" value="modify">' +
'<input type="hidden" name="action-id" value="' + deviceData.id + '">' +
'<div class="btn-toolbar pull-right">' + actionHtml + '</div>';
$(".toggle-switch").bootstrapSwitch({inverse: true, size: "mini"});
}
});
}, 3000);
}
</script>