Actually gets config from API (with loading spinner!)

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
-    <IpInput msg="Is your name good or bad?."/>
+    <hostInput/>
     <img alt="Vue logo" src="./assets/images/logo.png">
-    <IpDisplay/>
+    <hostDisplay/>
   </div>
 </template>
 
@@ -16,15 +16,15 @@ import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
 // Import components
-import IpInput from './components/IpInput.vue'
+import hostInput from './components/hostInput.vue'
-import IpDisplay from './components/IpDisplay'
+import hostDisplay from './components/hostDisplay'
 
 // Export main app
 export default {
   name: 'app',
   components: {
-    IpInput,
+    hostInput,
-    IpDisplay
+    hostDisplay
   }
 }
 </script>

src/components/IpDisplay.vue

@@ -1,5 +0,0 @@
-<template>
-	<div>
-		<p>Current hostname is: {{ $store.getters.host }}</p>
-	</div>
-</template>

src/components/hostDisplay.vue

@@ -0,0 +1,16 @@
+<template>
+	<div v-if="$store.state.connected">
+		<p>Current host is: {{ $store.state.host }}</p>
+		<p>Current base URI is: {{ $store.getters.uri }}</p>
+		<p v-if="$store.state.apiConfig.name"><b>Connected to:</b> {{ $store.state.apiConfig.name }}</p>
+	</div>
+	<div v-else-if="$store.state.waiting">
+		<div uk-spinner></div>
+	</div>
+	<div v-else-if="$store.state.error">
+		Error: {{ $store.state.error }}
+	</div>
+	<div v-else>
+		Enter a hostname and connect to start.
+	</div>
+</template>

src/components/hostInput.vue

@@ -1,6 +1,5 @@
 <template>
-<div class="hello">
+<div class="host-input">
-  {{ msg }}
   <div class="uk-margin">
       <form @submit.prevent="handleSubmit">
         <div class="uk-inline">
@@ -17,30 +16,18 @@
 <script>
 
 export default {
-  name: 'HelloWorld',
+  name: 'hostInput',
-
-  props: {
-    msg: String
-  },
 
   methods: {
     IpChanged: function(event) {
-      if (!(event.target.value == this.$store.getters.host)) {
+      if (!(event.target.value == this.$store.state.host)) {
         this.hostname = event.target.value
       }
     },
     
     handleSubmit: function(event) {
-      if (this.hostname != "badhost") {
+        this.$store.commit('changeHost', this.hostname);
-        this.$store.commit('changeHost', this.hostname)
+        this.$store.dispatch('updateConfig');
-        alert(`Connecting to ${this.$store.getters.host}`)
-        this.$store.commit('changeConnected', true)
-      }
-      else {
-        alert("I won't connect to a bad host!")
-        this.$store.commit('changeConnected', false)
-        this.$store.commit('changeAvailable', false)
-      }
     }
   },
 
@@ -53,8 +40,8 @@ export default {
   computed: {
     IpFormClasses: function () {
       return {
-        'uk-form-danger': !this.$store.getters.available,
+        'uk-form-danger': !this.$store.state.available,
-        'uk-form-success': this.$store.getters.connected
+        'uk-form-success': this.$store.state.connected
       }
     }
   }

src/store.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios'
 
 Vue.use(Vuex)
 
@@ -7,29 +8,69 @@ export default new Vuex.Store({
   
   state: {
     host: '',
-    connected: '',
+    port: 5000,
-    available: ''
+    apiVer: 'v1',
+    connected: false,
+    available: true,
+    waiting: false,
+    error: '',
+    apiConfig: {}
   },
 
   mutations: {
-    changeHost(state, host) {
+    changeHost(state, host, port=5000, apiVer='v1') {
-      state.host = host
+      state.host = host;
+      state.port = port;
+      state.apiVer = apiVer;
     },
     changeConnected(state, connected) {
       state.connected = connected
     },
     changeAvailable(state, available) {
       state.available = available
+    },
+    changeWaiting(state, waiting) {
+      state.waiting = waiting
+    },
+    commitError(state, errorString) {
+      state.error = errorString;
+    },
+    commitConfig(state, configData) {
+      state.apiConfig = configData;
+    }
+  },
+
+  actions: {
+    updateConfig(context, uri=`${context.getters.uri}/config`) {
+      // Reset the state when reconnecting starts
+      context.dispatch('resetState');
+      // Mark as loading
+      context.commit('changeWaiting', true);
+      // Do GET request
+      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);
+      }, (error)  =>  {
+        context.commit('changeWaiting', false);
+        context.commit('commitError', error.message);
+        context.commit('changeConnected', false);
+        context.commit('changeAvailable', false);
+      })
+    },
+    resetState(context) {
+      context.commit('changeWaiting', false);
+      context.commit('changeConnected', false);
+      context.commit('changeAvailable', true);
+      context.commit('commitError', '');
     }
   },
 
   getters: {
-    host: state => state.host,
+    uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`
-    connected: state => state.connected,
-    available: state => state.available
-  },
-
-  actions: {
   }
 
 })