Add Vue component for changing the stage type via API

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/stageSettings.vue

@@ -0,0 +1,78 @@
+<template>
+    <div id="stageSettings">
+        <div>
+            <h3>Stage settings</h3>
+            <p>
+                <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>
+                    </div>
+                    <div v-else class="uk-text-danger"><b>No stage connected</b></div>
+                </label>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default {
+    name: "StageSettings",
+
+    data: function(){
+        return {
+            stageType: "MissingStage",
+        }
+    },
+    
+    computed: {
+        stageTypeUri: function() {
+        return `${this.$store.getters.baseUri}/api/v2/actions/stage/type`;
+        },
+    },
+
+    mounted(){
+        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;
+                })
+                .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);
+                });
+        }
+    }
+}
+</script>
+
+<style lang="less"></style>

openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue

@@ -44,6 +44,19 @@
             Camera
           </tabIcon>
         </li>
+        <li>
+          <tabIcon
+            id="settings-stage-icon"
+            tab-i-d="stage"
+            :show-title="false"
+            :show-tooltip="false"
+            :require-connection="true"
+            :current-tab="currentTab"
+            @set-tab="setTab"
+          >
+            Stage
+          </tabIcon>
+        </li>
         <li>
           <tabIcon
             id="settings-mapping-icon"
@@ -104,6 +117,16 @@
         </div>
       </tabContent>
 
+      <tabContent
+        tab-i-d="stage"
+        :require-connection="true"
+        :current-tab="currentTab"
+      >
+        <div class="settings-pane uk-padding-small">
+          <stageSettings />
+        </div>
+      </tabContent>
+
       <tabContent
         tab-i-d="mapping"
         :require-connection="true"
@@ -141,7 +164,7 @@ import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
 import featuresSettings from "./settingsComponents/featuresSettings.vue";
 import cameraStageMappingSettings from "./settingsComponents/cameraStageMappingSettings.vue";
-
+import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
 import tabIcon from "../genericComponents/tabIcon";
 import tabContent from "../genericComponents/tabContent";
@@ -153,6 +176,7 @@ export default {
   components: {
     streamSettings,
     cameraSettings,
+    stageSettings,
     microscopeSettings,
     cameraStageMappingSettings,
     appSettings,