Moved connect to a tabbed panel

src/components/paneConnectComponents/hostDisplay.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="host-display">
+	<h2>Debug</h2>
+	<div v-if="$store.state.connected">
+		<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>
+	</div>
+	<div v-else-if="$store.state.waiting">
+		<div uk-spinner></div>
+	</div>
+	<div v-else-if="$store.state.error">
+		<b>Error:</b> {{ $store.state.error }}
+	</div>
+	<div v-else>
+		Enter a hostname and connect to start.
+	</div>
+</div>
+</template>

src/components/paneConnectComponents/hostInput.vue

@@ -0,0 +1,70 @@
+<template>
+<div class="host-input">
+  <h2>Connect</h2>
+  <div class="uk-margin">
+      <form @submit.prevent="handleSubmit">
+        <div class="uk-inline">
+          <span class="uk-form-icon" uk-icon="icon: server"></span>
+          <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">
+        </div>
+        <button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>
+        <ul uk-accordion>
+          <li>
+            <a class="uk-accordion-title" href="#">Advanced</a>
+            <div class="uk-accordion-content">
+              <label class="uk-form-label" for="form-stacked-text">Port</label>
+              <div class="uk-form-controls">
+                  <input v-model="port" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
+              </div>
+            </div>
+          </li>
+      </ul>
+      </form>
+  </div>
+</div>
+</template>
+
+<script>
+
+export default {
+  name: 'hostInput',
+
+  methods: {
+    handleSubmit: function(event) {
+      // Commit the hostname and port to store
+      this.$store.commit('changeHost', [
+        this.hostname, 
+        this.port
+      ]);
+      // Try to get config JSON from the newly submitted host
+      this.$store.dispatch('updateConfig');
+    }
+  },
+
+  data: function () {
+    return {
+      hostname: "localhost",
+      port: 5000
+    }  
+  },
+
+  computed: {
+    // Stylises the hostname input box based on connection status
+    IpFormClasses: function () {
+      return {
+        'uk-form-danger': !this.$store.state.available,
+        'uk-form-success': this.$store.state.connected
+      }
+    }
+  }
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.host-input {
+  text-align: left;
+  width: 300px
+}
+</style>