From d7c17ce06602ec7768178eec17a8b922c6252412 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jendrik=20J=C3=A4ger?= <admin@jendrik.tech>
Date: Sat, 26 Aug 2023 01:07:58 +0200
Subject: [PATCH] Update description, added background property and check
 payload before sending

---
 button-group.html | 11 +++++++++++
 button-group.js   |  6 ++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/button-group.html b/button-group.html
index 902f737..5fb5ed5 100644
--- a/button-group.html
+++ b/button-group.html
@@ -79,4 +79,15 @@
 
 <script type="text/html" data-help-name="ui_button_group">
     <p>A simple button group node</p>
+    <p>
+        To add buttons, input an array with one of the following objects per button as msg.payload:
+        ```json
+        {
+            "label": "Dashboard Button Name",
+            "payload": {/*The payload that is send when the button is clicked*/},
+            "active": true, // Optional
+            "color": "#123456" // Optional
+        }
+        ```
+    </p>
 </script>
\ No newline at end of file
diff --git a/button-group.js b/button-group.js
index 8915d4d..a95af24 100644
--- a/button-group.js
+++ b/button-group.js
@@ -15,7 +15,7 @@ module.exports = function (RED) {
             var heightPx = config.buttonheight * sizes.sy - sizes.gy;
 
             var html = `<div style="width=100%; height=100%">
-                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px;" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
+                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}};" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
                 </div>`;
 
             var done = ui.addWidget({
@@ -45,7 +45,9 @@ module.exports = function (RED) {
                     $scope.buttonClick = function (e) {
                         e.preventDefault();
                         var buttonId = e.target.id;
-                        $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        if ($scope.msg.buttons[buttonId].payload) {
+                            $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        }
                     };
                 }
             });