Moved camera calibration to new-style task

src/components/controlComponents/settingsComponents/cameraSettings.vue

@@ -26,13 +26,15 @@
     
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="this.$store.state.apiState.plugin.includes('default_camera_calibration')">
-      <div v-if="isCalibrating">
+      <taskSubmitter
-        <progressBar/>
+        v-bind:canTerminate="false"
-      </div>
+        v-bind:requiresConfirmation="true"
-
+        v-bind:confirmationMessage="'Start recalibration? This may take a while, and the microscope will be locked during this time.'"
-      <div v-bind:hidden="isCalibrating">
+        v-bind:submitURL="recalibrateApiUri"
-        <button type="button" v-on:click="recalibrateConfirm()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Auto-Calibrate</button>
+        v-bind:submitLabel="'Auto-Calibrate (Task)'"
-      </div>
+        v-on:response="onRecalibrateResponse"
+        v-on:error="onRecalibrateError">
+      </taskSubmitter>
     </div>
 
   </form>
@@ -43,14 +45,14 @@
 
 <script>
 import axios from 'axios'
-import progressBar from "../../genericComponents/progressBar"
+import taskSubmitter from "../../genericComponents/taskSubmitter"
 
 // Export main app
 export default {
   name: 'microscopeSettings',
 
   components: {
-    progressBar
+    taskSubmitter
   },
 
   data: function () {
@@ -95,37 +97,14 @@ export default {
           this.modalError(error) // Let mixin handle error
         })
     },
-    recalibrateConfirm: function() {
+
-      var context = this
+    onRecalibrateResponse: function() {
-      this.modalConfirm('Start recalibration? This may take a while, and the microscope will be locked during this time.')
+      this.modalNotify("Finished recalibration.")
-        .then(function() {
+      return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
-          context.recalibrateRequest()
-        }, function () {
-          console.log('Rejected recalibration.')
-        })
     },
-    recalibrateRequest: function() {
+
-      // Send move request
+    onRecalibrateError: function(error) {
-      axios.post(this.recalibrateApiUri)
+      this.modalError(error) // Let mixin handle error
-        .then(response => { 
-          console.log("Task ID: " + response.data.id)
-          this.isCalibrating = true
-          return this.$store.dispatch('pollTask', [response.data.id, null, null])
-        })
-        .then(() => {
-          this.modalNotify("Finished recalibration.")
-          return new Promise(r => setTimeout(r, 500)) // wait 500ms before updating config, so it's fresh
-        })
-        .then(() => {
-          return this.$store.dispatch('updateConfig');
-        })
-        .then(this.updateInputValues)
-        .catch(error => {
-          this.modalError(error) // Let mixin handle error
-        })
-        .finally(() => {
-          this.isCalibrating = false
-        })
     }
 
   },

src/components/genericComponents/taskSubmitter.vue

@@ -7,10 +7,10 @@
       <div v-else class="indeterminate"></div>
     </div>
 
-    <button type="button" v-on:click="terminateTask()" class="uk-button uk-button-danger uk-form-small uk-margin uk-float-right uk-width-1-1">Terminate</button>
+    <button v-if="canTerminate" type="button" v-on:click="terminateTask()" class="uk-button uk-button-danger uk-form-small uk-margin uk-float-right uk-width-1-1">Terminate</button>
   </div>
 
-  <button type="button" v-on:click="startTask()" v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-margin uk-float-right uk-width-1-1">{{ submitLabel }}</button>
+  <button type="button" v-on:click="bootstrapTask()" v-bind:hidden="taskRunning" class="uk-button uk-button-primary uk-form-small uk-margin uk-float-right uk-width-1-1">{{ submitLabel }}</button>
 
 </div>
 </template>
@@ -29,7 +29,7 @@ export default {
     submitData: {
       type: Object,
       required: false,
-      default: {}
+      default: () => ({})
     },
     pollInterval: {
       type: Number,
@@ -46,6 +46,21 @@ export default {
       required: false,
       default: "Submit"
     },
+    canTerminate: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    requiresConfirmation: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    confirmationMessage: {
+      type: String,
+      required: false,
+      default: "Start task?"
+    }
   },
 
   data: function () {
@@ -64,6 +79,18 @@ export default {
   },
 
   methods: {
+    bootstrapTask: function() {
+      if (this.requiresConfirmation) {
+        this.modalConfirm(this.confirmationMessage)
+          .then(() => {
+            this.startTask()
+          }, () => {})
+      }
+      else {
+        this.startTask()
+      }
+    },
+
     startTask: function() {
       console.log("Task start clicked")
       this.$emit('submit', this.submitData)
@@ -86,7 +113,7 @@ export default {
       })
       .catch(error => {
         if (!error) {
-          error =  "Unknown error"
+          error =  Error("Unknown error")
         }
         console.log("Emitting onError: ", error)
         this.$emit('error', error)