Added rudimentary host saving

src/components/paneConnect.vue

@@ -1,12 +1,14 @@
 <template>
 <div class="host-input">
   <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>
@@ -25,19 +27,35 @@
           <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>
+
+          <button v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-float-right uk-margin-small uk-width-1-1">Save Host</button>
+
         </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>
+
+    <h3>Saved hosts</h3>
+
+    <div v-for="host in savedHosts" :key="host.name">
+      <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link" uk-icon="trash"></a> 
+      <a href="#" v-on:click="autofillHost(host)">{{ host.name }} ({{ host.hostname }}:{{ host.port }})</a> 
+    </div>
+
   </div>
 
+
+
 </div>
 </template>
 
@@ -46,6 +64,26 @@
 export default {
   name: 'paneConnect',
 
+  data: function () {
+    return {
+      hostname: "localhost",
+      port: 5000,
+      selectedHost: "",
+      savedHosts: [
+        {
+          name: "local",
+          hostname: "localhost",
+          port: 80
+        },
+        {
+          name: "test",
+          hostname: "192.168.1.126",
+          port: 5000
+        }
+      ]
+    }  
+  },
+
   methods: {
     handleSubmit: function(event) {
       if (this.hostname.includes(':')) {
@@ -59,14 +97,31 @@ export default {
       ]);
       // Try to get config and state JSON from the newly submitted host
       this.$store.dispatch('firstConnect')
-    }
-  },
+    },
+
+    autofillHost: function (host) {
+      this.hostname = host.hostname;
+      this.port = host.port
+    },
+
+    delSavedHost: function (host) {
+      console.log(host)
+      var index = this.savedHosts.indexOf(host);
+      if (index > -1) {
+        this.savedHosts.splice(index, 1);
+      }
+    },
+
+    saveHost: function() {
+      this.savedHosts.push(
+        {
+          name: this.$store.state.apiConfig.name,
+          hostname: this.$store.state.host,
+          port: this.$store.state.port
+        }
+      )
+    },
 
-  data: function () {
-    return {
-      hostname: "localhost",
-      port: 5000
-    }  
   },
 
   computed: {
@@ -94,6 +149,17 @@ export default {
           this.hostname = this.hostname.split(':')[0] + ":" + this.port
         }
       }
+    },
+
+    computedSelectedHost: {
+      get: function() {
+        return this.selectedHost
+      },
+      set: function(host) {
+        this.selectedHost = host;
+        this.hostname = host.hostname;
+        this.port = host.port;
+      }
     }
   }