diff --git a/src/components/custom-widget-elements/Checkbox.vue b/src/components/custom-widget-elements/Checkbox.vue index c5f74d739..b3a6cfc81 100644 --- 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 index 915da7ea0..b88e57993 100644 --- 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 index bff3fff8e..f40454199 100644 --- 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 index 6a08b8d90..6149dad92 100644 --- 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 index c4805e41e..4fc445d07 100644 --- 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(() => {