68 lines
No EOL
2.7 KiB
Cheetah
68 lines
No EOL
2.7 KiB
Cheetah
<h1 class="page-header">Event Overview</h1>
|
|
|
|
<div class="col-md-12">
|
|
<div class="panel panel-default drop-shadow">
|
|
<div class="panel-heading">Local Events</div>
|
|
<div class="panel-body">
|
|
|
|
<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-1">Data</th>
|
|
<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>
|
|
</div>
|
|
|
|
<script>
|
|
$(function (){
|
|
$(".toggle-switch").on("switchChange.bootstrapSwitch", function (event, state) {
|
|
$(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> |