From 7cf816c903fbab203ca12470e5f5f610880780a7 Mon Sep 17 00:00:00 2001
From: Ziver Koc <ziver@koc.se>
Date: Thu, 16 Sep 2021 17:15:22 +0200
Subject: [PATCH] Added collapsable panels to zigbee network page

---
 ...node_overview.tmpl => zigbee_network.tmpl} | 50 ++++++++++++++-----
 ...erviewPage.java => ZigbeeNetworkPage.java} | 10 ++--
 .../src/se/hal/plugin/zigbee/plugin.json      |  2 +-
 3 files changed, 44 insertions(+), 18 deletions(-)
 rename plugins/hal-zigbee/resource/resource/web/{zigbee_node_overview.tmpl => zigbee_network.tmpl} (75%)
 rename plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/{ZigbeeNodeOverviewPage.java => ZigbeeNetworkPage.java} (82%)

diff --git a/plugins/hal-zigbee/resource/resource/web/zigbee_node_overview.tmpl b/plugins/hal-zigbee/resource/resource/web/zigbee_network.tmpl
similarity index 75%
rename from plugins/hal-zigbee/resource/resource/web/zigbee_node_overview.tmpl
rename to plugins/hal-zigbee/resource/resource/web/zigbee_network.tmpl
index cc200e91..84298066 100644
--- a/plugins/hal-zigbee/resource/resource/web/zigbee_node_overview.tmpl
+++ b/plugins/hal-zigbee/resource/resource/web/zigbee_network.tmpl
@@ -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}}
\ No newline at end of file
+{{/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>
\ No newline at end of file
diff --git a/plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNodeOverviewPage.java b/plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNetworkPage.java
similarity index 82%
rename from plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNodeOverviewPage.java
rename to plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNetworkPage.java
index 79ea01bc..72e70ee4 100644
--- a/plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNodeOverviewPage.java
+++ b/plugins/hal-zigbee/src/se/hal/plugin/zigbee/page/ZigbeeNetworkPage.java
@@ -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
diff --git a/plugins/hal-zigbee/src/se/hal/plugin/zigbee/plugin.json b/plugins/hal-zigbee/src/se/hal/plugin/zigbee/plugin.json
index 1885883a..e2a77789 100644
--- a/plugins/hal-zigbee/src/se/hal/plugin/zigbee/plugin.json
+++ b/plugins/hal-zigbee/src/se/hal/plugin/zigbee/plugin.json
@@ -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"}
 	]
 }
\ No newline at end of file