Merge branch 'calibration_modal_button' into 'v3'

Button added to launch calibration menu manually

Closes #532

See merge request openflexure/openflexure-microscope-server!360

webapp/src/components/modalComponents/calibrationModal.vue

@@ -121,7 +121,7 @@
           v-show="stepValue == 3"
           class="uk-button uk-button-default"
           type="button"
-          @click="stepValue = 0"
+          @click="restart()"
         >
           Restart
         </button>
@@ -223,6 +223,23 @@ export default {
         this.onHide();
       }
     },
+    // Forces modal to show on button press
+    force_show: function() {
+      this.ready = true;
+      this.stepValue = 1;
+      this.force = true
+        // Show the modal
+        var el = this.$refs["calibrationModalEl"];
+        this.showModalElement(el); // Calls the mixin
+    },
+
+    restart: function() {
+      if (this.force == true){
+        this.stepValue = 1
+      } else {
+        this.stepValue = 0
+      }
+    },
 
     hide: function() {
       // Show the modal

webapp/src/components/tabContentComponents/settingsContent.vue

@@ -1,6 +1,10 @@
 <template>
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <calibrationModal
+      ref="calibrationModal"
+      @onClose="enterApp()"
+    ></calibrationModal>
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application Settings</li>
@@ -18,6 +22,12 @@
           </tabIcon>
         </li>
         <li class="uk-nav-header">Microscope Settings</li>
+        <button
+        submit-label="Launch Calibration Wizard"
+        type="button"
+        class="uk-button uk-button-default uk-width-1-1"
+        @click="startModals"
+        >Launch Calibration Wizard</button>
         <li>
           <tabIcon
             id="settings-camera-icon"
@@ -106,6 +116,7 @@
 
 <script>
 import streamSettings from "./settingsComponents/streamSettings.vue";
+import calibrationModal from "../modalComponents/calibrationModal.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
@@ -125,7 +136,8 @@ export default {
     CSMSettings,
     appSettings,
     tabIcon,
-    tabContent
+    tabContent,
+    calibrationModal
   },
 
   data: function() {
@@ -140,6 +152,9 @@ export default {
       if (!(this.currentTab == tab)) {
         this.currentTab = tab;
       }
+    },
+    startModals: function() {
+      this.$refs.calibrationModal.force_show();
     }
   }
 };