This commit is contained in:
Richard Bowman 2023-11-02 20:30:54 +00:00
parent 79752a2a4c
commit c5c02eb029
9 changed files with 235 additions and 227 deletions

View file

@ -4,10 +4,10 @@
<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"
v-model="value[key]"
:key="key"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
@ -18,87 +18,89 @@
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MultiNumericSettingLine",
name: "MultiNumericSettingLine",
props: {
props: {
label: {
type: String,
required: true
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
},
},
type: Number,
default: undefined,
required: false
}
},
data: () => {
data: () => {
return {
value: {},
valueOnEnter: undefined
}
},
value: {},
valueOnEnter: undefined
};
},
computed: {
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
return this.readBackDelay !== undefined;
}
},
},
mounted() {
mounted() {
this.readProperty();
},
},
methods: {
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl)
this.value = response.data
console.log("Read property", this.propertyUrl, response.data)
return response.data
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = Number(this.value)
await axios.post(this.propertyUrl, requestedValue)
if(this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay))
let newVal = await this.readProperty()
if(newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
} else {
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch(error) {
this.modalError(error); // Let mixin handle error
try {
let requestedValue = Number(this.value);
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
}
};
</script>
@ -109,7 +111,7 @@ methods: {
}
.numeric-setting-line-input {
display: table-cell;
width:100%;
width: 100%;
}
.button-next-to-input {
display: table-cell;

View file

@ -4,10 +4,10 @@
<div class="input-and-buttons-container">
<input
v-for="i in value.length"
:key="i"
v-model="value[i - 1]"
class="uk-form-small numeric-setting-line-input"
type="number"
v-model="value[i - 1]"
:key="i"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
@ -18,87 +18,89 @@
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "NumericArraySettingLine",
name: "NumericArraySettingLine",
props: {
props: {
label: {
type: String,
required: true
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
},
},
type: Number,
default: undefined,
required: false
}
},
data: () => {
data: () => {
return {
value: {},
valueOnEnter: undefined
}
},
value: {},
valueOnEnter: undefined
};
},
computed: {
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
return this.readBackDelay !== undefined;
}
},
},
mounted() {
mounted() {
this.readProperty();
},
},
methods: {
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl)
this.value = response.data
console.log("Read property", this.propertyUrl, response.data)
return response.data
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = this.value
await axios.post(this.propertyUrl, requestedValue)
if(this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay))
let newVal = await this.readProperty()
if(newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
} else {
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch(error) {
this.modalError(error); // Let mixin handle error
try {
let requestedValue = this.value;
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
}
};
</script>
@ -112,10 +114,10 @@ methods: {
width: 100%;
}
.numeric-setting-line-input {
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
}
.button-next-to-input {
flex-grow: 0;

View file

@ -3,9 +3,9 @@
<label class="uk-form-label">{{ label }}</label>
<div class="input-and-buttons-container">
<input
v-model="value"
class="uk-form-small numeric-setting-line-input"
type="number"
v-model="value"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
@ -16,87 +16,89 @@
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "NumericSettingLine",
name: "NumericSettingLine",
props: {
props: {
label: {
type: String,
required: true
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
type: Number,
default: undefined,
required: false
}
},
},
data: () => {
data: () => {
return {
value: undefined,
valueOnEnter: undefined
}
},
value: undefined,
valueOnEnter: undefined
};
},
computed: {
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
return this.readBackDelay !== undefined;
}
},
},
mounted() {
mounted() {
this.readProperty();
},
},
methods: {
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl)
this.value = response.data
console.log("Read property", this.propertyUrl, response.data)
return response.data
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = Number(this.value)
await axios.post(this.propertyUrl, requestedValue)
if(this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay))
let newVal = await this.readProperty()
if(newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`)
} else {
await this.modalNotify(`Set ${this.label} to ${newVal} (requested ${requestedValue}).`)
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch(error) {
this.modalError(error); // Let mixin handle error
try {
let requestedValue = Number(this.value);
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
}
};
</script>
@ -110,10 +112,10 @@ methods: {
width: 100%;
}
.numeric-setting-line-input {
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
}
.button-next-to-input {
flex-grow: 0;

View file

@ -142,7 +142,10 @@ export default {
if (task.status == "pending" || task.status == "running") {
this.taskStarted = true;
this.$emit("taskStarted", this.taskId);
this.startPolling(task.id, task.links.find(t => t.rel==self).href);
this.startPolling(
task.id,
task.links.find(t => t.rel == self).href
);
}
}
});
@ -219,33 +222,32 @@ export default {
var checkCondition = (resolve, reject) => {
// If the condition is met, we're done!
axios.get(
this.taskUrl,
{baseURL: this.$store.getters.baseUri}
).then(response => {
var result = response.data.status;
// If the task ends with success
if (result == "completed") {
resolve(response.data);
}
// If task ends with an error
else if (result == "error") {
// Pass the error string back with reject
axios
.get(this.taskUrl, { baseURL: this.$store.getters.baseUri })
.then(response => {
var result = response.data.status;
// If the task ends with success
if (result == "completed") {
resolve(response.data);
}
// If task ends with an error
else if (result == "error") {
// Pass the error string back with reject
reject(new Error(response.data.output));
}
// If task ends with termination
else if (result == "cancelled") {
// Pass a generic termination error back with reject
reject(new Error(response.data.output));
}
// If task ends with termination
else if (result == "cancelled") {
// Pass a generic termination error back with reject
reject(new Error("Task cancelled"));
} else {
// Since the task is still running, we can update the progress bar
this.progress = response.data.progress;
// Check again after timeout
setTimeout(checkCondition, interval, resolve, reject);
}
});
reject(new Error("Task cancelled"));
} else {
// Since the task is still running, we can update the progress bar
this.progress = response.data.progress;
// Check again after timeout
setTimeout(checkCondition, interval, resolve, reject);
}
});
};
return new Promise(checkCondition);