Removed 'connected' state in favour of 'ready' state

src/components/paneConnectComponents/hostDisplay.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="host-display">
 		<h2>Debug</h2>
-		<div v-if="$store.state.connected">
+		<div v-if="$store.getters.ready">
 			<p><b>Host:</b> {{ $store.state.host }}</p>
 			<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
 			<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>

src/components/paneConnectComponents/hostInput.vue

@@ -36,10 +36,8 @@ export default {
         this.hostname, 
         this.port
       ]);
-      // Try to get config JSON from the newly submitted host
+      // Try to get config and state JSON from the newly submitted host
-      this.$store.dispatch('updateConfig');
+      this.$store.dispatch('firstConnect')
-      // Update the microscope state while we're at it
-      this.$store.dispatch('updateState');
     }
   },
 
@@ -55,7 +53,7 @@ export default {
     IpFormClasses: function () {
       return {
         'uk-form-danger': !this.$store.state.available,
-        'uk-form-success': this.$store.state.connected
+        'uk-form-success': this.$store.getters.ready
       }
     }
   }

src/components/paneDisplayComponents/streamDisplay.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="streamDisplay scrollTarget">
 
-		<img v-on:dblclick="clickmonitor" v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">
+		<img v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">
 
 		<div v-else-if="$store.state.waiting" class="uk-position-center">
 			<div uk-spinner="ratio: 4.5" ></div>

src/components/paneNavigate.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="$store.state.connected" id="paneNavigate">
+<div id="paneNavigate">
 
   <ul uk-accordion>
     <li>
@@ -35,21 +35,21 @@
             <div>
               <label class="uk-form-label" for="form-stacked-text">x</label>
               <div class="uk-form-controls">
-                <input v-model="$store.state.apiState.stage.position.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
+                <input v-model="setPosition.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
               </div>
             </div>
 
             <div>
               <label class="uk-form-label" for="form-stacked-text">y</label>
               <div class="uk-form-controls">
-                <input v-model="$store.state.apiState.stage.position.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
+                <input v-model="setPosition.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
               </div>
             </div>
 
             <div>
               <label class="uk-form-label" for="form-stacked-text">z</label>
               <div class="uk-form-controls">
-                <input v-model="$store.state.apiState.stage.position.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
+                <input v-model="setPosition.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
               </div>
             </div>
           </div>
@@ -82,7 +82,12 @@ export default {
   data: function () {
     return {
       stepXy: 50,
-      stepZz: 20
+      stepZz: 20,
+      setPosition: {
+        x: this.$store.state.apiState.stage.position.x,
+        y: this.$store.state.apiState.stage.position.y,
+        z: this.$store.state.apiState.stage.position.z
+      }
     }
   },
 

src/components/panelLeft.vue

@@ -12,7 +12,7 @@
     </ul>
     <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
       <li class="uk-width-expand"><paneConnect/></li>
-      <li class="uk-width-expand"><paneNavigate/></li>
+      <li v-if="$store.getters.ready" class="uk-width-expand"><paneNavigate/></li>
     </ul>
   </div>
 </template>
@@ -34,7 +34,7 @@ export default {
   computed: {
     disableIfDisconnected: function () {
       return {
-        'uk-disabled': !this.$store.state.connected
+        'uk-disabled': !this.$store.getters.ready
       }
     }
   }

src/store.js

@@ -11,7 +11,6 @@ export default new Vuex.Store({
     host: '',
     port: 5000,
     apiVer: 'v1',
-    connected: false,
     available: true,
     waiting: false,
     error: '',
@@ -25,9 +24,6 @@ export default new Vuex.Store({
       state.port = port;
       state.apiVer = apiVer;
     },
-    changeConnected(state, connected) {
-      state.connected = connected
-    },
     changeAvailable(state, available) {
       state.available = available
     },
@@ -46,50 +42,47 @@ export default new Vuex.Store({
   },
 
   actions: {
-    updateConfig(context, uri=`${context.getters.uri}/config`) {
+    firstConnect(context) {
       // Reset the state when reconnecting starts
       context.dispatch('resetState');
       // Mark as loading
       context.commit('changeWaiting', true);
-      // Do GET request
+      // Do requests
+      context.dispatch('updateConfig')
+      context.dispatch('updateState')
+    },
+
+    updateConfig(context, uri=`${context.getters.uri}/config`) {
+      context.dispatch('waitingState')
+  
       axios.get(uri)
       .then(response => { 
-        context.commit('changeWaiting', false);
-        context.commit('changeConnected', true);
-        context.commit('changeAvailable', true);
-        context.commit('commitError', '');
         context.commit('commitConfig', response.data);
+        context.dispatch('connectedState')
       })
       .catch(error => {
         var errormsg = '';
         if (error.response) {
-          // The request was made and the server responded with a status code
-          // that falls out of the range of 2xx
           errormsg = `${error.response.status}: ${error.response.data}`
           console.log(errormsg)
         } else if (error.request) {
-          // The request was made but no response was received
-          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-          // http.ClientRequest in node.js
           errormsg = `${error.message}`
           console.log(errormsg)
         } else {
-          // Something happened in setting up the request that triggered an Error
           errormsg = `${error.message}`
           console.log(errormsg)
         }
-        // Update store state for a major connection error
         context.dispatch('errorState', errormsg);
-        // Show a notification
-        UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${errormsg}`, status: 'danger'})
       })
     },
 
     updateState(context, uri=`${context.getters.uri}/state`) {
+      context.dispatch('waitingState')
+  
       axios.get(uri)
       .then(response => { 
-        context.commit('commitError', '');
         context.commit('commitState', response.data);
+        context.dispatch('connectedState')
       })
       .catch(error => {
         var errormsg = '';
@@ -109,20 +102,32 @@ export default new Vuex.Store({
 
     resetState(context) {
       context.commit('changeWaiting', false);
-      context.commit('changeConnected', false);
       context.commit('changeAvailable', true);
-      context.commit('commitError', '');
+      context.commit('commitError', null);
+      context.commit('commitConfig', {});
+      context.commit('commitState', {});
     },
+
+    waitingState(context) {
+      context.commit('changeWaiting', true);
+    },
+
+    connectedState(context) {
+      context.commit('changeWaiting', false);
+      context.commit('changeAvailable', true);
+    },
+
     errorState(context, msg) {
       context.commit('changeWaiting', false);
-      context.commit('changeConnected', false);
       context.commit('changeAvailable', false);
       context.commit('commitError', msg);
+      UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${msg}`, status: 'danger'})
     }
   },
 
   getters: {
-    uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`
+    uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`,
+    ready: state => ((Object.keys(state.apiConfig).length !== 0) && (Object.keys(state.apiState).length !== 0))
   }
 
 })