rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change vue to use a task submitter for setting stage

Browse source
This commit is contained in:
samuelmcdermott 2020-10-12 16:56:58 +01:00
parent f30679d4db
commit e886e9db28
1 changed files with 33 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

55
openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue
View file

@ -6,10 +6,24 @@
<label> <label>
Stage Type Stage Type
<div v-if="this.stageType != 'MissingStage'"> <div v-if="this.stageType != 'MissingStage'">
<select v-model="stageType" class="uk-select"> <form>
<option value="SangaStage">SangaStage (Standard)</option> <div>
<option value= "SangaDeltaStage"> SangaStage (Delta)</option> <select v-model="stageType" class="uk-select">
</select> <option value="SangaStage">SangaStage (Standard)</option>
<option value= "SangaDeltaStage"> SangaStage (Delta)</option>
</select>
</div>
<div>
<taskSubmitter
:can-terminate="false"
:submit-url= "this.stageTypeUri"
:submit-data="{'stage_type' : this.stageType}"
:submit-label="'Change stage type'"
@response="onStageTypeResponse"
@error="onStageTypeError"
>
</div>
</form>
</div> </div>
<div v-else class="uk-text-danger"><b>No stage connected</b></div> <div v-else class="uk-text-danger"><b>No stage connected</b></div>
</label> </label>
@ -21,10 +35,15 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import taskSubmitter from "../../genericComponents/taskSubmitter";
export default { export default {
name: "StageSettings", name: "StageSettings",
components:{
taskSubmitter
},
data: function(){ data: function(){
return { return {
stageType: "MissingStage", stageType: "MissingStage",
@ -41,35 +60,27 @@ export default {
this.getStageType(); this.getStageType();
}, },
watch:{
stageType: function(){
this.setStageType();
}
},
methods: { methods: {
getStageType: function(){ getStageType: function(){
console.log("Getting stage type") console.log("Getting stage type")
axios axios
.get(this.stageTypeUri) .get(this.stageTypeUri)
.then(response => { .then(response => {
console.log("Stage type is " + response.data) console.log("Stage type is " + response.data.stage_type)
this.stageType = response.data; this.stageType = response.data.stage_type;
}) })
.catch(error => { .catch(error => {
this.modalError(error); this.modalError(error);
}); });
}, },
setStageType: function(){ onStageTypeResponse: function(response) {
console.log("Changing stage type") this.modalNotify("Stage type changed.");
axios console.log("Stage type changed to " + response.output.stage_type)
.post(this.stageTypeUri,{"stage_type" : this.stageType}) this.stageType = response.output.stage_type
.then(response => { },
console.log("Stage type changed")
}) onStageTypeError: function(error) {
.catch(error => { this.modalError(error); // Let mixin handle error
this.modalError(error);
});
} }
} }
} }