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.

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <label class="uk-form-label">{{ label }}</label>
+    <label v-if="dataType == 'number'" class="uk-form-label">{{ label }}
-    <div v-if="dataType == 'number'" class="input-and-buttons-container">
+      <div class="input-and-buttons-container">
         <input
           v-model="value"
           class="uk-form-small numeric-setting-line-input"
@@ -14,7 +14,24 @@
           <span class="material-symbols-outlined">refresh</span>
         </a>
       </div>
-    <div v-if="dataType == 'number_array'" class="input-and-buttons-container">
+    </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"
@@ -29,7 +46,9 @@
           <span class="material-symbols-outlined">refresh</span>
         </a>
       </div>
-    <div v-if="dataType == 'number_object'" class="input-and-buttons-container">
+    </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"
@@ -44,7 +63,9 @@
           <span class="material-symbols-outlined">refresh</span>
         </a>
       </div>
-    <div v-if="dataType == 'other'" class="input-and-buttons-container">
+    </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"
@@ -52,6 +73,7 @@
           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;
     },

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -16,6 +16,7 @@
                   property-name="max_range"
                   label="Maximum Distance (steps)"
                 />
+              </div>
               <div class="uk-margin">
                 <propertyControl
                   thing-name="smart_scan"
@@ -31,6 +32,17 @@
                 />
               </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>
         </ul>
@@ -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"

webapp/src/main.js

@@ -63,11 +63,9 @@ Vue.mixin({
         "writeproperty",
         false
       );
-      try {
+      // NB stringify is needed below, because otherwise boolean
-        await axios.put(url, value);
+      // values get missed.
-      } catch (error) {
+      await axios.put(url, JSON.stringify(value));
-        this.modalError(error);
-      }
     },
     thingActionUrl(thing, action) {
       let url = this.$store.getters["wot/thingActionUrl"](