hal/web-resource/configure.tmpl

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

<div class="col-md-8">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">Profile Information</div>
        <div class="panel-body">
            <form class="form-horizontal" method="POST">
                <input type="hidden" name="action" value="modify_local_user">
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">Username:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" name="username" value="{{user.username}}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="address" class="col-sm-2 control-label">Address:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="address" name="address">{{user.address}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">Local Sensors</div>
        <div class="panel-body">
            <p>This is a local list of sensors 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"><span class="glyphicon glyphicon-plus"></span></button>
                    </th>
                </thead>
                {{#localSensor}}
                <tr>
                    <td>{{.name}}</td>
                    <td>{{.type}}</td>
                    <td>{{.config}}</td>
                    <td>
                        <div class="btn-toolbar pull-right">
                            <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
                            <button class="btn btn-danger btn-xs"> <span class="glyphicon glyphicon-trash"></span></button>
                        </div>
                    </td>
                </tr>
                {{/localSensor}}
            </table>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">External Users</div>
        <div class="panel-body">
            <p>Add or remove users that you want to synchronized data with.</p>

            <table class="table table-hover table-condensed">
                <thead>
                <th>Username</th>
                <th>Address</th>
                <th>Hostname</th>
                <th>Port</th>
                <th>
                    <button class="btn btn-default btn-xs pull-right" data-toggle="modal"
                            data-target="#extUserModal"
                            data-id="-1">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                </th>
                </thead>
                {{#extUsers}}
                <tr>
                    <td>{{.username}}</td>
                    <td>{{.address}}</td>
                    <td>{{.hostname}}</td>
                    <td>{{.port}}</td>
                    <td>
                        <div class="btn-toolbar pull-right">
                            <button class="btn btn-default btn-xs" data-toggle="modal"
                                    data-target="#extUserModal"
                                    data-id="{{.getId()}}"
                                    data-hostname="{{.hostname}}"
                                    data-port="{{.port}}">
                                <span class="glyphicon glyphicon-pencil"></span>
                            </button>
                            <button class="btn btn-danger btn-xs" data-toggle="modal"
                                    data-target="#deleteModal"
                                    data-name="{{.hostname}}">
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </div>
                    </td>
                </tr>
                {{/extUsers}}
            </table>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div class="panel panel-default drop-shadow">
        <div class="panel-heading">External Sensors</div>
        <div class="panel-body">
            <p>This is a read only list of synchronized sensors from external users.</p>

            <table class="table table-hover table-condensed">
                <thead>
                <th>Name</th>
                <th>Type</th>
                <th>Configuration</th>
                <th></th>
                </thead>
                {{#extSensor}}
                <tr>
                    <td>{{.name}}</td>
                    <td>{{.type}}</td>
                    <td>{{.config}}</td>
                    <td>
                        <div class="btn-toolbar pull-right">
                            <form method="POST">
                                <input type="hidden" name="action" value="modify_external_sensor">
                                <input type="hidden" name="id" value="{{.getId()}}">
                                {{^.sync}}
                                <input type="hidden" name="sync" value="true">
                                <button type="submit" class="btn btn-default btn-xs" title="Start Syncing">
                                    <span class="glyphicon glyphicon-save"></span>
                                </button>
                                {{/.sync}}
                                {{#.sync}}
                                <input type="hidden" name="sync" value="false">
                                <button type="submit" class="btn btn-danger btn-xs" title="Stop Syncing and Clear Data">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                                {{/.sync}}
                            </form>
                        </div>
                    </td>
                </tr>
                {{/extSensor}}
            </table>
        </div>
    </div>
</div>


<!------------- MODALS --------------->
<script>
    $(function(){
        $("#extUserModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            if(button.data("id") >= 0){ // edit
                modal.find("#action").val(button.data("edit_external_user"));
                modal.find("#id").val(button.data("id"));
                modal.find("#hostname").val(button.data("hostname"));
                modal.find("#port").val(button.data("port"));
            }
            else{ // create
                modal.find("#action").val("create_external_user");
                modal.find("#id").val(-1);
                modal.find("#hostname").val("");
                modal.find("#port").val("");
            }
        });
    });
</script>

<div class="modal fade" id="extUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">External User</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 for="hostname" class="control-label">Hostname/IP:</label>
                        <input type="text" class="form-control" id="hostname">
                    </div>
                    <div class="form-group">
                        <label for="port" class="control-label">Port:</label>
                        <input type="number" class="form-control" id="port" min="1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>