Clean Button Group

bartbutenaers · Nov 13, 2024 · fbe4b9c · fbe4b9c
1 parent 9e03f7a
commit fbe4b9c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 47 deletions.
diff --git a/ui/src/widgets/ui-button-group/UIButtonGroup.vue b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
@@ -26,11 +26,6 @@ export default {
         props: { type: Object, default: () => ({}) },
         state: { type: Object, default: () => ({}) }
     },
-    data () {
-        return {
-            selection: null
-        }
-    },
     computed: {
         ...mapState('data', ['messages']),
         selectedColor: function () {
@@ -59,63 +54,43 @@ export default {
                 })
             }
             return options
+        },
+        selection: {
+            get () {
+                const msg = this.messages[this.id]
+                let selection = null
+                if (msg) {
+                    if (Array.isArray(msg.payload) && msg.payload.length === 0) {
+                        selection = null
+                    } else if (this.findOptionByValue(msg.payload) !== null) {
+                        selection = msg.payload
+                    }
+                }
+                return selection
+            },
+            set (value) {
+                if (!this.messages[this.id]) {
+                    this.messages[this.id] = {}
+                }
+                this.messages[this.id].payload = value
+            }
         }
     },
     created () {
         // can't do this in setup as we are using custom onInput function that needs access to 'this'
-        this.$dataTracker(this.id, this.onInput, this.onLoad, this.onDynamicProperty, this.onSync)
+        this.$dataTracker(this.id, null, null, this.onDynamicProperty, null)
 
         // let Node-RED know that this widget has loaded
         this.$socket.emit('widget-load', this.id)
     },
     methods: {
-        onInput (msg) {
-            // update our vuex store with the value retrieved from Node-RED
-            this.$store.commit('data/bind', {
-                widgetId: this.id,
-                msg
-            })
-
-            // make sure our v-model is updated to reflect the value from Node-RED
-            if (msg.payload !== undefined) {
-                if (Array.isArray(msg.payload) && msg.payload.length === 0) {
-                    this.selection = null
-                } else {
-                    if (this.findOptionByValue(msg.payload) !== null) {
-                        this.selection = msg.payload
-                    }
-                }
-            }
-        },
-        onLoad (msg) {
-            if (msg) {
-                // update vuex store to reflect server-state
-                this.$store.commit('data/bind', {
-                    widgetId: this.id,
-                    msg
-                })
-                // make sure we've got the relevant option selected on load of the page
-                if (msg.payload !== undefined) {
-                    if (Array.isArray(msg.payload) && msg.payload.length === 0) {
-                        this.selection = null
-                    } else {
-                        if (this.findOptionByValue(msg.payload) !== null) {
-                            this.selection = msg.payload
-                        }
-                    }
-                }
-            }
-        },
         onDynamicProperty (msg) {
             const updates = msg.ui_update
             if (updates) {
                 this.updateDynamicProperty('label', updates.label)
                 this.updateDynamicProperty('options', updates.options)
             }
         },
-        onSync (msg) {
-            this.selection = msg.payload
-        },
         onChange (value) {
             if (value !== null && typeof value !== 'undefined') {
                 // Tell Node-RED a new value has been selected

diff --git a/ui/src/widgets/ui-number-input/UINumberInput.vue b/ui/src/widgets/ui-number-input/UINumberInput.vue
@@ -119,7 +119,6 @@ export default {
                     return // no change
                 }
                 const msg = this.messages[this.id] || {}
-                this.textValue = val
                 msg.payload = val
                 this.messages[this.id] = msg
             }