From 7ef42644a35c1603fea8e13305cc81935411d1e4 Mon Sep 17 00:00:00 2001
From: Matthias Alphart <farmio@alphart.net>
Date: Sat, 25 May 2024 18:44:36 +0200
Subject: [PATCH] Support multi-value DPT data in GroupMonitor (#134)

---
 src/dialogs/knx-telegram-info-dialog.ts | 77 ++++++++++++++-----------
 src/utils/format.ts                     | 14 ++++-
 2 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/dialogs/knx-telegram-info-dialog.ts b/src/dialogs/knx-telegram-info-dialog.ts
index b1987bb..14180bc 100644
--- a/src/dialogs/knx-telegram-info-dialog.ts
+++ b/src/dialogs/knx-telegram-info-dialog.ts
@@ -60,30 +60,34 @@ class TelegramInfoDialog extends LitElement {
         </div>
         <div class="section">
           <h4>${this.knx.localize("group_monitor_source")}</h4>
-          <div>${this.telegram.source}</div>
-          <div>${this.telegram.source_name}</div>
+          <div class="row-inline">
+            <div>${this.telegram.source}</div>
+            <div>${this.telegram.source_name}</div>
+          </div>
         </div>
         <div class="section">
           <h4>${this.knx.localize("group_monitor_destination")}</h4>
-          <div>${this.telegram.destination}</div>
-          <div>${this.telegram.destination_name}</div>
+          <div class="row-inline">
+            <div>${this.telegram.destination}</div>
+            <div>${this.telegram.destination_name}</div>
+          </div>
         </div>
         <div class="section">
           <h4>${this.knx.localize("group_monitor_message")}</h4>
           <div class="row">
             <div>${this.telegram.telegramtype}</div>
-            <div>${TelegramDictFormatter.dptNameNumber(this.telegram)}</div>
+            <div><code>${TelegramDictFormatter.dptNameNumber(this.telegram)}</code></div>
           </div>
-          ${this.telegram.value != null
+          ${this.telegram.payload != null
             ? html` <div class="row">
-                <div>${this.knx.localize("group_monitor_value")}</div>
-                <div>${TelegramDictFormatter.valueWithUnit(this.telegram)}</div>
+                <div>${this.knx.localize("group_monitor_payload")}</div>
+                <div><code>${TelegramDictFormatter.payload(this.telegram)}</code></div>
               </div>`
             : nothing}
-          ${this.telegram.payload != null
+          ${this.telegram.value != null
             ? html` <div class="row">
-                <div>${this.knx.localize("group_monitor_payload")}</div>
-                <div>${TelegramDictFormatter.payload(this.telegram)}</div>
+                <div>${this.knx.localize("group_monitor_value")}</div>
+                <pre><code>${TelegramDictFormatter.valueWithUnit(this.telegram)}</code></pre>
               </div>`
             : nothing}
         </div>
@@ -114,11 +118,24 @@ class TelegramInfoDialog extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
-          /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
-          --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: 40px;
+          --vertical-align-dialog: center;
           --dialog-z-index: 20;
         }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          /* When in fullscreen dialog should be attached to top */
+          ha-dialog {
+            --dialog-surface-margin-top: 0px;
+          }
+        }
+        @media all and (min-width: 600px) and (min-height: 501px) {
+          /* Set the dialog to a fixed size, so it doesnt jump when the content changes size */
+          ha-dialog {
+            --mdc-dialog-min-width: 580px;
+            --mdc-dialog-max-width: 580px;
+            --mdc-dialog-min-height: 70%;
+            --mdc-dialog-max-height: 70%;
+          }
+        }
 
         .content {
           display: flex;
@@ -144,28 +161,22 @@ class TelegramInfoDialog extends LitElement {
           flex-wrap: wrap;
         }
 
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          /* When in fullscreen dialog should be attached to top */
-          ha-dialog {
-            --dialog-surface-margin-top: 0px;
-          }
+        .row-inline {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
         }
 
-        @media all and (min-width: 600px) and (min-height: 501px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 580px;
-            --mdc-dialog-max-width: 580px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
-          .main-title {
-            cursor: default;
-          }
+        pre {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
 
-          :host([large]) ha-dialog {
-            --mdc-dialog-min-width: 90vw;
-            --mdc-dialog-max-width: 90vw;
-          }
+        mwc-button {
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
         }
       `,
     ];
diff --git a/src/utils/format.ts b/src/utils/format.ts
index d4cabcf..8d9dd0a 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -1,3 +1,4 @@
+import { dump } from "js-yaml";
 import { DPT, TelegramDict } from "../types/websocket";
 
 export const TelegramDictFormatter = {
@@ -10,7 +11,14 @@ export const TelegramDictFormatter = {
 
   valueWithUnit: (telegram: TelegramDict): string => {
     if (telegram.value == null) return "";
-    return telegram.value.toString() + (telegram.unit ? " " + telegram.unit : "");
+    if (
+      typeof telegram.value === "number" ||
+      typeof telegram.value === "boolean" ||
+      typeof telegram.value === "string"
+    ) {
+      return telegram.value.toString() + (telegram.unit ? " " + telegram.unit : "");
+    }
+    return dump(telegram.value);
   },
 
   timeWithMilliseconds: (telegram: TelegramDict): string => {
@@ -46,8 +54,8 @@ export const TelegramDictFormatter = {
 
   dptNameNumber: (telegram: TelegramDict): string => {
     const dptNumber = TelegramDictFormatter.dptNumber(telegram);
-    if (telegram.dpt_name == null) return dptNumber;
-    return dptNumber ? telegram.dpt_name + " - " + dptNumber : telegram.dpt_name;
+    if (telegram.dpt_name == null) return `DPT ${dptNumber}`;
+    return dptNumber ? `DPT ${dptNumber} ${telegram.dpt_name}` : telegram.dpt_name;
   },
 };