Made camera settings component stateless

src/components/controlComponents/settingsComponents/cameraSettings.vue

@@ -1,46 +1,43 @@
 <template>
-  <div id="cameraSettings">
+  <div v-if="camera_settings" id="cameraSettings">
     <form @submit.prevent="applyConfigRequest">
-      <div>
+      <div v-if="camera_settings.picamera_settings.shutter_speed">
         <label class="uk-form-label" for="form-stacked-text"
           >Exposure time</label
         >
         <div class="uk-form-controls">
           <input
-            :value="displayShutterSpeed"
+            v-model="camera_settings.picamera_settings.shutter_speed"
             class="uk-input uk-form-small"
             type="number"
-            @input="shutterSpeed = $event.target.value"
           />
         </div>
       </div>
 
-      <div>
+      <div v-if="camera_settings.picamera_settings.analog_gain">
         <label class="uk-form-label" for="form-stacked-text"
           >Analogue gain</label
         >
         <div class="uk-form-controls">
           <input
-            :value="displayAnalogGain"
+            v-model="camera_settings.picamera_settings.analog_gain"
             class="uk-input uk-form-small"
             type="number"
-            step="0.1"
+            step="0.000001"
-            @input="analogGain = $event.target.value"
           />
         </div>
       </div>
 
-      <div>
+      <div v-if="camera_settings.picamera_settings.digital_gain">
         <label class="uk-form-label" for="form-stacked-text"
           >Digital gain</label
         >
         <div class="uk-form-controls">
           <input
-            :value="displayDigitalGain"
+            v-model="camera_settings.picamera_settings.digital_gain"
             class="uk-input uk-form-small"
             type="number"
-            step="0.1"
+            step="0.000001"
-            @input="digitalGain = $event.target.value"
           />
         </div>
       </div>
@@ -53,20 +50,14 @@
       </button>
 
       <!--Show auto calibrate if default plugin is enabled-->
-      <div
+      <div v-if="recalibrationUri">
-        v-if="
-          this.$store.state.apiState.plugin.includes(
-            'default_camera_calibration'
-          )
-        "
-      >
         <taskSubmitter
           :can-terminate="false"
           :requires-confirmation="true"
           :confirmation-message="
             'Start recalibration? This may take a while, and the microscope will be locked during this time.'
           "
-          :submit-u-r-l="recalibrateApiUri"
+          :submit-url="recalibrationUri"
           :submit-label="'Auto-Calibrate (Task)'"
           @response="onRecalibrateResponse"
           @error="onRecalibrateError"
@@ -83,7 +74,7 @@ import taskSubmitter from "../../genericComponents/taskSubmitter";
 
 // Export main app
 export default {
-  name: "MicroscopeSettings",
+  name: "CameraSettings",
 
   components: {
     taskSubmitter
@@ -91,61 +82,78 @@ export default {
 
   data: function() {
     return {
-      shutterSpeed: this.$store.state.apiConfig.camera_settings
+      camera_settings: null,
-        .picamera_settings.shutter_speed,
+      recalibrationUri: null,
-      analogGain: this.$store.state.apiConfig.camera_settings.picamera_settings
-        .analog_gain,
-      digitalGain: this.$store.state.apiConfig.camera_settings.picamera_settings
-        .digital_gain,
       isCalibrating: false
     };
   },
 
   computed: {
-    displayDigitalGain: function() {
+    settingsUri: function() {
-      return Number(this.digitalGain).toFixed(2);
+      return `http://${this.$store.state.host}:${
+        this.$store.state.port
+      }/api/v2/settings`;
     },
-    displayAnalogGain: function() {
+    pluginsUri: function() {
-      return Number(this.analogGain).toFixed(2);
+      return `http://${this.$store.state.host}:${
-    },
+        this.$store.state.port
-    displayShutterSpeed: function() {
+      }/api/v2/plugins`;
-      return this.shutterSpeed != "0" ? this.shutterSpeed : "auto";
-    },
-    recalibrateApiUri: function() {
-      return (
-        this.$store.getters.uri +
-        "/plugin/default/camera_calibration/recalibrate"
-      );
-    },
-    configApiUri: function() {
-      return this.$store.getters.uri + "/config";
     }
   },
 
+  mounted() {
+    this.updateSettings();
+    this.updateRecalibrationUri();
+  },
+
   methods: {
-    updateInputValues: function() {
+    updateSettings: function() {
-      this.shutterSpeed = this.$store.state.apiConfig.camera_settings.picamera_settings.shutter_speed;
+      axios
-      this.digitalGain = this.$store.state.apiConfig.camera_settings.picamera_settings.digital_gain;
+        .get(this.settingsUri)
-      this.analogGain = this.$store.state.apiConfig.camera_settings.picamera_settings.analog_gain;
+        .then(response => {
+          this.camera_settings = response.data.camera_settings;
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
+    },
+
+    updateRecalibrationUri: function() {
+      axios
+        .get(this.pluginsUri) // Get a list of plugins
+        .then(response => {
+          var plugins = response.data;
+          // if AutocalibrationPlugin is enabled
+          if ("AutocalibrationPlugin" in plugins) {
+            // Get plugin action link
+            var link =
+              plugins.AutocalibrationPlugin.views.recalibrate.links.self;
+            // Store plugin action URI
+            this.recalibrationUri = `http://${this.$store.state.host}:${
+              this.$store.state.port
+            }${link}`;
+          }
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
     },
 
     applyConfigRequest: function() {
       console.log("Applying config to the microscope");
       var payload = {
         camera_settings: {
-          picamera_settings: {}
+          picamera_settings: {
+            shutter_speed: this.camera_settings.picamera_settings.shutter_speed,
+            analog_gain: this.camera_settings.picamera_settings.analog_gain,
+            digital_gain: this.camera_settings.picamera_settings.digital_gain
+          }
         }
       };
 
-      //if (this.shutterSpeed != this.$store.state.apiConfig.picamera_settings.shutter_speed) {
-      payload.camera_settings.picamera_settings.shutter_speed = this.shutterSpeed;
-      payload.camera_settings.picamera_settings.analog_gain = this.analogGain;
-      payload.camera_settings.picamera_settings.digital_gain = this.digitalGain;
-      //};
-
       // Send request
       axios
-        .post(this.configApiUri, payload)
+        .put(this.settingsUri, payload)
         .then(() => {
           return new Promise(r => setTimeout(r, 500));
         }) // why is there no built-in for this??!