From e81de501893920354d5e22cc94b709a1e873a36a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 20 Nov 2019 16:57:53 +0000
Subject: [PATCH] Made microscope settings component stateless

---
 .../settingsComponents/microscopeSettings.vue | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/controlComponents/settingsComponents/microscopeSettings.vue b/src/components/controlComponents/settingsComponents/microscopeSettings.vue
index 7544e28c..0cac76a1 100644
--- a/src/components/controlComponents/settingsComponents/microscopeSettings.vue
+++ b/src/components/controlComponents/settingsComponents/microscopeSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="microscopeSettings">
+  <div v-if="settings" id="microscopeSettings">
     <form @submit.prevent="applyConfigRequest">
       <h4>Stage</h4>
 
@@ -11,7 +11,7 @@
           <label class="uk-form-label" for="form-stacked-text">x</label>
           <div class="uk-form-controls">
             <input
-              v-model="stageBacklash.x"
+              v-model="settings.stage_settings.backlash.x"
               class="uk-input uk-form-small"
               type="number"
             />
@@ -22,7 +22,7 @@
           <label class="uk-form-label" for="form-stacked-text">y</label>
           <div class="uk-form-controls">
             <input
-              v-model="stageBacklash.y"
+              v-model="settings.stage_settings.backlash.y"
               class="uk-input uk-form-small"
               type="number"
             />
@@ -33,7 +33,7 @@
           <label class="uk-form-label" for="form-stacked-text">z</label>
           <div class="uk-form-controls">
             <input
-              v-model="stageBacklash.z"
+              v-model="settings.stage_settings.backlash.z"
               class="uk-input uk-form-small"
               type="number"
             />
@@ -48,7 +48,7 @@
           >Microscope name</label
         >
         <input
-          v-model="microscopeName"
+          v-model="settings.name"
           class="uk-input uk-width-1-1 uk-form-small"
           name="inputFilename"
           placeholder="Leave blank for default"
@@ -74,47 +74,49 @@ export default {
 
   data: function() {
     return {
-      microscopeName: this.$store.state.apiConfig.name,
-      stageBacklash: this.$store.state.apiConfig.stage_settings.backlash
+      settings: null
     };
   },
 
   computed: {
-    configApiUri: function() {
-      return this.$store.getters.uri + "/config";
+    settingsUri: function() {
+      return `http://${this.$store.state.host}:${
+        this.$store.state.port
+      }/api/v2/settings`;
     }
   },
 
+  mounted() {
+    this.updateSettings();
+  },
+
   methods: {
-    updateInputValues: function() {
-      this.microscopeName = this.$store.state.apiConfig.name;
-      this.stageBacklash = this.$store.state.apiConfig.stage_settings.backlash;
+    updateSettings: function() {
+      axios
+        .get(this.settingsUri)
+        .then(response => {
+          this.settings = response.data;
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
     },
 
     applyConfigRequest: function() {
       var payload = {
-        stage_settings: {}
+        name: this.settings.name,
+        stage_settings: {
+          backlash: this.settings.stage_settings.backlash
+        }
       };
 
-      if (this.microscopeName != this.$store.state.apiConfig.name) {
-        payload.name = this.microscopeName;
-      }
-
-      if (
-        this.stageBacklash !=
-        this.$store.state.apiConfig.stage_settings.backlash
-      ) {
-        payload.stage_settings.backlash = this.stageBacklash;
-      }
-
       console.log(payload);
 
       // Send request to update config
       axios
-        .post(this.configApiUri, payload)
+        .put(this.settingsUri, payload)
         .then(() => {
-          this.$store.dispatch("updateConfig");
-          this.updateInputValues;
+          this.updateSettings();
           this.modalNotify("Microscope config applied.");
         })
         .catch(error => {