Prevent calibration navigation during actions

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);