From cceaa645bede7e773fa7b0af4ad0a2a957421fa4 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 19 Sep 2019 13:20:39 +0100
Subject: [PATCH] Moved connect into a display panel tab

---
 src/assets/less/theme.less                    |   1 +
 .../controlComponents/paneStatus.vue          |  44 ++++
 src/components/panelLeft.vue                  |  12 +-
 src/components/panelRight.vue                 |   6 +-
 .../connectComponents/hostCard.vue            |  68 ++++++
 .../connectDisplay.vue}                       | 230 ++++++++++--------
 6 files changed, 256 insertions(+), 105 deletions(-)
 create mode 100644 src/components/controlComponents/paneStatus.vue
 create mode 100644 src/components/viewComponents/connectComponents/hostCard.vue
 rename src/components/{controlComponents/paneConnect.vue => viewComponents/connectDisplay.vue} (58%)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 32280710..5af0556d 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -168,6 +168,7 @@
 
 .uk-card {
     border-radius: @paper-border-radius;
+    border: 1px solid  rgba(180, 180, 180, 0.25);
 }
 
 .uk-card-media-top img {
diff --git a/src/components/controlComponents/paneStatus.vue b/src/components/controlComponents/paneStatus.vue
new file mode 100644
index 00000000..2639241a
--- /dev/null
+++ b/src/components/controlComponents/paneStatus.vue
@@ -0,0 +1,44 @@
+<template>
+<div class="host-input">
+
+  <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>No active connection</div>
+
+</div>
+</template>
+
+<script>
+
+export default {
+  name: 'paneStatus',
+
+  data: function () {
+    return {
+    }  
+  },
+
+  mounted() {
+  },
+
+  // When savedHosts changes, serialise to JSON and save to localStorage
+  watch: {
+  },
+
+  methods: {
+  },
+
+  computed: {
+  }
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+</style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 1249b12c..c31e96df 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -3,7 +3,7 @@
 
     <!-- Vertical tab bar -->
     <div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
-      <tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
+      <tabIcon id="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
         <i class="material-icons">settings_ethernet</i>
       </tabIcon>
       <tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
@@ -31,8 +31,8 @@
     <!-- Corresponding vertical tab content -->
     <div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
       <div id="component-left" class="uk-padding-remove uk-flex uk-flex-1 panel-content">
-        <tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
-          <paneConnect/>
+        <tabContent id="status" :requireConnection="false" :currentTab="currentTab">
+          <paneStatus/>
         </tabContent>
         <tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
           <paneNavigate/>
@@ -79,7 +79,7 @@ import tabIcon from './genericComponents/tabIcon'
 import tabContent from './genericComponents/tabContent'
 
 // Import pane components
-import paneConnect from './controlComponents/paneConnect'
+import paneStatus from './controlComponents/paneStatus'
 import paneNavigate from './controlComponents/paneNavigate'
 import paneCapture from './controlComponents/paneCapture'
 import paneSettings from './controlComponents/paneSettings'
@@ -94,7 +94,7 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    paneConnect,
+    paneStatus,
     paneNavigate,
     paneCapture,
     paneSettings,
@@ -103,7 +103,7 @@ export default {
 
   data: function () {
     return {
-      currentTab: 'connect',
+      currentTab: 'status',
       showControlBar: true
     }  
   },
diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
index f3db8871..410bb52c 100644
--- a/src/components/panelRight.vue
+++ b/src/components/panelRight.vue
@@ -2,10 +2,12 @@
   <!-- Tabbed panel for gallery and live views -->
   <div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
     <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
-        <li><a href="#" uk-switcher-item="preview">Live</a></li>
+        <li><a href="#" uk-switcher-item="connect">Connect</a></li>
+        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="preview">Live</a></li>
         <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
     </ul>
     <ul class="uk-switcher uk-flex uk-flex-1">
+        <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="connectDisplayTab"><connectDisplay/></li>
         <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
         <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
     </ul>
@@ -19,6 +21,7 @@ import axios from 'axios'
 import UIkit from 'uikit';
 
 // Import components
+import connectDisplay from './viewComponents/connectDisplay.vue'
 import streamDisplay from './viewComponents/streamDisplay.vue'
 import galleryDisplay from './viewComponents/galleryDisplay.vue'
 
@@ -27,6 +30,7 @@ export default {
   name: 'panelRight',
 
   components: {
+    connectDisplay,
     streamDisplay,
     galleryDisplay,
   },
diff --git a/src/components/viewComponents/connectComponents/hostCard.vue b/src/components/viewComponents/connectComponents/hostCard.vue
new file mode 100644
index 00000000..d2afc895
--- /dev/null
+++ b/src/components/viewComponents/connectComponents/hostCard.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="hostCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
+
+    <div class="uk-card-body uk-padding-small uk-height-small">
+
+      <div class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
+        <div class="uk-width-expand host-description"><b>{{ name }}</b> ({{ hostname }}:{{ port }})</div>
+        <a href="#" v-on:click="$emit('delete')" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 
+      </div>
+
+    </div>
+
+    <div class="uk-card-footer uk-padding-small">
+      <button 
+        class="uk-button uk-button-default uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
+        v-on:click="$emit('connect')"
+        >Connect</button>
+    </div>
+
+	</div>
+</template>
+
+<script>
+import UIkit from 'uikit';
+import axios from 'axios'
+
+// Export main app
+export default {
+  name: 'hostCard',
+
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    hostname: {
+      type: String,
+      required: true
+    },
+    port: {
+      type: Number,
+      required: true
+    }
+  },
+
+  data: function () {
+    return {
+    }  
+  },
+
+  methods: {
+  },
+
+  created: function () {
+  },
+
+  computed: {
+  }
+
+}
+</script>
+
+<style>
+.host-description {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/controlComponents/paneConnect.vue b/src/components/viewComponents/connectDisplay.vue
similarity index 58%
rename from src/components/controlComponents/paneConnect.vue
rename to src/components/viewComponents/connectDisplay.vue
index 572e5dfb..55c89874 100644
--- a/src/components/controlComponents/paneConnect.vue
+++ b/src/components/viewComponents/connectDisplay.vue
@@ -1,80 +1,107 @@
 <template>
-<div class="host-input">
-  <div class="uk-margin">
+	<div class="connectDisplay uk-padding uk-padding-remove-left">
 
-    <form @submit.prevent="handleSubmit">
-      <div class="uk-form-controls uk-margin">
-        <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
-        <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="false" checked> Connect remotely</label>
-      </div>
+    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
+
+      <div class="uk-width-auto">
+
+        <div class="uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium">
+
+          <div class="uk-card-body uk-padding-small">
+            <form @submit.prevent="handleSubmit">
+              <div class="uk-form-controls uk-margin">
+                <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
+                <label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="false" checked> Connect remotely</label>
+              </div>
+              <div v-if="!localMode">
+                <div class="uk-inline uk-width-1-1">
+                  <span class="uk-form-icon"><i class="material-icons">dns</i></span>
+                  <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
+                </div>
+                <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-small" id="form-stacked-text" type="number" value=5000>
+                </div>
+              </div>
+            </form>
+          </div>
+
+          <div class="uk-card-footer uk-padding-small">
+            <button
+              v-on:click="handleSubmit"
+              class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
+              Connect
+            </button>
+
+            <button 
+              v-if="$store.getters.ready" 
+              v-on:click="saveHost()" 
+              class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">
+              Save Current
+            </button>
+
+            <button 
+              v-if="$store.getters.ready" 
+              v-on:click="$store.commit('resetState')" 
+              class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
+              Disconnect
+            </button>
+          </div>
 
-      <div v-if="!localMode">
-        <div class="uk-inline uk-width-1-1">
-          <span class="uk-form-icon"><i class="material-icons">dns</i></span>
-          <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
         </div>
       </div>
 
-      <ul uk-accordion="multiple: true">
-        <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-small" id="form-stacked-text" type="number" value=5000>
+      <div class="uk-width-expand">
+        <ul uk-accordion="multiple: true">
+
+          <li class="uk-open">
+            <a class="uk-accordion-title" href="#">Saved devices</a>
+            <div class="uk-accordion-content">
+            
+              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+
+                <div v-for="host in savedHosts" :key="host.name">
+                  <hostCard 
+                    :name="host.name" 
+                    :hostname="host.hostname" 
+                    :port="host.port"
+                    v-on:connect="connectToHost(host)"
+                    v-on:delete="delSavedHost(host)"
+                  ></hostCard>
+                </div>
+                
+              </div>
+
             </div>
-          </div>
-        </li>
+          </li>
+
+          <li class="uk-open">
+            <a class="uk-accordion-title" href="#">Nearby devices</a>
+            <div class="uk-accordion-content">
+
+              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
+
+                <div v-for="host in Object.values(foundHosts)" :key="host.name">
+                  <hostCard 
+                    :name="host.name" 
+                    :hostname="host.hostname" 
+                    :port="host.port"
+                    :deletable="false"
+                    v-on:connect="connectToHost(host)"
+                  ></hostCard>
+                </div>
+                
+              </div>
 
-        <li>
-          <a class="uk-accordion-title" href="#">Status</a>
-          <div class="uk-accordion-content">
-            <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>No active connection</div>
-          </div>
-        </li>
+          </li>
 
-        <li v-if="!localMode" class="uk-open">
-          <a class="uk-accordion-title" href="#">Nearby devices</a>
-          <div class="uk-accordion-content">
-            <div v-for="host in Object.values(foundHosts)" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-            </div>
-          </div>
-        </li>
+        </ul>
+      </div>
 
-        <li v-if="!localMode" class="uk-open">
-          <a class="uk-accordion-title" href="#">Saved devices</a>
-          <div class="uk-accordion-content">
-            <button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
-            <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 
-            </div>
-          </div>
-        </li>
+    </div>
 
-      </ul>
-
-      <button class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
-    </form>
-
-  <button 
-    v-if="$store.getters.ready" 
-    v-on:click="$store.commit('resetState')" 
-    class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
-    Disconnect
-  </button>
-
-  </div>
-
-</div>
+	</div>
 </template>
 
 <script>
@@ -86,9 +113,15 @@ if (userAgent.indexOf(' electron/') > -1) {
   var mdns = require('mdns-js');
 }
 
+import hostCard from './connectComponents/hostCard.vue'
 
+// Export main app
 export default {
-  name: 'paneConnect',
+  name: 'connectDisplay',
+
+  components: {
+    hostCard
+  },
 
   data: function () {
     return {
@@ -98,7 +131,7 @@ export default {
       selectedHost: "",
       savedHosts: [],
       foundHosts: {}
-    }  
+    }    
   },
 
   mounted() {
@@ -148,23 +181,16 @@ export default {
   },
 
   methods: {
-    handleSubmit: function(event) {
-      // Split host and port if needed
-      if (this.hostname.includes(':')) {
-        this.port = this.computedPort;
-        this.hostname = this.hostname.split(':')[0];
-      }
-      // Handle auto-local-connect
-      if (this.localMode) {
-        var hostname = "localhost";
-      }
-      else {
-        var hostname = this.hostname;
-      }
+    connectToHost: function(host) {
+      console.log(host)
+      // Set the global form values
+      this.hostname = host.hostname
+      this.port = host.port
+    
       // Commit the hostname and port to store
       this.$store.commit('changeHost', [
-        hostname, 
-        this.port
+        host.hostname, 
+        host.port
       ]);
       // Try to get config and state JSON from the newly submitted host
       this.$store.dispatch('firstConnect')
@@ -174,7 +200,30 @@ export default {
       })
       .catch(error => {
         this.modalError(error) // Let mixin handle error
-      })
+      })    
+    },
+
+    handleSubmit: function(event) {
+      // Split host and port if needed
+      if (this.hostname.includes(':')) {
+        this.port = this.computedPort;
+        this.hostname = this.hostname.split(':')[0];
+      }
+
+      // Handle auto-local-connect
+      if (this.localMode) {
+        var hostname = "localhost";
+      }
+      else {
+        var hostname = this.hostname;
+      }
+
+      var selectedHost = {
+        hostname: hostname,
+        port: this.port
+      }
+
+      this.connectToHost(selectedHost)
     },
 
     checkServerVersion: function () {
@@ -217,11 +266,6 @@ export default {
       //this.$root.$emit('globalTogglePreview', state)
     },
 
-    autofillHost: function (host) {
-      this.hostname = host.hostname;
-      this.port = host.port
-    },
-
     delSavedHost: function (host) {
       console.log(host)
       var index = this.savedHosts.indexOf(host);
@@ -279,16 +323,6 @@ export default {
       }
     },
 
-    computedSelectedHost: {
-      get: function() {
-        return this.selectedHost
-      },
-      set: function(host) {
-        this.selectedHost = host;
-        this.hostname = host.hostname;
-        this.port = host.port;
-      }
-    }
   }
 
 }