Add way to poll invoked action

webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

@@ -25,11 +25,7 @@
               :submit-label="'Move'"
               :can-terminate="true"
               :poll-interval="0.05"
-              @taskStarted="moveLock = true"
+              @finished="moveComplete"
-              @finished="
-                updatePosition();
-                moveLock = false;
-              "
               @error="modalError"
             />
           </p>
@@ -48,7 +44,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 
@@ -68,14 +63,8 @@ export default {
   },
 
   computed: {
-    baseUri: function () {
-      return this.$store.getters.baseUri;
-    },
     positionStatusUri: function () {
-      return `${this.baseUri}/stage/position`;
+      return this.thingActionUrl("stage", "position");
-    },
-    moveInImageCoordinatesUri: function () {
-      return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
     },
   },
 
@@ -132,35 +121,32 @@ export default {
       await this.startMoveTask();
     },
     async startMoveTask() {
+      this.moveLock = true;
       await this.$refs.moveButton.startTask();
     },
-    moveInImageCoordinatesRequest: function (x, y) {
+    moveComplete() {
+      this.updatePosition();
+      this.moveLock = false;
+    },
+    async moveInImageCoordinatesRequest(x, y) {
       // If not movement-locked
       if (!this.moveLock) {
         // Lock move requests
         this.moveLock = true;
-
+        const response = await this.invokeAction(
-        if (!this.moveInImageCoordinatesUri) {
+          "camera_stage_mapping",
-          this.modalError(
+          "move_in_image_coordinates",
-            "Moving in image coordinates is not supported - you will need to upgrade your microscope's software.",
+          {
-          );
+            x: x,
-        }
-
-        // Send move request
-        axios
-          .post(this.moveInImageCoordinatesUri, {
-            x: x, // NB the coordinates are numpy/PIL style, meaning X and Y are swapped.
             y: y,
-          })
+          },
-          .then(() => {
+        );
-            this.updatePosition(); // Update the position in text boxes
+        this.pollUntilComplete(
-          })
+          response.data.href,
-          .catch((error) => {
+          null, // Nothing to do while ongoing
-            this.modalError(error); // Let mixin handle error
+          this.moveComplete, // Call move complete once done.
-          })
+          200,
-          .then(() => {
+        );
-            this.moveLock = false; // Release the move lock
-          });
       }
     },
 

webapp/src/mixins/labThingsMixins.js

@@ -9,6 +9,12 @@
 import axios from "axios";
 
 export default {
+  data() {
+    return {
+      pollTimers: {},
+    };
+  },
+
   methods: {
     thingDescription(thing) {
       return this.$store.getters["wot/thingDescription"](thing);
@@ -68,6 +74,28 @@ export default {
         return undefined;
       }
     },
+    async pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval = 500) {
+      try {
+        const response = await axios.get(taskUrl, { baseURL: this.$store.getters.baseUri });
+        const result = response.data.status;
+
+        if ((result == "running") | (result == "pending")) {
+          ongoingMethod?.(response);
+          this.pollTimers[taskUrl] = setTimeout(() => {
+            this.pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval);
+          }, interval);
+        } else {
+          clearTimeout(this.pollTimers[taskUrl]);
+          delete this.pollTimers[taskUrl];
+          finalMethod?.(response);
+        }
+      } catch (error) {
+        clearTimeout(this.pollTimers[taskUrl]);
+        delete this.pollTimers[taskUrl];
+        this.modalError(error);
+      }
+    },
+
     thingActionUrl(thing, action, allowUndefined = false) {
       let url = this.$store.getters["wot/thingActionUrl"](
         thing,