Merge pull request #1 from FlowFuse/main

resync fork
FlowFuse · Jan 11, 2025 · 0d24e9d · 0d24e9d
2 parents d27fd37 + b1874f8
commit 0d24e9d
Show file tree

Hide file tree

Showing 32 changed files with 213 additions and 120 deletions.
diff --git a/docs/contributing/guides/registration.md b/docs/contributing/guides/registration.md
@@ -100,7 +100,8 @@ Similar to `onAction`, when used as a boolean, this flag will trigger the defaul
 2. Appends any `msg.topic` defined on the node config
 3. Runs `evts.beforeSend()` _(if provided)_
 4. Store the most recent message on the widget under the `._msg` property which will contain the latest state/value of the widget
-5. Sends the `msg` onwards to any connected nodes
+5. Pushes a `widget-sync` event to synchronize the widgets in all clients.
+6. Sends the `msg` onwards to any connected nodes
 
 #### Custom `onChange` Handler
 
@@ -111,8 +112,10 @@ Alternatively, you can override this default behaviour by providing a custom `on
  * Handle the input from the widget
  * @param {object} msg - the last known msg received (prior to this new value)
  * @param {boolean} value - the updated value sent by the widget
+ * @param {Socket} conn - socket.io socket connecting to the server
+ * @param {String} id - widget id sending the action
  */
-onChange: async function (msg, value) {
+onChange: async function (msg, value, conn, id) {
     // ensure we have latest instance of the widget's node
     const wNode = RED.nodes.getNode(node.id)
 
@@ -127,6 +130,10 @@ onChange: async function (msg, value) {
     const off = RED.util.evaluateNodeProperty(config.offvalue, config.offvalueType, wNode)
     msg.payload = value ? on : off
 
+    // sync this change to all clients with the same widget
+    const exclude = [conn.id] 
+    base.emit('widget-sync:' + id, msg, node, exclude)
+
     // simulate Node-RED node receiving an input
     wNode.send(msg)
 }

diff --git a/docs/examples/chart-bar-election-grouped.json b/docs/examples/chart-bar-election-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-bar-finance-grouped.json b/docs/examples/chart-bar-finance-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-bar-sw-characters.json b/docs/examples/chart-bar-sw-characters.json
@@ -207,7 +207,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -229,4 +229,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-bins.json b/docs/examples/chart-histogram-bins.json
@@ -131,7 +131,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -153,4 +153,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-categories.json b/docs/examples/chart-histogram-categories.json
@@ -325,7 +325,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -347,4 +347,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-histogram-series.json b/docs/examples/chart-histogram-series.json
@@ -183,7 +183,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -205,4 +205,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-line-multiple.json b/docs/examples/chart-line-multiple.json
@@ -177,7 +177,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -199,4 +199,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-line-timestamp.json b/docs/examples/chart-line-timestamp.json
@@ -163,7 +163,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -185,4 +185,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-pie-doughnut.json b/docs/examples/chart-pie-doughnut.json
@@ -251,7 +251,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -273,4 +273,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/chart-scatter-grouped.json b/docs/examples/chart-scatter-grouped.json
@@ -144,7 +144,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -166,4 +166,4 @@
             "widgetGap": "12px"
         }
     }
-]
+]
diff --git a/docs/examples/group-dialog-type.json b/docs/examples/group-dialog-type.json
@@ -162,7 +162,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -212,4 +212,4 @@
             "density": "default"
         }
     }
-]
+]
diff --git a/docs/examples/ui-button-hold.json b/docs/examples/ui-button-hold.json
@@ -237,7 +237,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "icon",
         "titleBarStyle": "default"
     },
@@ -260,4 +260,4 @@
             "density": "default"
         }
     }
-]
+]
diff --git a/docs/examples/ui-text-suffix.json b/docs/examples/ui-text-suffix.json
@@ -109,7 +109,7 @@
             "ui-notification"
         ],
         "showPathInSidebar": false,
-        "showPageTitle": false,
+        "headerContent": "none",
         "navigationStyle": "default",
         "titleBarStyle": "default"
     },
@@ -131,4 +131,4 @@
             "widgetGap": "6px"
         }
     }
-]
+]
diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md
@@ -9,7 +9,7 @@ props:
     Appearance: Specify whether the shape of the widget should be rectangular or have rounded corners.
     Use theme colors: Specify whether the theme colors should be used. If not active, custom colors can be specified for each option separately.
     Options:
-        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.
+        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.  Html content is allowed for the labels.
         dynamic: true
     Topic: The text that needs to be send in the msg.topic field.
     Passthrough: Specify whether input messages should be passed through as output messages.

diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json
@@ -25,7 +25,11 @@
             "titleBarStyleFixed": "Fixed",
             "sidebar": "Sidebar Options",
             "showPath": "Include Page Path in Label",
-            "showPageTitle": "Show Page Name in Header",
+            "headerContent": "Content",
+            "headerDashboard": "Dashboard name",
+            "headerPage": "Page name",
+            "headerDashboardPage": "Dashboard name (Page name)",
+            "headerNone": "None",
             "navigationStyle": "Style",
             "navigationStyleDefault": "Collapsing (default)",
             "navigationStyleFixed": "Fixed",
@@ -63,4 +67,4 @@
             "darkest": "var(--nrdb-node-darkest)"
         }
     }
-}
+}
diff --git a/nodes/config/locales/en-US/ui_page.json b/nodes/config/locales/en-US/ui_page.json
@@ -7,6 +7,7 @@
             "icon": "Icon",
             "theme": "Theme",
             "layout": "Layout",
+            "editLayout": "Edit Layout",
             "grid": "Grid",
             "fixed": "Fixed",
             "tabs": "Tabs",