Added collapsable panels to zigbee network page
This commit is contained in:
parent
342368bd77
commit
7cf816c903
3 changed files with 44 additions and 18 deletions
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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"}
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue