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