From f26230efb62fe000c265c08a19d0db9546e3fadd Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Thu, 11 Jan 2024 03:01:33 +0000
Subject: [PATCH] Swap background detect from argument to property

I've added boolean support to PropertyControl. This required
working around a bug in axios, that ignored `false` when sent
as the body of a request.
---
 .../labThingsComponents/propertyControl.vue   | 128 +++++++++++-------
 .../tabContentComponents/slideScanContent.vue |  41 ++++--
 webapp/src/main.js                            |   8 +-
 3 files changed, 109 insertions(+), 68 deletions(-)

diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 856886f7..f8a0c703 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -1,57 +1,79 @@
 <template>
   <div>
-    <label class="uk-form-label">{{ label }}</label>
-    <div v-if="dataType == 'number'" 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"
-      />
+    <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>
-    <div v-if="dataType == 'number_array'" 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>
-    <div v-if="dataType == 'number_object'" 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>
-    <div v-if="dataType == 'other'" class="input-and-buttons-container">
-      <input
-        :value="value"
-        class="uk-form-small numeric-setting-line-input"
-        type="text"
-        disabled="true"
-      />
-    </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>
 </template>
 
@@ -129,6 +151,9 @@ export default {
           }
         }
       }
+      if (prop.type == "boolean") {
+        return "boolean";
+      }
       if (prop.type == "object") {
         let numeric = true;
         for (let key in prop.properties) {
@@ -173,6 +198,7 @@ export default {
     writeProperty: async function() {
       try {
         let requestedValue = this.value;
+        console.log("writing", requestedValue);
         await this.writeThingProperty(
           this.thingName,
           this.propertyName,
@@ -195,6 +221,12 @@ export default {
         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;
     },
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 9c66c366..6fe1880f 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -16,20 +16,32 @@
                   property-name="max_range"
                   label="Maximum Distance (steps)"
                 />
-                <div class="uk-margin">
-                  <propertyControl
-                    thing-name="smart_scan"
-                    property-name="autofocus_dz"
-                    label="Autofocus range (steps)"
-                  />
-                </div>
-                <div class="uk-margin">
-                  <propertyControl
-                    thing-name="smart_scan"
-                    property-name="overlap"
-                    label="Image overlap (0-1)"
-                  />
-                </div>
+              </div>
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="smart_scan"
+                  property-name="autofocus_dz"
+                  label="Autofocus range (steps)"
+                />
+              </div>
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="smart_scan"
+                  property-name="overlap"
+                  label="Image overlap (0-1)"
+                />
+              </div>
+            </div>
+          </li>
+          <li class="uk-open">
+            <a class="uk-accordion-title" href="#">Scan Settings</a>
+            <div class="uk-accordion-content">
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="smart_scan"
+                  property-name="skip_background"
+                  label="Detect and skip empty fields"
+                />
               </div>
             </div>
           </li>
@@ -40,7 +52,6 @@
             :submit-url="smartScanUri"
             submit-label="Start smart scan"
             :can-terminate="true"
-            :submit-data="{ sample_check: true }"
             @taskStarted="startScanning"
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
diff --git a/webapp/src/main.js b/webapp/src/main.js
index a34367cb..7d9fa65e 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -63,11 +63,9 @@ Vue.mixin({
         "writeproperty",
         false
       );
-      try {
-        await axios.put(url, value);
-      } catch (error) {
-        this.modalError(error);
-      }
+      // NB stringify is needed below, because otherwise boolean
+      // values get missed.
+      await axios.put(url, JSON.stringify(value));
     },
     thingActionUrl(thing, action) {
       let url = this.$store.getters["wot/thingActionUrl"](