Colour propery box on input, flash green on update, only modal notify if value is not set exactly

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"
   />
 </template>
 
@@ -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;
     }
   }
 };