Made microscope settings component stateless

This commit is contained in:
Joel Collins 2019-11-20 16:57:53 +00:00
parent a202495692
commit e81de50189

View file

@ -1,5 +1,5 @@
<template> <template>
<div id="microscopeSettings"> <div v-if="settings" id="microscopeSettings">
<form @submit.prevent="applyConfigRequest"> <form @submit.prevent="applyConfigRequest">
<h4>Stage</h4> <h4>Stage</h4>
@ -11,7 +11,7 @@
<label class="uk-form-label" for="form-stacked-text">x</label> <label class="uk-form-label" for="form-stacked-text">x</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input <input
v-model="stageBacklash.x" v-model="settings.stage_settings.backlash.x"
class="uk-input uk-form-small" class="uk-input uk-form-small"
type="number" type="number"
/> />
@ -22,7 +22,7 @@
<label class="uk-form-label" for="form-stacked-text">y</label> <label class="uk-form-label" for="form-stacked-text">y</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input <input
v-model="stageBacklash.y" v-model="settings.stage_settings.backlash.y"
class="uk-input uk-form-small" class="uk-input uk-form-small"
type="number" type="number"
/> />
@ -33,7 +33,7 @@
<label class="uk-form-label" for="form-stacked-text">z</label> <label class="uk-form-label" for="form-stacked-text">z</label>
<div class="uk-form-controls"> <div class="uk-form-controls">
<input <input
v-model="stageBacklash.z" v-model="settings.stage_settings.backlash.z"
class="uk-input uk-form-small" class="uk-input uk-form-small"
type="number" type="number"
/> />
@ -48,7 +48,7 @@
>Microscope name</label >Microscope name</label
> >
<input <input
v-model="microscopeName" v-model="settings.name"
class="uk-input uk-width-1-1 uk-form-small" class="uk-input uk-width-1-1 uk-form-small"
name="inputFilename" name="inputFilename"
placeholder="Leave blank for default" placeholder="Leave blank for default"
@ -74,47 +74,49 @@ export default {
data: function() { data: function() {
return { return {
microscopeName: this.$store.state.apiConfig.name, settings: null
stageBacklash: this.$store.state.apiConfig.stage_settings.backlash
}; };
}, },
computed: { computed: {
configApiUri: function() { settingsUri: function() {
return this.$store.getters.uri + "/config"; return `http://${this.$store.state.host}:${
this.$store.state.port
}/api/v2/settings`;
} }
}, },
mounted() {
this.updateSettings();
},
methods: { methods: {
updateInputValues: function() { updateSettings: function() {
this.microscopeName = this.$store.state.apiConfig.name; axios
this.stageBacklash = this.$store.state.apiConfig.stage_settings.backlash; .get(this.settingsUri)
.then(response => {
this.settings = response.data;
})
.catch(error => {
this.modalError(error); // Let mixin handle error
});
}, },
applyConfigRequest: function() { applyConfigRequest: function() {
var payload = { var payload = {
stage_settings: {} name: this.settings.name,
stage_settings: {
backlash: this.settings.stage_settings.backlash
}
}; };
if (this.microscopeName != this.$store.state.apiConfig.name) {
payload.name = this.microscopeName;
}
if (
this.stageBacklash !=
this.$store.state.apiConfig.stage_settings.backlash
) {
payload.stage_settings.backlash = this.stageBacklash;
}
console.log(payload); console.log(payload);
// Send request to update config // Send request to update config
axios axios
.post(this.configApiUri, payload) .put(this.settingsUri, payload)
.then(() => { .then(() => {
this.$store.dispatch("updateConfig"); this.updateSettings();
this.updateInputValues;
this.modalNotify("Microscope config applied."); this.modalNotify("Microscope config applied.");
}) })
.catch(error => { .catch(error => {