Connection handled by component, not store

src/components/viewComponents/connectDisplay.vue

@@ -138,6 +138,8 @@ if (isElectron()) {
   var mdns = require("mdns-js");
 }
 
+import axios from "axios";
+
 import hostCard from "./connectComponents/hostCard.vue";
 
 // Export main app
@@ -262,18 +264,37 @@ export default {
       this.port = host.port;
 
       // Commit the hostname and port to store
+      this.$store.commit("resetState");
       this.$store.commit("changeHost", [host.hostname, host.port]);
-      // Try to get config and state JSON from the newly submitted host
+      this.$store.commit("changeWaiting", true);
-      this.$store
+      // Try to get list of available routes
-        .dispatch("firstConnect")
+      axios
-        .then(() => {
+        .get(`${this.$store.getters.baseUri}/routes`)
-          console.log("Connected!");
+        .then(response => {
-          // Check client and server match
+          console.log(response.data);
-          this.checkServerVersion();
+          // If the /api/v2 route is available
-          // Switch to live view tab
+          if (Object.keys(response.data).includes("/api/v2/")) {
-          this.$root.$emit("globalTogglePanelRightTab", "preview");
+            console.log("API v2 available");
+            // Tell Vuex store that we're connected
+            this.$store.commit("setConnected");
+            // Check client and server match
+            this.checkServerVersion();
+            // Switch to live view tab
+            // TODO: Not working for some reason?
+            this.$root.$emit("globalTogglePanelRightTab", "preview");
+          } else {
+            // Error and no-connect if API v2 is missing
+            var ApiVersionError = Error(`Your microscope is running an old API version.\
+            You must update your microscope software to continue.\
+            <br><br> \n
+            For API upgrades, burning the latest Raspbian-OpenFlexure is often easiest.\
+            <br><br> \n
+            Alternatively, you can run 'ofm upgrade' on your microscope.`);
+            this.modalError(ApiVersionError);
+          }
         })
         .catch(error => {
+          this.$store.commit("setError");
           this.modalError(error); // Let mixin handle error
         });
     },
@@ -307,14 +328,15 @@ export default {
     },
 
     checkServerVersion: function() {
-      this.$store
+      var versionUri = `${this.$store.getters.baseUri}/api/v2/status/version`;
-        .dispatch("updateState")
+      axios
-        .then(() => {
+        .get(versionUri)
+        .then(response => {
+          var serverVersion = response.data;
           var clientVersion = process.env.PACKAGE.version;
           var clientVersionMajor = clientVersion.substring(0, 3);
           console.log(clientVersionMajor);
 
-          var serverVersion = this.$store.state.apiState.version;
           if (serverVersion != undefined) {
             var serverVersionMajor = serverVersion.substring(0, 3);
           }
@@ -362,12 +384,23 @@ export default {
     },
 
     saveHost: function() {
-      // We use unshift instead of push to add the entry to the beginning of the array
+      // URI to get hostname directly from settings
-      this.savedHosts.unshift({
+      var hostnameUri = `${this.$store.getters.baseUri}/api/v2/settings/name`;
-        name: this.$store.state.apiConfig.name,
+      axios
-        hostname: this.$store.state.host,
+        .get(hostnameUri)
-        port: this.$store.state.port
+        .then(response => {
-      });
+          // Get device name from response
+          var deviceName = response.data;
+          // We use unshift instead of push to add the entry to the beginning of the array
+          this.savedHosts.unshift({
+            name: deviceName,
+            hostname: this.$store.state.host,
+            port: this.$store.state.port
+          });
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
     }
   }
 };

src/store.js

@@ -1,6 +1,5 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import axios from "axios";
 
 Vue.use(Vuex);
 
@@ -8,13 +7,9 @@ export default new Vuex.Store({
   state: {
     host: "",
     port: 5000,
-    apiVer: "v1",
+    available: false,
-    available: true,
     waiting: false,
     error: "",
-    apiConfig: {},
-    apiState: {},
-    apiPlugins: [],
     globalSettings: {
       disableStream: false,
       autoGpuPreview: false,
@@ -24,33 +19,20 @@ export default new Vuex.Store({
   },
 
   mutations: {
-    changeHost(state, [host, port, apiVer = "v1"]) {
+    changeHost(state, [host, port]) {
       state.host = host;
       state.port = port;
-      state.apiVer = apiVer;
     },
     changeWaiting(state, waiting) {
       state.waiting = waiting;
     },
-    commitConfig(state, configData) {
-      state.apiConfig = configData;
-    },
-    commitState(state, stateData) {
-      state.apiState = stateData;
-    },
-    commitPlugins(state, pluginData) {
-      state.apiPlugins = pluginData;
-    },
     changeSetting(state, [key, value]) {
       state.globalSettings[key] = value;
     },
     resetState(state) {
       state.waiting = false;
-      state.available = true;
+      state.available = false;
       state.error = null;
-      state.apiConfig = {};
-      state.apiState = {};
-      state.apiPlugins = [];
     },
     setConnected(state) {
       state.waiting = false;
@@ -62,142 +44,11 @@ export default new Vuex.Store({
     }
   },
 
-  actions: {
+  actions: {},
-    firstConnect(context) {
-      // Reset the state when reconnecting starts
-      context.commit("resetState");
-      // Mark as loading
-      context.commit("changeWaiting", true);
-
-      var sendRequest = function(resolve, reject) {
-        // Do requests
-        context
-          .dispatch("updateConfig")
-          .then(() => context.dispatch("updateState"))
-          .then(() => context.dispatch("updatePlugins"))
-          .then(() => {
-            console.log("Finished first connect");
-            resolve();
-          })
-          .catch(error => {
-            reject(error);
-          });
-      };
-      return new Promise(sendRequest);
-    },
-
-    updateConfig(context, uri = `${context.getters.uri}/config`) {
-      console.log("Updating config");
-      context.commit("changeWaiting", true);
-
-      var sendRequest = function(resolve, reject) {
-        axios
-          .get(uri)
-          .then(response => {
-            context.commit("commitConfig", response.data);
-            context.commit("setConnected");
-            console.log("Updating config finished");
-            resolve();
-          })
-          .catch(error => {
-            reject(new Error(error));
-          });
-      };
-      return new Promise(sendRequest);
-    },
-
-    updateState(context, uri = `${context.getters.uri}/state`) {
-      console.log("Updating state");
-      context.commit("changeWaiting", true);
-
-      var sendRequest = function(resolve, reject) {
-        axios
-          .get(uri)
-          .then(response => {
-            context.commit("commitState", response.data);
-            context.commit("setConnected");
-            console.log("Updating state finished");
-            resolve();
-          })
-          .catch(error => {
-            reject(new Error(error));
-          });
-      };
-      return new Promise(sendRequest);
-    },
-
-    updatePlugins(context, uri = `${context.getters.uri}/plugin`) {
-      console.log("Updating plugins");
-      context.commit("changeWaiting", true);
-
-      var sendRequest = function(resolve, reject) {
-        axios
-          .get(uri)
-          .then(response => {
-            console.log("PLUGINS");
-            console.log(response.data);
-            context.commit("commitPlugins", response.data);
-            context.commit("setConnected");
-            console.log("Updating plugins finished");
-            resolve();
-          })
-          .catch(error => {
-            reject(new Error(error));
-          });
-      };
-      return new Promise(sendRequest);
-    },
-
-    pollTask(context, [taskId, timeout, interval]) {
-      var endTime = Number(new Date()) + (timeout * 1000 || 30000);
-      interval = interval * 1000 || 500;
-
-      var checkCondition = function(resolve, reject) {
-        // If the condition is met, we're done!
-        axios.get(`${context.getters.uri}/task/${taskId}`).then(response => {
-          console.log(response.data.status);
-          var result = response.data.status;
-          // If the task ends with success
-          if (result == "success") {
-            resolve(response.data);
-          }
-          // If task ends with an error
-          else if (result == "error") {
-            // Pass the error string back with reject
-            reject(new Error(response.data.return));
-          }
-          // If task ends with termination
-          else if (result == "terminated") {
-            // Pass a generic termination error back with reject
-            reject(new Error("Task terminated"));
-          }
-          // If task ends in any other way
-          else if (result != "running") {
-            // Pass status string as error
-            reject(new Error(result));
-          }
-          // If the condition isn't met but the timeout hasn't elapsed, go again
-          else if (Number(new Date()) < endTime) {
-            setTimeout(checkCondition, interval, resolve, reject);
-          }
-          // Didn't match and too much time, reject!
-          else {
-            reject(new Error("Polling timed out"));
-          }
-        });
-      };
-
-      return new Promise(checkCondition);
-    }
-  },
 
   getters: {
-    uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`,
     uriV2: state => `http://${state.host}:${state.port}/api/v2`,
     baseUri: state => `http://${state.host}:${state.port}`,
-    ready: state =>
+    ready: state => state.available
-      state.available &&
-      Object.keys(state.apiConfig).length !== 0 &&
-      Object.keys(state.apiState).length !== 0
   }
 });