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
parent
3de7aa2fb2
commit
f26230efb6
3 changed files with 109 additions and 68 deletions
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"](
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue