hal/web-resource/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 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-2">Last Update</th>
                    <th class="col-md-1 text-right">Actions</th>
                </thead>
                {{#events}}
                <tr>
                    <td><a href="?id={{.getId()}}">{{.getName()}}</a></td>
                    <td>{{.getDeviceData().getClass().getSimpleName()}}</td>
                    <td>{{.getDeviceData().getData()}}</td>
                    <td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
                    <td>
                        <form method="POST">
                            <input type="hidden" name="action" value="-">
                            <input type="hidden" name="id" value="{{.getId()}}">

                            <div class="btn-toolbar pull-right">
                                <input class="toggle-switch"  type="checkbox" name="data"
                                       data-size="mini" 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();
        });
    });
</script>