From 36510134407e8e3349e0a13648b48e958f9f8676 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Sun, 27 Jul 2025 15:39:38 +0100
Subject: [PATCH] Generalise server specified action buttons.

---
 .../things/camera/picamera.py                 |  2 +
 src/openflexure_microscope_server/ui.py       | 14 ++++
 .../serverSpecifiedActionButton.vue           | 46 +++++++++++++
 .../cameraCalibrationSettings.vue             | 65 +++++++------------
 4 files changed, 86 insertions(+), 41 deletions(-)
 create mode 100644 webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

diff --git a/src/openflexure_microscope_server/things/camera/picamera.py b/src/openflexure_microscope_server/things/camera/picamera.py
index 70d93799..349ad4bd 100644
--- a/src/openflexure_microscope_server/things/camera/picamera.py
+++ b/src/openflexure_microscope_server/things/camera/picamera.py
@@ -791,6 +791,8 @@ class StreamingPiCamera2(BaseCamera):
                     "Start recalibration? This may take a while, and the microscope "
                     "will be locked during this time."
                 ),
+                notify_on_success=True,
+                success_message="Finished recalibration.",
             ),
             action_button_for(
                 self.auto_expose_from_minimum,
diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index 9b3163a8..7fad40d3 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -23,19 +23,33 @@ class ActionButton(BaseModel):
 
     thing: str
     """The Thing "path" for the Thing instance."""
+
     action: str
     """The name of the action to be triggered."""
+
     poll_interval: int = 1
     """The interval for polling in seconds."""
+
     submit_label: str = "Submit"
     """The label for the action button."""
+
     can_terminate: bool = True
     """Specify whether the action can be terminated."""
+
     requires_confirmation: bool = False
     """Specify whether a confirmation modal is needed."""
+
     confirmation_message: str = "Start task?"
     """The message for the confirmation modal."""
+
     button_primary: bool = True
     """Specify whether the button is styled as a primary button."""
+
     modal_progress: bool = False
     """Specify whether to show a progress modal."""
+
+    notify_on_success: bool = False
+    """Specify whether to a notification on successful completion."""
+
+    success_message: str = "Success!"
+    """The message to show on successful completion."""
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
new file mode 100644
index 00000000..86e1b76b
--- /dev/null
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
@@ -0,0 +1,46 @@
+<template>
+  <action-button
+    :thing="actionData.thing"
+    :action="actionData.action"
+    :poll-interval="actionData.poll_interval"
+    :submit-label="actionData.submit_label"
+    :can-terminate="actionData.can_terminate"
+    :requires-confirmation="actionData.requires_confirmation"
+    :confirmation-message="actionData.confirmation_message"
+    :button-primary="actionData.button_primary"
+    :modal-progress="actionData.modal_progress"
+    @response="actionResponse"
+    @error="modalError"
+  />
+</template>
+
+<script>
+import ActionButton from "./actionButton.vue";
+
+// Export main app
+export default {
+  name: "ServerSpecifiedActionButton",
+
+  components: {
+    ActionButton
+  },
+
+
+  props: {
+    actionData: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  methods: {
+    actionResponse: function() {
+      if (this.actionData.notify_on_success) {
+        this.modalNotify(this.actionData.success_message);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less"></style>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index d449d024..2c15d2a9 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -1,58 +1,34 @@
 <template>
   <div>
-    <!--Show auto calibrate if default plugin is enabled-->
-    
-    <div 
+    <!--Show calibration actions as specified by the camera.-->
+    <div
       v-for="(action, index) in secondaryCalibrationActions"
+      :key="'primary_cal' + index"
       class="uk-child-width-expand"
-      :key = "'primary_cal' + index"
     >
-      <action-button
-        :can-terminate="action.can_terminate"
-        :requires-confirmation="action.requires_confirmation"
-        :thing="action.thing"
-        :action="action.action"
-        :submit-label="action.submit_label"
-        @response="onRecalibrateResponse"
-        @error="modalError"
-      />
+      <server-specified-action-button :action-data="action" />
     </div>
     <div v-if="showExtraSettings">
-      <div 
+      <div
         v-for="(action, index) in primaryCalibrationActions"
+        :key="'secondary_cal' + index"
         class="uk-child-width-expand"
-        :key = "'secondary_cal' + index"
       >
-        <action-button
-          :can-terminate="action.can_terminate"
-          :requires-confirmation="action.requires_confirmation"
-          :thing="action.thing"
-          :action="action.action"
-          :submit-label="action.submit_label"
-          @response="onRecalibrateResponse"
-          @error="modalError"
-        />
+        <server-specified-action-button :action-data="action" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import ActionButton from "../../../labThingsComponents/actionButton.vue";
+import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
 
 // Export main app
 export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ActionButton
-  },
-
-  data() {
-    return {
-      primaryCalibrationActions: [],
-      secondaryCalibrationActions: []
-    };
+    ServerSpecifiedActionButton
   },
 
   props: {
@@ -67,6 +43,13 @@ export default {
     }
   },
 
+  data() {
+    return {
+      primaryCalibrationActions: [],
+      secondaryCalibrationActions: []
+    };
+  },
+
   computed: {
     actions() {
       return this.$store.getters["wot/thingDescription"]("camera").actions;
@@ -74,14 +57,14 @@ export default {
   },
 
   async created() {
-    this.primaryCalibrationActions = await this.readThingProperty("camera", "primary_calibration_actions");
-    this.secondaryCalibrationActions = await this.readThingProperty("camera", "secondary_calibration_actions");
-  },
-
-  methods: {
-    onRecalibrateResponse: function() {
-      this.modalNotify("Finished recalibration.");
-    }
+    this.primaryCalibrationActions = await this.readThingProperty(
+      "camera",
+      "primary_calibration_actions"
+    );
+    this.secondaryCalibrationActions = await this.readThingProperty(
+      "camera",
+      "secondary_calibration_actions"
+    );
   }
 };
 </script>