hal/hal-core/resources/web/event_overview.tmpl

<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>
            </table>
        </div>
    </div>
</div>

<script>
    $(function (){
        $(".toggle-switch").on("switchChange.bootstrapSwitch", function (event, state) {
            $(this).closest('form').submit();
        });
    });

    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 deviceData of data) {
                    var row = Array.from(table.rows).find(row => row.dataset.deviceId == deviceData.id);

                    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"});
                }
            });
    }
</script>