Added collapsable panels to zigbee network page

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

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>
@ -157,3 +168,18 @@
</div>
</div>
{{/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>

View file

@ -12,12 +12,12 @@ import zutil.parser.Templator;
import java.util.Map;
import java.util.Set;
public class ZigbeeNodeOverviewPage extends HalWebPage {
private static final String TEMPLATE = HalContext.RESOURCE_WEB_ROOT + "/zigbee_node_overview.tmpl";
public class ZigbeeNetworkPage extends HalWebPage {
private static final String TEMPLATE = HalContext.RESOURCE_WEB_ROOT + "/zigbee_network.tmpl";
public ZigbeeNodeOverviewPage() {
super("zigbee_overview");
super.getRootNav().createSubNav("Settings").createSubNav(this.getId(), "Zigbee Overview").setWeight(10_000);
public ZigbeeNetworkPage() {
super("zigbee_network");
super.getRootNav().createSubNav("Settings").createSubNav(this.getId(), "Zigbee Network").setWeight(10_000);
}
@Override

View file

@ -13,6 +13,6 @@
{"se.hal.intf.HalAutostartController": "se.hal.plugin.zigbee.ZigbeeController"},
{"se.hal.intf.HalDaemon": "se.hal.plugin.zigbee.ZigbeeAttributeUpdateDaemon"},
{"se.hal.intf.HalWebPage": "se.hal.plugin.zigbee.page.ZigbeeNodeOverviewPage"}
{"se.hal.intf.HalWebPage": "se.hal.plugin.zigbee.page.ZigbeeNetworkPage"}
]
}