hal/web-resource/sensor_config.tmpl
Ziver Koc 4428824061 Moved PowerChallenge into Hal
Former-commit-id: 34665800518933f0b92723378601a3bafc53fdb0
2016-01-11 18:02:45 +01:00

352 lines
15 KiB
Cheetah
Executable file

<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>Public</th>
<th>Configuration</th>
<th>
<button class="btn btn-default btn-xs pull-right" data-toggle="modal"
data-target="#sensorModal">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</thead>
{{#localSensors}}
<tr>
<td>{{.name}}</td>
<td>{{.type}}</td>
<td>{{.sync}}</td>
<td>{{.config}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="remove_local_sensor">
<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-id="{{.getId()}}"
data-name="{{.name}}"
data-type="{{.type}}"
data-sync="{{.sync}}"
data-config="{{.config}}">
<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>
{{/localSensors}}
</table>
<br>
<p>Sensors that has been automatically detected.</p>
<table class="table table-hover table-condensed">
<thead>
<th>Type</th>
<th>Configuration</th>
</thead>
{{#detectedSensors}}
<tr>
<td>{{.getClass().getName()}}</td>
<td>{{.}}</td>
<td>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#sensorModal"
data-type="{{.type}}"
data-config="{{.config}}">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</td>
</tr>
{{/detectedSensors}}
</table>
</div>
</div>
</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>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">
<span class="glyphicon glyphicon-plus"></span>
</button>
</th>
</thead>
{{#extUsers}}
<tr>
<td>{{.username}}</td>
<td>{{.address}}</td>
<td>{{.hostname}}</td>
<td>{{.port}}</td>
<td>
<form method="POST">
<input type="hidden" name="action" value="remove_external_user">
<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-id="{{.getId()}}"
data-hostname="{{.hostname}}"
data-port="{{.port}}">
<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>
{{/extUsers}}
</table>
</div>
</div>
</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>{{.name}}</td>
<td>{{.type}}</td>
<td>{{.config}}</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()}}">
{{^.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}}
</div>
</form>
</td>
</tr>
{{/extSensor}}
</table>
</div>
</div>
</div>
<!------------- MODALS --------------->
<script>
var sensorDataConf = {};
$(function(){
// initialize sensor modal things
$("#sensor-data-conf-template div").each(function(){
sensorDataConf[$(this).attr("id")] = $(this).html();
});
$("#sensorModal select[name=type]").change(function(){
// Update dynamic inputs
$("#sensorModal #sensor-data-conf").html(sensorDataConf[$(this).val()]);
});
// click event
$("#sensorModal").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_sensor");
modal.find("input[name=id]").val(button.data("id"));
modal.find("input[name=name]").val(button.data("name"));
modal.find("select[name=type]").val(button.data("type"));
modal.find("input[name=sync]").prop("checked", button.data("sync"));
modal.find("input[name=config]").val(button.data("config"));
}
else{ // create
modal.find("input[name=action]").val("create_local_sensor");
modal.find("input[name=id]").val(-1);
modal.find("input[name=sync]").prop("checked", "false");
}
// Update dynamic inputs
modal.find("select[name=type]").change();
});
$("#userModal").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_external_user");
modal.find("input[name=id]").val(button.data("id"));
modal.find("input[name=hostname]").val(button.data("hostname"));
modal.find("input[name=port]").val(button.data("port"));
}
else{ // create
modal.find("input[name=action]").val("create_external_user");
modal.find("input[name=id]").val(-1);
}
});
});
</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 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" 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">
{{#availableSensors}}
<option>{{.getName()}}</option>
{{/availableSensors}}
</select>
</div>
<div class="form-group">
<label class="control-label">Public:</label>
<input type="checkbox" class="form-control" name="sync" value="true">
</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">
{{#localSensorConf}}
<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>
{{/localSensorConf}}
</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 aria-hidden="true">&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="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>