From 001edce47ca3f066901229c16b08af0b5907f331 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 28 Jan 2019 12:04:58 +0000
Subject: [PATCH] Actually gets config from API (with loading spinner!)

---
 src/App.vue                                   | 12 ++--
 src/components/IpDisplay.vue                  |  5 --
 src/components/hostDisplay.vue                | 16 +++++
 src/components/{IpInput.vue => hostInput.vue} | 27 +++-----
 src/store.js                                  | 61 ++++++++++++++++---
 5 files changed, 80 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/IpDisplay.vue
 create mode 100644 src/components/hostDisplay.vue
 rename src/components/{IpInput.vue => hostInput.vue} (59%)

diff --git a/src/App.vue b/src/App.vue
index c634effd..f02c0e21 100644
--- a/src/App.vue
+++ b/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 IpDisplay from './components/IpDisplay'
+import hostInput from './components/hostInput.vue'
+import hostDisplay from './components/hostDisplay'
 
 // Export main app
 export default {
   name: 'app',
   components: {
-    IpInput,
-    IpDisplay
+    hostInput,
+    hostDisplay
   }
 }
 </script>
diff --git a/src/components/IpDisplay.vue b/src/components/IpDisplay.vue
deleted file mode 100644
index d13f9590..00000000
--- a/src/components/IpDisplay.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-	<div>
-		<p>Current hostname is: {{ $store.getters.host }}</p>
-	</div>
-</template>
\ No newline at end of file
diff --git a/src/components/hostDisplay.vue b/src/components/hostDisplay.vue
new file mode 100644
index 00000000..ac03fd4c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/IpInput.vue b/src/components/hostInput.vue
similarity index 59%
rename from src/components/IpInput.vue
rename to src/components/hostInput.vue
index d0c08322..9bf08e59 100644
--- a/src/components/IpInput.vue
+++ b/src/components/hostInput.vue
@@ -1,6 +1,5 @@
 <template>
-<div class="hello">
-  {{ msg }}
+<div class="host-input">
   <div class="uk-margin">
       <form @submit.prevent="handleSubmit">
         <div class="uk-inline">
@@ -17,30 +16,18 @@
 <script>
 
 export default {
-  name: 'HelloWorld',
-
-  props: {
-    msg: String
-  },
+  name: 'hostInput',
 
   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)
-        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)
-      }
+        this.$store.commit('changeHost', this.hostname);
+        this.$store.dispatch('updateConfig');
     }
   },
 
@@ -53,8 +40,8 @@ export default {
   computed: {
     IpFormClasses: function () {
       return {
-        'uk-form-danger': !this.$store.getters.available,
-        'uk-form-success': this.$store.getters.connected
+        'uk-form-danger': !this.$store.state.available,
+        'uk-form-success': this.$store.state.connected
       }
     }
   }
diff --git a/src/store.js b/src/store.js
index 58513061..53ebea57 100644
--- a/src/store.js
+++ b/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: '',
-    available: ''
+    port: 5000,
+    apiVer: 'v1',
+    connected: false,
+    available: true,
+    waiting: false,
+    error: '',
+    apiConfig: {}
   },
 
   mutations: {
-    changeHost(state, host) {
-      state.host = host
+    changeHost(state, host, port=5000, apiVer='v1') {
+      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,
-    connected: state => state.connected,
-    available: state => state.available
-  },
-
-  actions: {
+    uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`
   }
 
 })