From 823456dbc2ca124e259f9967e9fafa5d951f58e3 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 28 Aug 2025 11:11:27 +0100 Subject: [PATCH 1/6] Refresh property value if failed to set. --- .../src/components/labThingsComponents/propertyControl.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue index 1ed1b477..055bbc9d 100644 --- a/webapp/src/components/labThingsComponents/propertyControl.vue +++ b/webapp/src/components/labThingsComponents/propertyControl.vue @@ -108,7 +108,10 @@ export default { await this.modalNotify(`Set ${this.label} to ${this.value}.`); } } catch (error) { - this.modalError(error); // Let mixin handle error + // Use mixin to display error + this.modalError(error); + // Re-read property to try to update to server value + this.readProperty(); } } } From 80ee303ac93bcb21e616268d5cf0187002db6a49 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 28 Aug 2025 11:12:19 +0100 Subject: [PATCH 2/6] Update the reload property button next to property controls --- .../labThingsComponents/inputFromSchema.vue | 29 ++++++--------- .../syncPropertyButton.vue | 35 +++++++++++++++++++ .../controlComponents/paneControl.vue | 15 +++----- 3 files changed, 49 insertions(+), 30 deletions(-) create mode 100644 webapp/src/components/labThingsComponents/syncPropertyButton.vue diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue index 32f78f63..33c674c6 100644 --- a/webapp/src/components/labThingsComponents/inputFromSchema.vue +++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue @@ -11,9 +11,7 @@ @focusout="focusOut" @keydown="keyDown" /> - - refresh - +
@@ -27,9 +25,7 @@ /> {{ label }} - - refresh - +
@@ -83,9 +75,15 @@ + + diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue index 1bb601a4..b4e57b2b 100644 --- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue +++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue @@ -85,9 +85,7 @@ type="number" @keyup.enter="startMoveTask" /> - - refresh - +

import axios from "axios"; import ActionButton from "../../labThingsComponents/actionButton.vue"; +import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue"; // Export main app export default { name: "PaneControl", components: { - ActionButton + ActionButton, + syncPropertyButton }, data: function() { @@ -375,11 +375,4 @@ export default { -webkit-appearance: none; margin: 0; } -.button-next-to-input { - flex-grow: 0; - padding-left: 5px; - padding-right: 5px; - vertical-align: middle; - cursor: pointer; -} From 212b8fe0624ab8e78548a6f804200f314d9dacb4 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 28 Aug 2025 14:44:34 +0100 Subject: [PATCH 3/6] Colour propery box on input, flash green on update, only modal notify if value is not set exactly --- .../labThingsComponents/inputFromSchema.vue | 76 +++++++++++++++++-- .../labThingsComponents/propertyControl.vue | 15 +++- .../paneBackgroundDetect.vue | 8 ++ 3 files changed, 90 insertions(+), 9 deletions(-) diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue index 33c674c6..c9f95188 100644 --- a/webapp/src/components/labThingsComponents/inputFromSchema.vue +++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue @@ -6,6 +6,7 @@ { + this.animateUpdate = false; + this.$emit('animationShown'); + }, 700); + } } }, computed: { @@ -170,6 +206,10 @@ export default { }, methods: { + resetInternalValue: function() { + // stringify and parse to ensure no internal mutation for objects + this.internalValue = JSON.parse(JSON.stringify(this.value)); + }, requestUpdate: async function() { this.$emit("requestUpdate") }, @@ -195,7 +235,23 @@ export default { if (event.keyCode == 13) { this.sendValue(); } + }, + updateIsEdited: function() { + this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value); + }, + deepStringify: function(val) { + if (Array.isArray(val)) { + return JSON.stringify(val.map(String)); + } + if (val && typeof val === 'object') { + const normalized = Object.fromEntries( + Object.entries(val).map(([k, v]) => [k, String(v)]) + ); + return JSON.stringify(normalized); + } + return JSON.stringify(String(val)); } + } }; @@ -215,4 +271,14 @@ export default { margin-right: 5px; width: 6em; } +.edited { + background-color: #fff3cd; +} +@keyframes green-flash { + 0% { background-color: #3fda63; } + 100% { background-color: white; } +} +.flash { + animation: green-flash 0.7s ease; +} diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue index 055bbc9d..e9bc99c2 100644 --- a/webapp/src/components/labThingsComponents/propertyControl.vue +++ b/webapp/src/components/labThingsComponents/propertyControl.vue @@ -3,8 +3,10 @@ v-model="value" :data-schema="propertyDescription" :label="label" + :animate="animate" @requestUpdate="readProperty" @sendValue="writeProperty" + @animationShown="resetAnimate" /> @@ -45,7 +47,8 @@ export default { data() { return { - value: undefined + value: undefined, + animate: false }; }, @@ -98,14 +101,15 @@ export default { await new Promise(r => setTimeout(r, this.readBackDelay)); let newVal = await this.readProperty(); if (newVal == requestedValue) { - await this.modalNotify(`Set ${this.label} to ${newVal}.`); + this.animate = true; } else { + this.animate = true; await this.modalNotify( - `Set ${this.label} to ${newVal} (requested ${requestedValue}).` + `Set ${this.label} to ${newVal} (closest valid value to requested ${requestedValue}).` ); } } else { - await this.modalNotify(`Set ${this.label} to ${this.value}.`); + this.animate = true; } } catch (error) { // Use mixin to display error @@ -113,6 +117,9 @@ export default { // Re-read property to try to update to server value this.readProperty(); } + }, + resetAnimate: function() { + this.animate = false; } } }; diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue index f7e4abdd..2e7f1eba 100644 --- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue +++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue @@ -10,8 +10,10 @@ v-model="backgroundDetectorStatus.settings" :data-schema="backgroundDetectorStatus.settings_schema" label="" + :animate="animate" @requestUpdate="readSettings" @sendValue="writeSettings" + @animationShown="resetAnimate" /> @@ -57,6 +59,7 @@ export default { data() { return { backgroundDetectorStatus: undefined, + animate: false }; }, @@ -87,6 +90,11 @@ export default { "update_detector_settings", {"data": requestedValue} ); + this.animate = true; + this.readSettings(); + }, + resetAnimate: function() { + this.animate = false; } }, async created() { From acb24d9713c79fd2e22f9b3717c8385307bd1ab5 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 28 Aug 2025 17:21:51 +0100 Subject: [PATCH 4/6] Fix accept animation in chrome --- .../labThingsComponents/inputFromSchema.vue | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue index c9f95188..2d90c41c 100644 --- a/webapp/src/components/labThingsComponents/inputFromSchema.vue +++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue @@ -11,6 +11,7 @@ @focusin="focusIn" @focusout="focusOut" @keydown="keyDown" + @animationend="animationEnd" /> @@ -42,6 +43,7 @@ @focusin="focusIn" @focusout="focusOut" @keydown="keyDown" + @animationend="animationEnd" /> @@ -60,6 +62,7 @@ @focusin="focusIn" @focusout="focusOut" @keydown="keyDown" + @animationend="animationEnd" /> @@ -139,10 +142,6 @@ export default { animate(updated) { if (updated) { this.animateUpdate = true; - setTimeout(() => { - this.animateUpdate = false; - this.$emit('animationShown'); - }, 700); } } }, @@ -239,6 +238,10 @@ export default { updateIsEdited: function() { this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value); }, + animationEnd: function() { + this.animateUpdate = false; + this.$emit('animationShown'); + }, deepStringify: function(val) { if (Array.isArray(val)) { return JSON.stringify(val.map(String)); @@ -280,5 +283,7 @@ export default { } .flash { animation: green-flash 0.7s ease; + /*Without this background-colour chrome will ignore the animation colour.*/ + background-color: white; } From 4fe922cbfcf0f55a12dcca746fdca6777f6f2de2 Mon Sep 17 00:00:00 2001 From: Julian Stirling Date: Thu, 28 Aug 2025 17:36:04 +0100 Subject: [PATCH 5/6] Improve tooltip text --- .../components/labThingsComponents/syncPropertyButton.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/labThingsComponents/syncPropertyButton.vue b/webapp/src/components/labThingsComponents/syncPropertyButton.vue index 3c243cef..4fd11d18 100644 --- a/webapp/src/components/labThingsComponents/syncPropertyButton.vue +++ b/webapp/src/components/labThingsComponents/syncPropertyButton.vue @@ -1,6 +1,9 @@