From 7f4b4ed1f3a37a3bd666ab3d8252365d275718ea Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Sun, 27 Jul 2025 18:30:32 +0100
Subject: [PATCH] Splitting logic for property control from logic to create UI
 from schema

---
 .../labThingsComponents/inputFromSchema.vue   | 216 ++++++++++++++++++
 .../labThingsComponents/propertyControl.vue   | 194 ++--------------
 .../serverSpecifiedPropertyControl.vue        |   1 +
 3 files changed, 236 insertions(+), 175 deletions(-)
 create mode 100644 webapp/src/components/labThingsComponents/inputFromSchema.vue

diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
new file mode 100644
index 00000000..e1463507
--- /dev/null
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <label v-if="dataType == 'number'" class="uk-form-label"
+      >{{ label }}
+      <div class="input-and-buttons-container">
+        <input
+          v-model="internalValue"
+          class="uk-form-small numeric-setting-line-input"
+          type="number"
+          @focusin="focusIn"
+          @focusout="focusOut"
+          @keydown="keyDown"
+        />
+        <a class="button-next-to-input" @click="requestUpdate">
+          <span class="material-symbols-outlined">refresh</span>
+        </a>
+      </div>
+    </label>
+    <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
+      <label class="uk-form-label numeric-setting-line-input">
+        <input
+          ref="checkbox"
+          v-model="internalValue"
+          class="uk-checkbox"
+          type="checkbox"
+          @change="sendValue"
+        />
+        {{ label }}
+      </label>
+      <a class="button-next-to-input" @click="requestUpdate">
+        <span class="material-symbols-outlined">refresh</span>
+      </a>
+    </div>
+    <label v-if="dataType == 'number_array'" class="uk-form-label"
+      >{{ label }}
+      <div class="input-and-buttons-container">
+        <input
+          v-for="i in valueLength"
+          :key="i"
+          v-model="internalValue[i - 1]"
+          class="uk-form-small numeric-setting-line-input"
+          type="number"
+          @focusin="focusIn"
+          @focusout="focusOut"
+          @keydown="keyDown"
+        />
+        <a class="button-next-to-input" @click="requestUpdate">
+          <span class="material-symbols-outlined">refresh</span>
+        </a>
+      </div>
+    </label>
+    <label v-if="dataType == 'number_object'" class="uk-form-label"
+      >{{ label }}
+      <div class="input-and-buttons-container">
+        <input
+          v-for="(_v, key) in value"
+          :key="key"
+          v-model="internalValue[key]"
+          class="uk-form-small numeric-setting-line-input"
+          type="number"
+          @focusin="focusIn"
+          @focusout="focusOut"
+          @keydown="keyDown"
+        />
+        <a class="button-next-to-input" @click="requestUpdate">
+          <span class="material-symbols-outlined">refresh</span>
+        </a>
+      </div>
+    </label>
+    <label v-if="dataType == 'other'" class="uk-form-label"
+      >{{ label }}
+      <div class="input-and-buttons-container">
+        <input
+          v-model="internalValue"
+          class="uk-form-small numeric-setting-line-input"
+          type="text"
+          disabled="true"
+        />
+      </div>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputFromSchema",
+
+  props: {
+    dataSchema: {
+      type: Object
+    },
+    value: {
+      type: null
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+  },
+
+  data() {
+    return {
+      internalValue: this.value,
+      valueOnEnter: undefined,
+      focused: false
+    };
+  },
+
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  computed: {
+    valueLength: function() {
+      if (this.dataType == "number_array") {
+        if (this.internalValue == undefined) {
+          return 0;
+        }
+        return this.internalValue.length;
+      } else {
+        return 1;
+      }
+    },
+    dataType: function() {
+      let prop = this.dataSchema;
+      if (prop == undefined) {
+        return "undefined";
+      }
+      const num_types = ["integer", "float", "number"];
+      if (num_types.includes(prop.type)) {
+        return "number";
+      }
+      if (prop.type == "array") {
+        if (num_types.includes(prop.items.type)) {
+          return "number_array";
+        }
+        if (Array.isArray(prop.items)) {
+          if (prop.items.every(t => num_types.includes(t.type))) {
+            return "number_array";
+          }
+        }
+      }
+      if (prop.type == "boolean") {
+        return "boolean";
+      }
+      if (prop.type == "object") {
+        let numeric = true;
+        for (let key in prop.properties) {
+          if (!num_types.includes(prop.properties[key].type)) {
+            numeric = false;
+            break;
+          }
+        }
+        if (numeric) {
+          return "number_object";
+        }
+      }
+      return "other";
+    }
+  },
+
+  methods: {
+    requestUpdate: async function() {
+      this.$emit("requestUpdate")
+    },
+    sendValue: async function() {
+      this.$emit("sendValue", this.internalValue)
+    },
+    checkboxUpdated: function() {
+      if (this.internalValue != this.$refs.checkbox.checked) {
+        this.internalValue = this.$refs.checkbox.checked;
+        this.sendValue();
+      }
+    },
+    focusIn: function(event) {
+      this.valueOnEnter = event.target.value;
+    },
+    focusOut: function(event) {
+      if (this.valueOnEnter != event.target.value) {
+        this.sendValue(event.target.value);
+      }
+    },
+    keyDown: function(event) {
+      // Pressing enter should set the property, whether or not we think it's changed.
+      if (event.keyCode == 13) {
+        this.sendValue();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.input-and-buttons-container {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-content: stretch;
+  align-items: center;
+  width: 100%;
+}
+.numeric-setting-line-input {
+  flex-grow: 1;
+  margin-left: 5px;
+  margin-right: 5px;
+  width: 6em;
+}
+.button-next-to-input {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+</style>
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index e3ce0cbb..2b3e09f0 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -1,90 +1,23 @@
 <template>
-  <div>
-    <label v-if="dataType == 'number'" class="uk-form-label"
-      >{{ label }}
-      <div class="input-and-buttons-container">
-        <input
-          v-model="value"
-          class="uk-form-small numeric-setting-line-input"
-          type="number"
-          @focusin="focusIn"
-          @focusout="focusOut"
-          @keydown="keyDown"
-        />
-        <a class="button-next-to-input" @click="readProperty">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
-      </div>
-    </label>
-    <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
-      <label class="uk-form-label numeric-setting-line-input">
-        <input
-          ref="checkbox"
-          v-model="value"
-          class="uk-checkbox"
-          type="checkbox"
-          @change="writeProperty"
-        />
-        {{ label }}
-      </label>
-      <a class="button-next-to-input" @click="readProperty">
-        <span class="material-symbols-outlined">refresh</span>
-      </a>
-    </div>
-    <label v-if="dataType == 'number_array'" class="uk-form-label"
-      >{{ label }}
-      <div class="input-and-buttons-container">
-        <input
-          v-for="i in valueLength"
-          :key="i"
-          v-model="value[i - 1]"
-          class="uk-form-small numeric-setting-line-input"
-          type="number"
-          @focusin="focusIn"
-          @focusout="focusOut"
-          @keydown="keyDown"
-        />
-        <a class="button-next-to-input" @click="readProperty">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
-      </div>
-    </label>
-    <label v-if="dataType == 'number_object'" class="uk-form-label"
-      >{{ label }}
-      <div class="input-and-buttons-container">
-        <input
-          v-for="(_v, key) in value"
-          :key="key"
-          v-model="value[key]"
-          class="uk-form-small numeric-setting-line-input"
-          type="number"
-          @focusin="focusIn"
-          @focusout="focusOut"
-          @keydown="keyDown"
-        />
-        <a class="button-next-to-input" @click="readProperty">
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
-      </div>
-    </label>
-    <label v-if="dataType == 'other'" class="uk-form-label"
-      >{{ label }}
-      <div class="input-and-buttons-container">
-        <input
-          :value="value"
-          class="uk-form-small numeric-setting-line-input"
-          type="text"
-          disabled="true"
-        />
-      </div>
-    </label>
-  </div>
+  <input-from-schema
+    v-model="value"
+    :data-schema="propertyDescription"
+    :label="label"
+    @requestUpdate="readProperty"
+    @sendValue="writeProperty"
+  />
 </template>
 
 <script>
+import InputFromSchema from "./inputFromSchema.vue";
+
 export default {
   name: "PropertyControl",
 
+  components: {
+    InputFromSchema
+  },
+
   props: {
     label: {
       type: String,
@@ -110,25 +43,13 @@ export default {
     }
   },
 
-  data: () => {
+  data() {
     return {
-      value: undefined,
-      valueOnEnter: undefined,
-      focused: false
+      value: undefined
     };
   },
 
   computed: {
-    valueLength: function() {
-      if (this.dataType == "number_array") {
-        if (this.value == undefined) {
-          return 0;
-        }
-        return this.value.length;
-      } else {
-        return 1;
-      }
-    },
     propertyDescription: function() {
       try {
         return this.thingDescription(this.thingName).properties[
@@ -137,42 +58,6 @@ export default {
       } catch (error) {
         return undefined;
       }
-    },
-    dataType: function() {
-      let prop = this.propertyDescription;
-      if (prop == undefined) {
-        return "undefined";
-      }
-      const num_types = ["integer", "float", "number"];
-      if (num_types.includes(prop.type)) {
-        return "number";
-      }
-      if (prop.type == "array") {
-        if (num_types.includes(prop.items.type)) {
-          return "number_array";
-        }
-        if (Array.isArray(prop.items)) {
-          if (prop.items.every(t => num_types.includes(t.type))) {
-            return "number_array";
-          }
-        }
-      }
-      if (prop.type == "boolean") {
-        return "boolean";
-      }
-      if (prop.type == "object") {
-        let numeric = true;
-        for (let key in prop.properties) {
-          if (!num_types.includes(prop.properties[key].type)) {
-            numeric = false;
-            break;
-          }
-        }
-        if (numeric) {
-          return "number_object";
-        }
-      }
-      return "other";
     }
   },
 
@@ -201,9 +86,10 @@ export default {
       this.value = data;
       return data;
     },
-    writeProperty: async function() {
+    writeProperty: async function(requestedValue) {
       try {
-        let requestedValue = this.value;
+        console.log(requestedValue);
+        this.value=requestedValue;
         await this.writeThingProperty(
           this.thingName,
           this.propertyName,
@@ -225,51 +111,9 @@ export default {
       } catch (error) {
         this.modalError(error); // Let mixin handle error
       }
-    },
-    checkboxUpdated: function() {
-      if (this.value != this.$refs.checkbox.checked) {
-        this.value = this.$refs.checkbox.checked;
-        this.writeProperty();
-      }
-    },
-    focusIn: function(event) {
-      this.valueOnEnter = event.target.value;
-    },
-    focusOut: function(event) {
-      if (this.valueOnEnter != event.target.value) {
-        this.writeProperty(event.target.value);
-      }
-    },
-    keyDown: function(event) {
-      // Pressing enter should set the property, whether or not we think it's changed.
-      if (event.keyCode == 13) {
-        this.writeProperty();
-      }
     }
   }
 };
 </script>
 
-<style scoped>
-.input-and-buttons-container {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  align-content: stretch;
-  align-items: center;
-  width: 100%;
-}
-.numeric-setting-line-input {
-  flex-grow: 1;
-  margin-left: 5px;
-  margin-right: 5px;
-  width: 6em;
-}
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
-</style>
+<style scoped></style>
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
index a0f81ab5..89a24fe3 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
@@ -3,6 +3,7 @@
     :thing="propertyData.thing"
     :property-name="propertyData.property_name"
     :thing-name="propertyData.thing"
+    :label="propertyData.label"
     :read-back="propertyData.read_back"
     :read-back-delay="propertyData.read_back_delay"
   />