Mini-widgets: Input-widgets: Add watch to reactively bind widget to d…

…ata-lake-variables Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
bluerobotics · Feb 12, 2025 · ef7b3ef · ef7b3ef
1 parent 64f73cf
commit ef7b3ef
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 29 deletions.
diff --git a/src/components/custom-widget-elements/Checkbox.vue b/src/components/custom-widget-elements/Checkbox.vue
@@ -70,6 +70,25 @@ watch(
   { immediate: true, deep: true }
 )
 
+watch(
+  () => miniWidget.value.options.dataLakeVariable?.name,
+  (newVal) => {
+    if (newVal) {
+      startListeningDataLakeVariable()
+    }
+  },
+  { immediate: true }
+)
+
+const startListeningDataLakeVariable = (): void => {
+  if (miniWidget.value.options.dataLakeVariable) {
+    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
+      isChecked.value = value as boolean
+    })
+    isChecked.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
+  }
+}
+
 onMounted(() => {
   if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
     miniWidget.value.isCustomElement = true
@@ -83,12 +102,7 @@ onMounted(() => {
       dataLakeVariable: undefined,
     })
   }
-  if (miniWidget.value.options.dataLakeVariable) {
-    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
-      isChecked.value = value as boolean
-    })
-    isChecked.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
-  }
+  startListeningDataLakeVariable()
 })
 
 onUnmounted(() => {

diff --git a/src/components/custom-widget-elements/Dial.vue b/src/components/custom-widget-elements/Dial.vue
@@ -89,6 +89,26 @@ const setDialValue = (value: number | string | undefined): void => {
   rotationAngle.value = ((numValue - miniWidget.value.options.layout?.minValue) / valueRange) * rotationRange - 150
 }
 
+watch(
+  () => miniWidget.value.options.dataLakeVariable?.name,
+  (newVal) => {
+    if (newVal) {
+      startListeningDataLakeVariable()
+    }
+  },
+  { immediate: true }
+)
+
+const startListeningDataLakeVariable = (): void => {
+  if (miniWidget.value.options.dataLakeVariable) {
+    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable?.name, (value) => {
+      setDialValue(value as number)
+    })
+    const initialValue = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
+    setDialValue(initialValue)
+  }
+}
+
 onMounted(() => {
   if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
     miniWidget.value.isCustomElement = true
@@ -106,13 +126,7 @@ onMounted(() => {
       dataLakeVariable: undefined,
     })
   }
-  if (miniWidget.value.options.dataLakeVariable) {
-    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable?.name, (value) => {
-      setDialValue(value as number)
-    })
-    const initialValue = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
-    setDialValue(initialValue)
-  }
+  startListeningDataLakeVariable()
 })
 
 const sizeClass = computed(() => {

diff --git a/src/components/custom-widget-elements/Dropdown.vue b/src/components/custom-widget-elements/Dropdown.vue
@@ -99,6 +99,25 @@ const handleSelection = (value: string | number | boolean): void => {
   widgetStore.setMiniWidgetLastValue(miniWidget.value.hash, selected.value)
 }
 
+watch(
+  () => miniWidget.value.options.dataLakeVariable?.name,
+  (newVal) => {
+    if (newVal) {
+      startListeningDataLakeVariable()
+    }
+  },
+  { immediate: true }
+)
+
+const startListeningDataLakeVariable = (): void => {
+  if (miniWidget.value.options.dataLakeVariable) {
+    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
+      selectedValue.value = value as string
+    })
+    selectedValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as string
+  }
+}
+
 onMounted(() => {
   if (!miniWidget.value.options || Object.keys(miniWidget.value.options).length === 0) {
     miniWidget.value.isCustomElement = true
@@ -113,11 +132,7 @@ onMounted(() => {
     })
   }
   if (miniWidget.value.options.dataLakeVariable) {
-    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
-      selectedOption.value = options.value.find((option) => option.value === value)
-    })
-    const storedValue = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash)
-    selectedOption.value = options.value.find((option: SelectorOption) => option.value === storedValue)
+    startListeningDataLakeVariable()
   }
   if (miniWidget.value.options.lastSelected?.name !== '') {
     selectedOption.value = miniWidget.value.options.lastSelected

diff --git a/src/components/custom-widget-elements/Slider.vue b/src/components/custom-widget-elements/Slider.vue
@@ -74,6 +74,25 @@ watch(
   { immediate: true, deep: true }
 )
 
+watch(
+  () => miniWidget.value.options.dataLakeVariable?.name,
+  (newVal) => {
+    if (newVal) {
+      startListeningDataLakeVariable()
+    }
+  },
+  { immediate: true }
+)
+
+const startListeningDataLakeVariable = (): void => {
+  if (miniWidget.value.options.dataLakeVariable) {
+    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable?.name, (value) => {
+      sliderValue.value = value as number
+    })
+    sliderValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as number
+  }
+}
+
 const handleSliderChange = (): void => {
   if (widgetStore.editingMode) return
   if (miniWidget.value.options.dataLakeVariable) {
@@ -99,12 +118,7 @@ onMounted(() => {
       dataLakeVariable: undefined,
     })
   }
-  if (miniWidget.value.options.dataLakeVariable) {
-    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable?.name, (value) => {
-      sliderValue.value = value as number
-    })
-    sliderValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as number
-  }
+  startListeningDataLakeVariable()
 })
 
 onUnmounted(() => {

diff --git a/src/components/custom-widget-elements/Switch.vue b/src/components/custom-widget-elements/Switch.vue
@@ -60,6 +60,25 @@ watch(
   { immediate: true, deep: true }
 )
 
+watch(
+  () => miniWidget.value.options.dataLakeVariable?.name,
+  (newVal) => {
+    if (newVal) {
+      startListeningDataLakeVariable()
+    }
+  },
+  { immediate: true }
+)
+
+const startListeningDataLakeVariable = (): void => {
+  if (miniWidget.value.options.dataLakeVariable) {
+    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
+      switchValue.value = value as boolean
+    })
+    switchValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
+  }
+}
+
 const handleToggleAction = (): void => {
   if (widgetStore.editingMode) return
   if (miniWidget.value.options.dataLakeVariable) {
@@ -83,12 +102,8 @@ onMounted(() => {
     })
 
     switchValue.value = true
-  } else if (miniWidget.value.options.dataLakeVariable) {
-    listenerId = listenDataLakeVariable(miniWidget.value.options.dataLakeVariable.name, (value) => {
-      switchValue.value = value as boolean
-    })
-    switchValue.value = widgetStore.getMiniWidgetLastValue(miniWidget.value.hash) as boolean
   }
+  startListeningDataLakeVariable()
 })
 
 onUnmounted(() => {