Prevent calibration navigation during actions

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

@@ -12,6 +12,7 @@
     :modal-progress="actionData.modal_progress"
     :stream-with-modal="actionData.stream_with_modal"
     :is-broken="actionData.broken"
+    @task-started="actionStarted"
     @response="actionResponse"
     @error="modalError"
     @finished="actionFinished"
@@ -36,7 +37,7 @@ export default {
     },
   },
 
-  emits: ["response", "finished", "requestUpdate"],
+  emits: ["started", "response", "finished", "requestUpdate"],
 
   methods: {
     /**
@@ -58,6 +59,14 @@ export default {
         this.$emit("response", response);
       }
     },
+    /**
+     * Runs when the ActionButton's action starts
+     *
+     * This forwards the event to the parent
+     */
+    actionStarted: function () {
+      this.$emit("started");
+    },
     /**
      * Runs when the ActionButton's action finishes in any way (error, cancel,
      * completion).

webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue

@@ -28,17 +28,24 @@ gets very confusing.
       v-if="currentStep"
       :key="stepIndex"
       @awaiting-user="handleAwaitingUser"
+      @prevent-navigation="handlePreventNavigation"
     />
     <p class="uk-text-right">
       <button
         v-if="showBackButton"
         class="uk-button uk-button-default"
+        :class="{ 'uk-button-disabled': preventNavigation, 'disabled-cursor': preventNavigation }"
         type="button"
         @click="previousStep"
       >
         Back
       </button>
-      <button class="uk-button uk-button-primary uk-margin-left" type="button" @click="nextStep">
+      <button
+        class="uk-button uk-button-primary uk-margin-left"
+        :class="{ 'uk-button-disabled': preventNavigation, 'disabled-cursor': preventNavigation }"
+        type="button"
+        @click="nextStep"
+      >
         {{ nextButtonText }}
       </button>
     </p>
@@ -72,6 +79,7 @@ export default {
     return {
       stepIndex: this.startOnLast ? this.steps.length - 1 : 0,
       stepAwaitingUser: false,
+      preventNavigation: false,
     };
   },
 
@@ -96,6 +104,7 @@ export default {
      * Move to the previous step in this task, or the previous task if first step.
      */
     previousStep: function () {
+      if (this.preventNavigation) return;
       this.stepAwaitingUser = false;
       if (this.stepIndex > 0) {
         this.stepIndex = this.stepIndex - 1;
@@ -108,6 +117,7 @@ export default {
      * Move to the next step in this task, or the next task if final step.
      */
     nextStep: function () {
+      if (this.preventNavigation) return;
       this.stepAwaitingUser = false;
       if (this.stepIndex < this.steps.length - 1) {
         this.stepIndex = this.stepIndex + 1;
@@ -119,6 +129,14 @@ export default {
     handleAwaitingUser(isAwaiting) {
       this.stepAwaitingUser = isAwaiting;
     },
+    handlePreventNavigation(blocked) {
+      this.preventNavigation = blocked;
+    },
   },
 };
 </script>
+<style lang="less" scoped>
+.disabled-cursor {
+  cursor: not-allowed !important ;
+}
+</style>

webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue

@@ -12,7 +12,8 @@
         <cameraCalibrationSettings
           :show-extra-settings="false"
           :camera-uri="cameraUri"
-          @action-finished="checkCalibrationState"
+          @action-started="onActionStart"
+          @action-finished="onActionComplete"
         />
       </div>
     </template>
@@ -33,7 +34,7 @@ export default {
     cameraCalibrationSettings,
   },
 
-  emits: ["awaiting-user"],
+  emits: ["prevent-navigation", "awaiting-user"],
 
   computed: {
     ...mapState(useSettingsStore, ["baseUri"]),
@@ -47,6 +48,13 @@ export default {
   },
 
   methods: {
+    onActionStart() {
+      this.$emit("prevent-navigation", true);
+    },
+    async onActionComplete() {
+      await this.checkCalibrationState();
+      this.$emit("prevent-navigation", false);
+    },
     async checkCalibrationState() {
       const needsCal = await this.readThingProperty("camera", "calibration_required");
       this.$emit("awaiting-user", needsCal);

webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -6,7 +6,11 @@
       :key="'primary_cal' + index"
       class="uk-child-width-expand"
     >
-      <server-specified-action-button :action-data="action" @finished="$emit('actionFinished')" />
+      <server-specified-action-button
+        :action-data="action"
+        @started="$emit('actionStarted')"
+        @finished="$emit('actionFinished')"
+      />
     </div>
     <div v-if="showExtraSettings">
       <div
@@ -14,7 +18,11 @@
         :key="'secondary_cal' + index"
         class="uk-child-width-expand"
       >
-        <server-specified-action-button :action-data="action" @finished="$emit('actionFinished')" />
+        <server-specified-action-button
+          :action-data="action"
+          @started="$emit('actionStarted')"
+          @finished="$emit('actionFinished')"
+        />
       </div>
     </div>
   </div>
@@ -43,7 +51,7 @@ export default {
     },
   },
 
-  emits: ["actionFinished"],
+  emits: ["actionStarted", "actionFinished"],
 
   data() {
     return {