From 35fdaf33d2badce4b59bc21b9ec5c1c1043cc667 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Fri, 15 Feb 2019 14:14:51 +0000
Subject: [PATCH] Simplified connect pane

---
 src/components/paneConnect.vue                | 107 ++++++++++++++++--
 .../paneConnectComponents/hostDisplay.vue     |  18 ---
 .../paneConnectComponents/hostInput.vue       |  90 ---------------
 3 files changed, 95 insertions(+), 120 deletions(-)
 delete mode 100644 src/components/paneConnectComponents/hostDisplay.vue
 delete mode 100644 src/components/paneConnectComponents/hostInput.vue

diff --git a/src/components/paneConnect.vue b/src/components/paneConnect.vue
index 3ca9e52f..107a4052 100644
--- a/src/components/paneConnect.vue
+++ b/src/components/paneConnect.vue
@@ -1,25 +1,108 @@
 <template>
-  <div id="paneConnect">
-    <hostInput/>
-    <hostDisplay/>
+<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>
+            <div class="uk-accordion-content">
+              <label class="uk-form-label" for="form-stacked-text">Port</label>
+              <div class="uk-form-controls">
+                  <input v-model="computedPort" class="uk-input uk-form-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
+              </div>
+            </div>
+          </li>
+      </ul>
+      </form>
+
+      <div class="host-display">
+        <div v-if="$store.getters.ready">
+          <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>
   </div>
+
+</div>
 </template>
 
 <script>
-// Import components
-import hostInput from './paneConnectComponents/hostInput.vue'
-import hostDisplay from './paneConnectComponents/hostDisplay'
 
-// Export main app
 export default {
   name: 'paneConnect',
-  components: {
-    hostInput,
-    hostDisplay
+
+  methods: {
+    handleSubmit: function(event) {
+      if (this.hostname.includes(':')) {
+        this.port = this.computedPort
+        this.hostname = this.hostname.split(':')[0];
+      }
+      // Commit the hostname and port to store
+      this.$store.commit('changeHost', [
+        this.hostname, 
+        this.port
+      ]);
+      // Try to get config and state JSON from the newly submitted host
+      this.$store.dispatch('firstConnect')
+    }
+  },
+
+  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.getters.ready
+      }
+    },
+
+    computedPort: {
+      get: function() {
+        if (this.hostname.includes(':')) {
+          var port = parseInt(this.hostname.split(':')[1]);
+          return !isNaN(port) ? port : this.port
+        }
+        else {
+          return this.port
+        }
+      },
+      set: function(newPort) {
+        this.port = newPort
+        if (this.hostname.includes(':')) {
+          this.hostname = this.hostname.split(':')[0] + ":" + this.port
+        }
+      }
+    }
   }
+
 }
 </script>
 
-<style lang="less">
-
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.host-input {
+  text-align: left;
+}
 </style>
diff --git a/src/components/paneConnectComponents/hostDisplay.vue b/src/components/paneConnectComponents/hostDisplay.vue
deleted file mode 100644
index 26d215de..00000000
--- a/src/components/paneConnectComponents/hostDisplay.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div class="host-display">
-		<div v-if="$store.getters.ready">
-			<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>
\ No newline at end of file
diff --git a/src/components/paneConnectComponents/hostInput.vue b/src/components/paneConnectComponents/hostInput.vue
deleted file mode 100644
index 3343fa7b..00000000
--- a/src/components/paneConnectComponents/hostInput.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<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>
-            <div class="uk-accordion-content">
-              <label class="uk-form-label" for="form-stacked-text">Port</label>
-              <div class="uk-form-controls">
-                  <input v-model="computedPort" 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) {
-      if (this.hostname.includes(':')) {
-        this.port = this.computedPort
-        this.hostname = this.hostname.split(':')[0];
-      }
-      // Commit the hostname and port to store
-      this.$store.commit('changeHost', [
-        this.hostname, 
-        this.port
-      ]);
-      // Try to get config and state JSON from the newly submitted host
-      this.$store.dispatch('firstConnect')
-    }
-  },
-
-  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.getters.ready
-      }
-    },
-
-    computedPort: {
-      get: function() {
-        if (this.hostname.includes(':')) {
-          var port = parseInt(this.hostname.split(':')[1]);
-          return !isNaN(port) ? port : this.port
-        }
-        else {
-          return this.port
-        }
-      },
-      set: function(newPort) {
-        this.port = newPort
-        if (this.hostname.includes(':')) {
-          this.hostname = this.hostname.split(':')[0] + ":" + this.port
-        }
-      }
-    }
-  }
-
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-.host-input {
-  text-align: left;
-}
-</style>