ziver/hal
1
1
Fork 0
Code Pull requests Releases Activity

Added collapsable panels to zigbee network page

Browse source
This commit is contained in:
Ziver Koc 2021-09-16 17:15:22 +02:00
parent 342368bd77
commit 7cf816c903
3 changed files with 44 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

50
plugins/hal-zigbee/resource/resource/web/zigbee_node_overview.tmpl → plugins/hal-zigbee/resource/resource/web/zigbee_network.tmpl
View file

@ -33,8 +33,12 @@
{{#nodes}}
<div class="col-md-12">
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Node: {{.getIeeeAddress()}}</div>
<div class="panel-body">
<!-- NODE -->
<div class="panel-heading">
<a href="#a" data-toggle="collapse" data-target="#node-{{.getIeeeAddress()}}">Node: {{.getIeeeAddress()}}</a>
</div>
<div id="node-{{.getIeeeAddress()}}" class="panel-body collapse">
<div class="col-md-6">
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Node Description</div>
@ -90,19 +94,24 @@
</div>
</div>
<!-- ENDPOINTS -->
<div class="col-md-12">
{{#.getEndpoints()}}
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Endpoint: {{.getDeviceId()}}</div>
<div class="panel-body">
<div class="panel-heading">
<a href="#a" data-toggle="collapse" data-target="#node-{{.getIeeeAddress()}}-endpoint-{{.getDeviceId()}}">Endpoint: {{.getDeviceId()}}</a>
</div>
<div id="node-{{.getIeeeAddress()}}-endpoint-{{.getDeviceId()}}" class="panel-body collapse">
<p>Input Clusters:</p>
<p><b>Input Clusters:</b></p>
{{#.inputClusters.values()}}
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Cluster: {{.getClusterId()}}</div>
<div class="panel-body">
<div class="panel-heading">
<a href="#a" data-toggle="collapse" data-target="#node-{{.getZigBeeAddress().getAddress()}}-endpoint-{{.getZigBeeAddress().getEndpoint()}}-cluster-{{.getClusterId()}}">Cluster: {{.getClusterId()}}</a>
</div>
<div id="node-{{.getZigBeeAddress().getAddress()}}-endpoint-{{.getZigBeeAddress().getEndpoint()}}-cluster-{{.getClusterId()}}" class="panel-body collapse">
<table class="table table-hover table-condensed">
<thead>
<th>ID</th>
@ -123,12 +132,14 @@
</div>
{{/.inputClusters.values()}}
<p>Output Clusters:</p>
<p><b>Output Clusters:</b></p>
{{#.outputClusters.values()}}
<div class="panel panel-default drop-shadow">
<div class="panel-heading">Cluster: {{.getClusterId()}}</div>
<div class="panel-body">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#node-{{.getZigBeeAddress().getAddress()}}-endpoint-{{.getZigBeeAddress().getEndpoint()}}-cluster-{{.getClusterId()}}">Cluster: {{.getClusterId()}}</a>
</div>
<div id="node-{{.getZigBeeAddress().getAddress()}}-endpoint-{{.getZigBeeAddress().getEndpoint()}}-cluster-{{.getClusterId()}}" class="panel-body collapse">
<table class="table table-hover table-condensed">
<thead>
@ -156,4 +167,19 @@
</div>
</div>
</div>
{{/nodes}}
{{/nodes}}
<script>
$('.collapse').each(function(index) {
if (localStorage.getItem($(this).attr("id"))) {
$(this).collapse('show');
}
});
$('.collapse').on('show.bs.collapse', function () {
localStorage.setItem($(this).attr("id"), true);
})
$('.collapse').on('hide.bs.collapse', function () {
localStorage.removeItem($(this).attr("id"));
})
</script>