Merge pull request #1310 from FlowFuse/1284-inconsistent-use-of-msgui…

…_updatetitle-to-update-the-label-for-gauge-node-msgui_updatelabel-is-used-for-other-nodes Standardise the property label instead title
FlowFuse · Sep 20, 2024 · 312bbd4 · 312bbd4
2 parents 4a4b185 + dc7ca2f
commit 312bbd4
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 13 deletions.
diff --git a/docs/nodes/widgets/ui-gauge.md b/docs/nodes/widgets/ui-gauge.md
@@ -42,7 +42,7 @@ controls:
         description: Allow control over whether or not the number-input is enabled
 dynamic:
     Label:
-        payload: msg.ui_update.title
+        payload: msg.ui_update.label
         structure: ["String"]
     Icon:
         payload: msg.ui_update.icon

diff --git a/nodes/widgets/locales/en-US/ui_gauge.html b/nodes/widgets/locales/en-US/ui_gauge.html
@@ -11,7 +11,7 @@ <h3>Properties</h3>
         <dt>Segments <span class="property-type">list</span></dt>
         <dd>Collection of objects that define the relevant color for a given value</dd>
         <dt>Label <span class="property-type">list</span></dt>
-        <dd>The title text shown above the gauge</dd>
+        <dd>The label text shown above the gauge</dd>
         <dt>Defaults <span class="property-type">list</span></dt>
         <dd>Reset to default min/max and segments based on the selected gauge type</dd>
     </dl>
@@ -33,7 +33,7 @@ <h3>Properties (Half &amp; 3/4 Gauges Only)</h3>
     <h3>Dynamic Properties (Inputs)</h3>
     <p>Any of the following can be appended to a <code>msg.ui_update</code> in order to override or set properties on this node at runtime.</p>
     <dl class="message-properties">
-        <dt class="optional">title <span class="property-type">string</span></dt>
+        <dt class="optional">label <span class="property-type">string</span></dt>
         <dd>Update the label rendered above the Gauge</dd>
         <dt class="optional">segments <span class="property-type">array</span></dt>
         <dd>

diff --git a/nodes/widgets/ui_gauge.js b/nodes/widgets/ui_gauge.js
@@ -13,9 +13,16 @@ module.exports = function (RED) {
             beforeSend: async function (msg) {
                 const updates = msg.ui_update
                 if (updates) {
-                    if (typeof updates.title !== 'undefined') {
+                    const hasLabelKey = Object.keys(updates).includes('label')
+                    const hasTitleKey = Object.keys(updates).includes('title')
+
+                    if (!hasLabelKey && hasTitleKey) {
+                        updates.label = updates.title
+                    }
+
+                    if (typeof updates.label !== 'undefined') {
                         // dynamically set "label" property
-                        statestore.set(group.getBase(), node, msg, 'title', updates.title)
+                        statestore.set(group.getBase(), node, msg, 'label', updates.label)
                     }
                     if (typeof updates.gtype !== 'undefined') {
                         // dynamically set "gauge type" property

diff --git a/ui/src/widgets/ui-gauge/UIGauge.vue b/ui/src/widgets/ui-gauge/UIGauge.vue
@@ -30,8 +30,8 @@ export default {
         value: function () {
             return this.messages[this.id]?.payload
         },
-        title () {
-            return this.getProperty('title')
+        label () {
+            return this.getProperty('label')
         },
         gtype () {
             return this.getProperty('gtype')
@@ -63,7 +63,7 @@ export default {
         dynamicProps () {
             const props = {
                 ...this.props,
-                title: this.title,
+                label: this.label || this.props.title, // Get dynamic label or fallback to legacy title
                 gtype: this.gtype,
                 gstyle: this.gstyle,
                 prefix: this.prefix,
@@ -74,6 +74,7 @@ export default {
                 min: this.min,
                 max: this.max
             }
+            delete props.title
             return props
         },
         updateGaugeDial () {
@@ -89,7 +90,12 @@ export default {
             if (!updates) {
                 return
             }
-            this.updateDynamicProperty('title', updates.title)
+            const hasLabelKey = Object.keys(updates).includes('label')
+            const hasTitleKey = Object.keys(updates).includes('title')
+            if (!hasLabelKey && hasTitleKey) {
+                updates.label = updates.title
+            }
+            this.updateDynamicProperty('label', updates.label)
             this.updateDynamicProperty('gtype', updates.gtype)
             this.updateDynamicProperty('gstyle', updates.gstyle)
             this.updateDynamicProperty('prefix', updates.prefix)

diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeBattery.vue b/ui/src/widgets/ui-gauge/types/UIGaugeBattery.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="nrdb-ui-gauge-battery--container">
-        <label v-if="props.title" class="nrdb-ui-gauge-title">{{ props.title }}</label>
+        <label v-if="props.label" class="nrdb-ui-gauge-title">{{ props.label }}</label>
         <div class="nrdb-ui-gauge-battery" :class="`nrdb-ui-gauge-battery--${orientation}`" :style="{'--gauge-fill': color, '--gauge-fill-pc': pc + '%', 'color': getTextColor(props.segments, value)}">
             <div class="nrdb-ui-gauge-battery--center">
                 <div class="nrdb-ui-gauge-battery-icon nrdb-ui-gauge-battery-icon--bg">

diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeDial.vue b/ui/src/widgets/ui-gauge/types/UIGaugeDial.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" class="nrdb-ui-gauge-dial" style="display: flex;flex-direction: column;" :class="`nrdb-ui-gauge-size-${size}${iconOnly ? ' nrdb-ui-gauge-icon-only' : ''}`">
-        <label v-if="props.title" ref="title" class="nrdb-ui-gauge-title">{{ props.title }}</label>
+        <label v-if="props.label" ref="title" class="nrdb-ui-gauge-title">{{ props.label }}</label>
         <svg ref="gauge" width="0" height="100%">
             <g id="sections" />
             <g id="backdrop">

diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeTank.vue b/ui/src/widgets/ui-gauge/types/UIGaugeTank.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-resize="onResize" class="nrdb-ui-gauge-tank--container">
-        <label v-if="props.title" class="nrdb-ui-gauge-title">{{ props.title }}</label>
+        <label v-if="props.label" class="nrdb-ui-gauge-title">{{ props.label }}</label>
         <div
             class="nrdb-ui-gauge-tank"
             :style="{'--gauge-fill': color, '--gauge-fill-pc': pc + '%', 'color': getTextColor(props.segments, value)}"

diff --git a/ui/src/widgets/ui-gauge/types/UIGaugeTile.vue b/ui/src/widgets/ui-gauge/types/UIGaugeTile.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="nrdb-ui-gauge-tile" :style="{'background-color': valueToColor(props.segments, value), 'color': getTextColor(props.segments, value)}">
-        <label>{{ props.title }}</label>
+        <label>{{ props.label }}</label>
     </div>
 </template>