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}} {{#nodes}}
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default drop-shadow"> <div class="panel panel-default drop-shadow">
<div class="panel-heading">Node: {{.getIeeeAddress()}}</div> <!-- NODE -->
<div class="panel-body">
<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="col-md-6">
<div class="panel panel-default drop-shadow"> <div class="panel panel-default drop-shadow">
<div class="panel-heading">Node Description</div> <div class="panel-heading">Node Description</div>
@ -90,19 +94,24 @@
</div> </div>
</div> </div>
<!-- ENDPOINTS -->
<div class="col-md-12"> <div class="col-md-12">
{{#.getEndpoints()}} {{#.getEndpoints()}}
<div class="panel panel-default drop-shadow"> <div class="panel panel-default drop-shadow">
<div class="panel-heading">Endpoint: {{.getDeviceId()}}</div> <div class="panel-heading">
<div class="panel-body"> <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()}} {{#.inputClusters.values()}}
<div class="panel panel-default drop-shadow"> <div class="panel panel-default drop-shadow">
<div class="panel-heading">Cluster: {{.getClusterId()}}</div> <div class="panel-heading">
<div class="panel-body"> <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"> <table class="table table-hover table-condensed">
<thead> <thead>
<th>ID</th> <th>ID</th>
@ -123,12 +132,14 @@
</div> </div>
{{/.inputClusters.values()}} {{/.inputClusters.values()}}
<p>Output Clusters:</p> <p><b>Output Clusters:</b></p>
{{#.outputClusters.values()}} {{#.outputClusters.values()}}
<div class="panel panel-default drop-shadow"> <div class="panel panel-default drop-shadow">
<div class="panel-heading">Cluster: {{.getClusterId()}}</div> <div class="panel-heading">
<div class="panel-body"> <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"> <table class="table table-hover table-condensed">
<thead> <thead>
@ -156,4 +167,19 @@
</div> </div>
</div> </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>

10
plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNodeOverviewPage.java → plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNetworkPage.java
View file

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

2
plugins/hal-zigbee/src/se/hal/plugin/zigbee/plugin.json
View file

@ -13,6 +13,6 @@
{"se.hal.intf.HalAutostartController": "se.hal.plugin.zigbee.ZigbeeController"}, {"se.hal.intf.HalAutostartController": "se.hal.plugin.zigbee.ZigbeeController"},
{"se.hal.intf.HalDaemon": "se.hal.plugin.zigbee.ZigbeeAttributeUpdateDaemon"}, {"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"}
] ]
} }