Starting impl of Symbol conf page
This commit is contained in:
parent
0ae1c08505
commit
245a599b52
9 changed files with 185 additions and 92 deletions
|
|
@ -1,15 +1,6 @@
|
|||
<div class="col-md-12 d-flex">
|
||||
|
||||
<div class="card flex-fill w-100">
|
||||
<div class="card-header">
|
||||
<div class="card-actions float-end">
|
||||
<div class="btn-group float-end" role="group">
|
||||
<button type="button" class="btn btn-success"
|
||||
data-bs-toggle="modal" data-bs-target="#exchangeModal" data-action="create_exchange">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">Exchange Instances</h5>
|
||||
</div>
|
||||
|
||||
|
|
@ -21,7 +12,16 @@
|
|||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Configuration</th>
|
||||
<th class="text-end">Actions</th>
|
||||
<th class="text-end">
|
||||
<div class="card-actions float-end">
|
||||
<div class="btn-group float-end" role="group">
|
||||
<button type="button" class="btn btn-success btn-sm"
|
||||
data-bs-toggle="modal" data-bs-target="#exchangeModal" data-action="create_exchange">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -83,12 +83,12 @@
|
|||
<input type="hidden" id="id" name="id">
|
||||
<div>
|
||||
<label for="input-name" class="form-label">Name:</label>
|
||||
<input id="input-name" type="text" class="form-control" name="name">
|
||||
<input id="input-name" type="text" name="name" class="form-control">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="input-type" class="form-label">Type:</label>
|
||||
<select id="input-type" class="form-control" name="type">
|
||||
<select id="input-type" name="type" class="form-control" >
|
||||
{{#exchangeConfigClasses}}
|
||||
<option>{{.getName()}}</option>
|
||||
{{/exchangeConfigClasses}}
|
||||
|
|
@ -116,13 +116,13 @@
|
|||
<label for="input-{{.getName()}}" class="form-label">{{.getNiceName()}}:</label>
|
||||
|
||||
{{#.isTypeString()}}<input id="input-{{.getName()}}" type="text" class="form-control" name="{{.getName()}}">{{/#.isTypeString()}}
|
||||
{{#.isTypeInt()}}<input id="input-{{.getName()}}" type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeInt()}}
|
||||
{{#.isTypeNumber()}}<input id="input-{{.getName()}}" type="number" class="form-control" name="{{.getName()}}">{{/#.isTypeNumber()}}
|
||||
{{#.isTypeBoolean()}}<input id="input-{{.getName()}}" type="checkbox" name="{{.getName()}}" value="true">{{/#.isTypeBoolean()}}
|
||||
{{#.isTypeEnum()}}
|
||||
{{#.isTypeSelection()}}
|
||||
<select id="input-{{.getName()}}" class="form-control" name="{{.getName()}}">
|
||||
{{#.getPossibleValues()}}<option>{{.}}</option>{{/.getPossibleValues()}}
|
||||
</select>
|
||||
{{/#.isTypeEnum()}}
|
||||
{{/#.isTypeSelection()}}
|
||||
|
||||
{{#.getDescription()}}
|
||||
<div class="form-text">{{.getDescription()}}</div>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ function initDynamicModalForm(modalId, formTemplateId = null, templateID = null)
|
|||
});
|
||||
// Update dynamic inputs
|
||||
$("#" + modalId + " select[name=type]").change(function(){
|
||||
$("#" + modalId + " #"+formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]);
|
||||
$("#" + modalId + " #" + formTemplateId).html(dynamicConf[formTemplateId][$(this).val()]);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,82 +1,74 @@
|
|||
<div class="col-md-12 d-flex">
|
||||
<div class="card flex-fill w-100">
|
||||
<div class="card-header">
|
||||
<div class="card-actions float-end">
|
||||
<div class="dropdown show">
|
||||
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
|
||||
<i class="align-middle" data-feather="more-horizontal"></i>
|
||||
</a>
|
||||
<div class="card flex-fill w-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Symbol Instances</h5>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Exchange</th>
|
||||
<th>
|
||||
<div class="card-actions float-end">
|
||||
<div class="btn-group float-end" role="group">
|
||||
<button type="button" class="btn btn-success btn-sm"
|
||||
data-bs-toggle="modal" data-bs-target="#symbolModal" data-action="create_symbol">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#symbols}}
|
||||
<tr>
|
||||
<td>{{.getName()}}</td>
|
||||
<td>{{.getExchange().getName()}}</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-sm" data-toggle="modal"
|
||||
data-target="#symbolModal"
|
||||
data-action="modify_symbol"
|
||||
data-id="{{.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-sm" name="action" value="remove_symbol">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{{/symbols}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">Recent Movement</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Configuration</th>
|
||||
<th>
|
||||
<button class="btn btn-default btn-sm pull-right" data-toggle="modal"
|
||||
data-target="#symbolModal"
|
||||
data-action="create_symbol">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#symbols}}
|
||||
<tr>
|
||||
<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-sm" data-toggle="modal"
|
||||
data-target="#symbolModal"
|
||||
data-action="modify_symbol"
|
||||
data-id="{{.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-sm" name="action" value="remove_symbol">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{{/symbols}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!------------- MODALS --------------->
|
||||
<script>
|
||||
$(function(){
|
||||
$(function() {
|
||||
initDynamicModalForm("symbolModal");
|
||||
|
||||
$("#exchange").change(function() {
|
||||
alert(this.value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -84,24 +76,35 @@
|
|||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
|
||||
<h4 class="modal-title">Symbol</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</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">Name:</label>
|
||||
<input type="text" class="form-control" name="name">
|
||||
|
||||
<div>
|
||||
<label class="control-label" for="exchange">Exchange:</label>
|
||||
<select id="exchange" name="exchange" class="form-control">
|
||||
<option></option>
|
||||
{{#exchanges}}
|
||||
<option value="{{.getId()}}">{{.getName()}}</option>
|
||||
{{/exchanges}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="control-label" for="symbol">Symbol:</label>
|
||||
<select id="symbol" name="symbol" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue