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.
This commit is contained in:
Richard Bowman 2024-01-11 03:01:33 +00:00
parent 3de7aa2fb2
commit f26230efb6
3 changed files with 109 additions and 68 deletions

View file

@ -1,57 +1,79 @@
<template> <template>
<div> <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 <input
v-model="value" v-model="value"
class="uk-form-small numeric-setting-line-input" class="uk-form-small numeric-setting-line-input"
type="number" type="number"
@focusin="focusIn" @focusin="focusIn"
@focusout="focusOut" @focusout="focusOut"
@keydown="keyDown" @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"> <a class="button-next-to-input" @click="readProperty">
<span class="material-symbols-outlined">refresh</span> <span class="material-symbols-outlined">refresh</span>
</a> </a>
</div> </div>
<div v-if="dataType == 'number_array'" class="input-and-buttons-container"> <label v-if="dataType == 'number_array'" class="uk-form-label">{{ label }}
<input <div class="input-and-buttons-container">
v-for="i in valueLength" <input
:key="i" v-for="i in valueLength"
v-model="value[i - 1]" :key="i"
class="uk-form-small numeric-setting-line-input" v-model="value[i - 1]"
type="number" class="uk-form-small numeric-setting-line-input"
@focusin="focusIn" type="number"
@focusout="focusOut" @focusin="focusIn"
@keydown="keyDown" @focusout="focusOut"
/> @keydown="keyDown"
<a class="button-next-to-input" @click="readProperty"> />
<span class="material-symbols-outlined">refresh</span> <a class="button-next-to-input" @click="readProperty">
</a> <span class="material-symbols-outlined">refresh</span>
</div> </a>
<div v-if="dataType == 'number_object'" class="input-and-buttons-container"> </div>
<input </label>
v-for="(_v, key) in value" <label v-if="dataType == 'number_object'" class="uk-form-label">{{ label }}
:key="key" <div class="input-and-buttons-container">
v-model="value[key]" <input
class="uk-form-small numeric-setting-line-input" v-for="(_v, key) in value"
type="number" :key="key"
@focusin="focusIn" v-model="value[key]"
@focusout="focusOut" class="uk-form-small numeric-setting-line-input"
@keydown="keyDown" type="number"
/> @focusin="focusIn"
<a class="button-next-to-input" @click="readProperty"> @focusout="focusOut"
<span class="material-symbols-outlined">refresh</span> @keydown="keyDown"
</a> />
</div> <a class="button-next-to-input" @click="readProperty">
<div v-if="dataType == 'other'" class="input-and-buttons-container"> <span class="material-symbols-outlined">refresh</span>
<input </a>
:value="value" </div>
class="uk-form-small numeric-setting-line-input" </label>
type="text" <label v-if="dataType == 'other'" class="uk-form-label">{{ label }}
disabled="true" <div class="input-and-buttons-container">
/> <input
</div> :value="value"
class="uk-form-small numeric-setting-line-input"
type="text"
disabled="true"
/>
</div>
</label>
</div> </div>
</template> </template>
@ -129,6 +151,9 @@ export default {
} }
} }
} }
if (prop.type == "boolean") {
return "boolean";
}
if (prop.type == "object") { if (prop.type == "object") {
let numeric = true; let numeric = true;
for (let key in prop.properties) { for (let key in prop.properties) {
@ -173,6 +198,7 @@ export default {
writeProperty: async function() { writeProperty: async function() {
try { try {
let requestedValue = this.value; let requestedValue = this.value;
console.log("writing", requestedValue);
await this.writeThingProperty( await this.writeThingProperty(
this.thingName, this.thingName,
this.propertyName, this.propertyName,
@ -195,6 +221,12 @@ export default {
this.modalError(error); // Let mixin handle 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) { focusIn: function(event) {
this.valueOnEnter = event.target.value; this.valueOnEnter = event.target.value;
}, },

View file

@ -16,20 +16,32 @@
property-name="max_range" property-name="max_range"
label="Maximum Distance (steps)" label="Maximum Distance (steps)"
/> />
<div class="uk-margin"> </div>
<propertyControl <div class="uk-margin">
thing-name="smart_scan" <propertyControl
property-name="autofocus_dz" thing-name="smart_scan"
label="Autofocus range (steps)" property-name="autofocus_dz"
/> label="Autofocus range (steps)"
</div> />
<div class="uk-margin"> </div>
<propertyControl <div class="uk-margin">
thing-name="smart_scan" <propertyControl
property-name="overlap" thing-name="smart_scan"
label="Image overlap (0-1)" property-name="overlap"
/> label="Image overlap (0-1)"
</div> />
</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>
</div> </div>
</li> </li>
@ -40,7 +52,6 @@
:submit-url="smartScanUri" :submit-url="smartScanUri"
submit-label="Start smart scan" submit-label="Start smart scan"
:can-terminate="true" :can-terminate="true"
:submit-data="{ sample_check: true }"
@taskStarted="startScanning" @taskStarted="startScanning"
@update:taskStatus="taskStatus = $event" @update:taskStatus="taskStatus = $event"
@update:progress="progress = $event" @update:progress="progress = $event"

View file

@ -63,11 +63,9 @@ Vue.mixin({
"writeproperty", "writeproperty",
false 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) { thingActionUrl(thing, action) {
let url = this.$store.getters["wot/thingActionUrl"]( let url = this.$store.getters["wot/thingActionUrl"](