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

<h1 class="page-header">Event Configuration</h1>

<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">Local Events</div>
        <div class="panel-body">
            <p>This is a local list of events connected to this node.</p>

            <table class="table table-hover table-condensed">
                <thead>
                    <th>#</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Configuration</th>
                    <th>
                        <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                                data-target="#eventModal"
                                data-action="create_local_event">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </th>
                </thead>
                {{#localEvents}}
                <tr>
                    <td>{{.getId()}}</td>
                    <td>{{.getName()}}</td>
                    <td>{{.getType()}}</td>
                    <td>{{.getDeviceConfig()}}</td>
                    <td>
                        <form method="POST">
                            <input type="hidden" name="id" value="{{.getId()}}">

                            <div class="btn-toolbar pull-right">
                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                        data-target="#eventModal"
                                        data-action="modify_local_event"
                                        data-id="{{.getId()}}"
                                        data-room-id="{{.getRoom().getId()}}"
                                        data-name="{{.getName()}}"
                                        data-type="{{.getType()}}"
                                        {{#.getDeviceConfigurator().getConfiguration()}}
                                        data-{{.getName()}}="{{.getString()}}"
                                        {{/.getDeviceConfigurator().getConfiguration()}}
                                        >
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </button>

                                <button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_local_event">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                            </div>
                        </form>
                    </td>
                </tr>
                {{/localEvents}}
            </table>

            <br>
            <p>Events that has been automatically detected.</p>
            <table class="table table-hover table-condensed">
                <thead>
                <th>Type</th>
                <th>Date</th>
                <th>Data</th>
                <th>Configuration</th>
                <th>
                    <form method="POST">
                        <div class="btn-toolbar pull-right">
                            <button type="submit" class="btn btn-primary btn-xs" style="padding: 1px 20px;" name="action" value="start_scan" {{#scanning}}disabled{{/scanning}}>
                                {{#scanning}}<span class="glyphicon glyphicon-refresh anim-spin"></span>{{/scanning}}
                                {{^scanning}}<span class="glyphicon glyphicon-search"></span>{{/scanning}}
                                Scan
                            </button>

                            <button type="submit" class="btn btn-danger btn-xs pull-right" name="action" value="remove_all_detected_events">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </div>
                    </form>
                </th>
                </thead>
                {{#detectedEvents}}
                <tr>
                    <td>{{.getType()}}</td>
                    <td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
                    <td>{{.getDeviceData()}}</span></td>
                    <td>{{.getDeviceConfig()}}</td>
                    <td>
                        <div class="btn-toolbar pull-right">
                            <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                    data-target="#eventModal"
                                    data-action="create_local_event"
                                    data-type="{{.getType()}}"
                                    {{#.getDeviceConfigurator().getConfiguration()}}
                                    data-{{.getName()}}="{{.getString()}}"
                                    {{/.getDeviceConfigurator().getConfiguration()}}
                                    >
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </div>
                    </td>
                </tr>
                {{/detectedEvents}}
            </table>
        </div>
    </div>
</div>


<!------------- MODALS --------------->
<script>
    $(function(){
        initDynamicModalForm("eventModal", "event-data-conf", "event-data-conf-template");
    });
</script>


<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title">Event</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" id="action" name="action">
                    <input type="hidden" id="id" name="id">

                    <div class="form-group">
                        <label class="control-label">Located in room:</label>
                        <select class="form-control" name="room-id">
                            <option value=""></option>
                            {{#rooms}}
                            <option value="{{.getId()}}">{{.getName()}} (id: {{.getId()}})</option>
                            {{/rooms}}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Name:</label>
                        <input type="text" class="form-control" name="name">
                    </div>
                    <div class="form-group">
                        <label class="control-label">Type:</label>
                        <select class="form-control" name="type">
                            {{#availableEventConfigClasses}}
                            <option>{{.getName()}}</option>
                            {{/availableEventConfigClasses}}
                        </select>
                    </div>

                    <hr>
                    <div id="event-data-conf">
                        <!-- Dynamic form -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="event-data-conf-template" class="hidden">
    {{#availableEventObjectConfig}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label class="control-label">{{.getNiceName()}}:</label>
            {{#.isTypeString()}}<input type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
            {{#.isTypeNumber()}}<input type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeNumber()}}
            {{#.isTypeBoolean()}}<input type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
            {{#.isTypeSelection()}}
            <select class="form-control" name="{{.getName()}}">
                {{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
            </select>
            {{/#.isTypeSelection()}}
        </div>
        {{/.params}}
    </div>
    {{/availableEventObjectConfig}}
</div>