Merge branch 'cal-wiz-popups' into 'v3'

Add calibration log to CSM pane of cal wizard

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

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/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue

@@ -5,10 +5,19 @@
     </p>
     <p>If it is not in focus, click back and re-focus.</p>
     <template #below-stream>
+      <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
       <div class="action-button-container">
-        <CSMCalibrationSettings
+        <action-button
-          :show-extra-settings="false"
+          :button-primary="true"
-          @recalibrate-response="checkCalibrationState"
+          :can-terminate="true"
+          thing="camera_stage_mapping"
+          action="calibrate_xy"
+          :submit-label="'Auto-Calibrate Using Camera'"
+          @error="modalError"
+          @update:task-status="taskStatus = $event"
+          @update:log="log = $event"
+          @task-started="$emit('prevent-navigation', true)"
+          @finished="$emit('prevent-navigation', false)"
         />
       </div>
     </template>
@@ -16,18 +25,27 @@
 </template>
 
 <script>
+import actionButton from "@/components/labThingsComponents/actionButton.vue";
+import actionLogDisplay from "@/components/labThingsComponents/actionLogDisplay.vue";
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
-import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 
 export default {
   name: "CSMMainCalibrationStep",
 
   components: {
+    actionButton,
+    actionLogDisplay,
     stepTemplateWithStream,
-    CSMCalibrationSettings,
   },
 
-  emits: ["awaiting-user"],
+  emits: ["prevent-navigation", "awaiting-user"],
+
+  data: function () {
+    return {
+      log: [],
+      taskStatus: "",
+    };
+  },
 
   mounted() {
     this.checkCalibrationState();

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="CSMCalibrationSettings" ref="CSMCalibrationSettingsContainer" class="uk-width-large">
     <!--Show auto calibrate if default plugin is enabled-->
-    <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
+    <div class="uk-margin-small">
       <action-button
         :button-primary="true"
         :can-terminate="true"
@@ -17,7 +17,6 @@
       />
     </div>
     <button
-      v-if="'last_calibration' in properties"
       v-show="showExtraSettings"
       type="button"
       class="uk-button uk-button-default uk-width-1-1"
@@ -88,15 +87,6 @@ export default {
     };
   },
 
-  computed: {
-    actions() {
-      return this.thingDescription("camera_stage_mapping").actions;
-    },
-    properties() {
-      return this.thingDescription("camera_stage_mapping").properties;
-    },
-  },
-
   mounted() {
     useIntersectionObserver(
       this.$refs.CSMCalibrationSettingsContainer,

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 {