Starting impl of Symbol conf page

This commit is contained in:
Ziver Koc 2021-05-24 00:40:07 +02:00
parent 0ae1c08505
commit 245a599b52
9 changed files with 185 additions and 92 deletions

View file

@ -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>&times;</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>