From e886e9db28cd7c194695056ab6ea7363b0643761 Mon Sep 17 00:00:00 2001
From: samuelmcdermott <sjm263@cam.ac.uk>
Date: Mon, 12 Oct 2020 16:56:58 +0100
Subject: [PATCH] change vue to use a task submitter for setting stage

---
 .../settingsComponents/stageSettings.vue      | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue b/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue
index 9923e353..4556a316 100644
--- a/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue
+++ b/openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue
@@ -6,10 +6,24 @@
                 <label>
                     Stage Type
                     <div v-if="this.stageType != 'MissingStage'">
-                        <select v-model="stageType" class="uk-select">
-                            <option value="SangaStage">SangaStage (Standard)</option>
-                            <option value= "SangaDeltaStage"> SangaStage (Delta)</option>
-                        </select>
+                        <form>
+                            <div>
+                                <select v-model="stageType" class="uk-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 v-else class="uk-text-danger"><b>No stage connected</b></div>
                 </label>
@@ -21,10 +35,15 @@
 <script>
 
 import axios from "axios";
+import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 export default {
     name: "StageSettings",
 
+    components:{
+        taskSubmitter
+    },
+
     data: function(){
         return {
             stageType: "MissingStage",
@@ -41,35 +60,27 @@ export default {
         this.getStageType();
     },
 
-    watch:{
-        stageType: function(){
-            this.setStageType();
-        }
-    },
-
     methods: {
         getStageType: function(){
             console.log("Getting stage type")
             axios
                 .get(this.stageTypeUri)
                 .then(response => {
-                    console.log("Stage type is " + response.data)
-                    this.stageType = response.data;
+                    console.log("Stage type is " + response.data.stage_type)
+                    this.stageType = response.data.stage_type;
                 })
                 .catch(error => {
                     this.modalError(error);
                 });
         },
-        setStageType: function(){
-            console.log("Changing stage type")
-            axios
-                .post(this.stageTypeUri,{"stage_type" : this.stageType})
-                .then(response => {
-                    console.log("Stage type changed")
-                })
-                .catch(error => {
-                    this.modalError(error);
-                });
+        onStageTypeResponse: function(response) {
+            this.modalNotify("Stage type changed.");
+            console.log("Stage type changed to " + response.output.stage_type)
+            this.stageType = response.output.stage_type
+        },
+
+        onStageTypeError: function(error) {
+        this.modalError(error); // Let mixin handle error
         }
     }
 }