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

323 lines
14 KiB
Cheetah

<h1 class="page-header">Sensor Configuration</h1>
<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>#</th>
<th>Name</th>
<th>Type</th>
<th>Public</th>
<th>Configuration</th>
<th>
<button class="btn btn-default btn-xs pull-right" data-toggle="modal" data-target="#sensorModal"
data-action="create_local_sensor">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</thead>
{{#localSensors}}
<tr>
<td>{{.getId()}}</td>
<td>{{.getName()}}</td>
<td>{{.getType()}}</td>
<td>{{.isSynced()}}</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="#sensorModal"
data-action="modify_local_sensor"
data-sensor-id="{{.getId()}}"
data-room-id="{{.getRoom().getId()}}"
data-name="{{.getName()}}"
data-type="{{.getType()}}"
data-sync="{{.isSynced()}}"
{{#.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_sensor">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</td>
</tr>
{{/localSensors}}
</table>
<br>
<p>Sensors 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" name="action" value="remove_all_detected_sensors">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</th>
</thead>
{{#detectedSensors}}
<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="#sensorModal"
data-action="create_local_sensor"
data-type="{{.getType()}}"
{{#.getDeviceConfigurator().getConfiguration()}}
data-{{.getName()}}="{{.getString()}}"
{{/.getDeviceConfigurator().getConfiguration()}}
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</td>
</tr>
{{/detectedSensors}}
</table>
</div>
</div> <!-- /panel -->
</div>
<div class="col-md-12 vertical-space"></div>
<div class="col-md-12">
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Power;Challenge 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>#</th>
<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="#userModal"
data-action="create_external_user">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</thead>
{{#extUsers}}
<tr>
<td><img style="width: 20px;" src="{{.getAvatarUrl()}}" /></td>
<td>{{.getUsername()}}</td>
<td>{{.getAddress()}}</td>
<td>{{.getHostname()}}</td>
<td>{{.getPort()}}</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="#userModal"
data-action="modify_external_user"
data-user-id="{{.getId()}}"
data-hostname="{{.getHostname()}}"
data-port="{{.getPort()}}">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="submit" class="btn btn-danger btn-xs" name="action" value="remove_external_user">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</td>
</tr>
{{/extUsers}}
</table>
</div>
</div> <!-- /Panel -->
</div>
<div class="col-md-12">
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Power;Challenge 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>{{.getName()}}</td>
<td>{{.getType()}}</td>
<td>{{.getDeviceConfig()}}</td>
<td>
<form method="POST">
<div class="btn-toolbar pull-right">
<input type="hidden" name="action" value="modify_external_sensor">
<input type="hidden" name="id" value="{{.getId()}}">
{{^.isSynced()}}
<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>
{{/.isSynced()}}
{{#.isSynced()}}
<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>
{{/.isSynced()}}
</div>
</form>
</td>
</tr>
{{/extSensor}}
</table>
</div>
</div> <!-- /Panel -->
</div>
<div class="col-md-12 vertical-space"></div>
<!------------- MODALS --------------->
<script>
$(function(){
initDynamicModalForm("sensorModal", "sensor-data-conf", "sensor-data-conf-template");
initDynamicModalForm("userModal");
});
</script>
<div class="modal fade" id="sensorModal" 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">Sensor</h4>
</div>
<form method="POST">
<div class="modal-body">
<input type="hidden" id="action" name="action" value="">
<input type="hidden" id="sensor-id" name="sensor-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="checkbox">
<label>
<input type="checkbox" name="sync" value="true">
Public
</label>
</div>
<div class="form-group">
<label class="control-label">Type:</label>
<select class="form-control" name="type">
{{#availableSensorConfigClasses}}
<option>{{.getName()}}</option>
{{/availableSensorConfigClasses}}
</select>
</div>
<hr>
<div id="sensor-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="sensor-data-conf-template" class="hidden">
{{#availableSensorObjectConfig}}
<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>
{{/availableSensorObjectConfig}}
</div>
<div class="modal fade" id="userModal" 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">External User</h4>
</div>
<form method="POST">
<div class="modal-body">
<input type="hidden" name="action" value="">
<input type="hidden" name="user-id">
<div class="form-group">
<label class="control-label">Hostname/IP:</label>
<input type="text" class="form-control" name="hostname">
</div>
<div class="form-group">
<label class="control-label">Port:</label>
<input type="number" class="form-control" name="port" min="1">
</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>