Input for port

src/App.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
     <hostInput/>
-    <img alt="Vue logo" src="./assets/images/logo.png">
     <hostDisplay/>
   </div>
 </template>
@@ -38,6 +37,7 @@ export default {
 #app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  text-align: left;
+  padding-left: 20px;
 }
 </style>

src/components/hostDisplay.vue

@@ -1,14 +1,14 @@
 <template>
 	<div v-if="$store.state.connected">
-		<p>Current host is: {{ $store.state.host }}</p>
+		<p><b>Host:</b> {{ $store.state.host }}</p>
-		<p>Current base URI is: {{ $store.getters.uri }}</p>
+		<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
-		<p v-if="$store.state.apiConfig.name"><b>Connected to:</b> {{ $store.state.apiConfig.name }}</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">
-		Error: {{ $store.state.error }}
+		<b>Error:</b> {{ $store.state.error }}
 	</div>
 	<div v-else>
 		Enter a hostname and connect to start.

src/components/hostInput.vue

@@ -6,7 +6,18 @@
           <span class="uk-form-icon" uk-icon="icon: server"></span>
           <input @input="IpChanged" 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">Connect</button>
+        <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 @input="portChanged" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
+              </div>
+            </div>
+          </li>
+      </ul>
       </form>
   </div>
 
@@ -24,16 +35,22 @@ export default {
         this.hostname = event.target.value
       }
     },
-    
+    portChanged: function(event) {
+      this.port = event.target.value
+    },
     handleSubmit: function(event) {
-        this.$store.commit('changeHost', this.hostname);
+      this.$store.commit('changeHost', [
-        this.$store.dispatch('updateConfig');
+        this.hostname, 
+        this.port
+      ]);
+      this.$store.dispatch('updateConfig');
     }
   },
 
   data: function () {
     return {
-      hostname: "localhost"
+      hostname: "localhost",
+      port: 5000
     }  
   },
 
@@ -51,4 +68,8 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.host-input {
+  text-align: left;
+  width: 300px
+}
 </style>

src/store.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
+import UIkit from 'uikit';
 
 Vue.use(Vuex)
 
@@ -18,7 +19,8 @@ export default new Vuex.Store({
   },
 
   mutations: {
-    changeHost(state, host, port=5000, apiVer='v1') {
+    changeHost(state, [host, port, apiVer='v1']) {
+      console.log(host, port)
       state.host = host;
       state.port = port;
       state.apiVer = apiVer;
@@ -55,6 +57,7 @@ export default new Vuex.Store({
         context.commit('commitError', '');
         context.commit('commitConfig', response.data);
       }, (error)  =>  {
+        UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${error.message}`, status: 'danger'})
         context.commit('changeWaiting', false);
         context.commit('commitError', error.message);
         context.commit('changeConnected', false);