Show recursive structures in message values

diff --git a/web/controlpi-debug.css b/web/controlpi-debug.css
index 1fca3c620b652779da1ade59700d3571b4d4df96..82ca93b78e3282c6cc0689358a66caaf7d62be46 100644 (file)
--- a/web/controlpi-debug.css
+++ b/web/controlpi-debug.css
@@ -6,7 +6,7 @@
 .client {
     display: inline-block;
     vertical-align: top;
-    width: 300px;
+    width: 600px;
     margin-top: 5px;
     margin-left: 5px;
     border: 2px solid black;
@@ -46,7 +46,7 @@
 .templatecontainer {
     display: inline-block;
     vertical-align: top;
-    width: 280px;
+    width: 580px;
     white-space: normal;
 }
 
@@ -97,6 +97,44 @@
     border-spacing: 2px;
 }
 
+.message .array {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.message .array > * {
+    vertical-align: baseline;
+}
+
+.message .object {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    padding-top: 2px;
+    padding-left: 2px;
+    margin-bottom: 2px;
+}
+
+.message .object > .property {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.message .object > .property > .key {
+    margin-right: 2px;
+    margin-bottom: 2px;
+}
+
+.message .object > .property > .value {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-right: 2px;
+    margin-bottom: 2px;
+}
+
 .message input {
     background-color: #35bfd3;
 }

diff --git a/web/controlpi-debug.js b/web/controlpi-debug.js
index 9c4dd77365cb7cec58dbd384f0716b28236f81bb..3cfe956b5e5fdc3d619e76cadd350017bc6084e7 100644 (file)
--- a/web/controlpi-debug.js
+++ b/web/controlpi-debug.js
@@ -274,6 +274,44 @@ function processBusMessage(message) {
     }
 }
 
+// Recursively create div structure for arrays, objects and primitive
+// values:
+function createForMessageValue(value) {
+    var result = ''
+    if (typeof(value) == 'object') {
+        if (Array.isArray(value)) {
+            result = document.createElement('div')
+            result.setAttribute('class', 'array')
+            var counter = value.length
+            for (const child of value) {
+                result.appendChild(createForMessageValue(child))
+                if (--counter) {
+                    result.appendChild(document.createTextNode(', '))
+                }
+            }
+        } else {
+            result = document.createElement('div')
+            result.setAttribute('class', 'object')
+            for (const key in value) {
+                const property = document.createElement('div')
+                property.setAttribute('class', 'property')
+                const keyDiv = document.createElement('div')
+                keyDiv.setAttribute('class', 'key')
+                keyDiv.appendChild(document.createTextNode(key + ':'))
+                property.appendChild(keyDiv)
+                const valueDiv = document.createElement('div')
+                valueDiv.setAttribute('class', 'value')
+                valueDiv.appendChild(createForMessageValue(value[key]))
+                property.appendChild(valueDiv)
+                result.appendChild(property)
+            }
+        }
+    } else {
+        result = document.createTextNode(JSON.stringify(value))
+    }
+    return result
+}
+
 // Create div and table for message:
 function createForMessage(message) {
     const div = document.createElement('div')
@@ -305,9 +343,7 @@ function createForMessage(message) {
         keyTd.appendChild(keyTdContent)
         tr.appendChild(keyTd)
         const valueTd = document.createElement('td')
-        value = JSON.stringify(message[key])
-        const valueTdContent = document.createTextNode(value)
-        valueTd.appendChild(valueTdContent)
+        valueTd.appendChild(createForMessageValue(message[key]))
         tr.appendChild(valueTd)
         table.appendChild(tr)
     }