<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>Name</th>
                    <th>Type</th>
                    <th>Configuration</th>
                    <th>
                        <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                                data-target="#eventModal">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </th>
                </thead>
                {{#localEvents}}
                <tr>
                    <td>{{.getName()}}</td>
                    <td>{{.getType()}}</td>
                    <td>{{.getDeviceData()}}</td>
                    <td>
                        <form method="POST">
                            <input type="hidden" name="action" value="remove_local_event">
                            <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-id="{{.getId()}}"
                                        data-name="{{.getName()}}"
                                        data-type="{{.getType()}}"
                                        {{#.getDeviceConfig().getConfiguration()}}
                                        data-{{.getName()}}="{{.getString()}}"
                                        {{/.getDeviceConfig().getConfiguration()}}
                                        >
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </button>

                                <button type="submit" class="btn btn-danger btn-xs">
                                    <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>Configuration</th>
                </thead>
                {{#detectedEvents}}
                <tr>
                    <td>{{.getType()}}</td>
                    <td><span class="timestamp">{{.getDeviceData().getTimestamp()}}</span></td>
                    <td>{{.getDeviceData()}}</td>
                    <td>
                        <div class="btn-toolbar pull-right">
                            <button type="button" class="btn btn-default btn-xs" data-toggle="modal"
                                    data-target="#eventModal"
                                    data-type="{{.getType()}}"
                                    {{#.getDeviceConfig().getConfiguration()}}
                                    data-{{.getName()}}="{{.getString()}}"
                                    {{/.getDeviceConfig().getConfiguration()}}
                                    >
                                <span class="glyphicon glyphicon-plus"></span>
                            </button>
                        </div>
                    </td>
                </tr>
                {{/detectedEvents}}
            </table>
        </div>
    </div>
</div>


<!------------- MODALS --------------->
<script>
    var eventDataConf = {};

    $(function(){
        // initialize event modal things
        $("#event-data-conf-template div").each(function(){
            eventDataConf[$(this).attr("id")] = $(this).html();
        });
        $("#eventModal select[name=type]").change(function(){
            // Update dynamic inputs
            $("#eventModal #event-data-conf").html(eventDataConf[$(this).val()]);
        });
        // click event
        $("#eventModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            modal.find("input[type=text]").val(""); // Reset all inputs
            if(button.data("id") >= 0){ // edit
                modal.find("input[name=action]").val("modify_local_event");
            }
            else{ // create
                modal.find("input[name=action]").val("create_local_event");
                modal.find("input[name=id]").val(-1);
            }
            // Set dynamic data
            modal.find("select[name=type]").val(button.data("type"));
            modal.find("select[name=type]").change(); // Update dynamic inputs
            $.each(button.attr(), function(name, value) {
                if(name.startsWith("data-")) {
                    name = name.substring(5);
                    console.log(name, value);
                    modal.find("input[name="+name+"]").val(value);
                }
            });
        });
    });
</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 aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">Event</h4>
            </div>
            <form method="POST">
                <div class="modal-body">
                    <input type="hidden" id="action" name="action" value="">
                    <input type="hidden" id="id" name="id">
                    <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">
                            {{#availableEvents}}
                            <option>{{.getName()}}</option>
                            {{/availableEvents}}
                        </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">
    {{#localEventConf}}
    <div id="{{.clazz.getName()}}">
        {{#.params}}
        <div class="form-group">
            <label class="control-label">{{.getNiceName()}}:</label>
            <input type="text" class="form-control" name="{{.getName()}}">
        </div>
        {{/.params}}
    </div>
    {{/localEventConf}}
</div>

