Commit b25e7b75 authored by Samuel McDermott's avatar Samuel McDermott
Browse files

Add Vue component for changing the stage type via API

parent 81ca2c9c

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

0 → 100644
+78 −0
Original line number Diff line number Diff line 
<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

+25 −1
Original line number Diff line number Diff line
@@ -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,