From f8bb26b13048d64b641b52ea82c69f4dea0c8f0a Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 19 Sep 2019 15:28:15 +0100
Subject: [PATCH] Properly handle new connection clicks

---
 src/components/panelLeft.vue                      |  2 +-
 src/components/panelRight.vue                     | 13 ++++++++++++-
 src/components/viewComponents/connectDisplay.vue  | 12 ++++++++++--
 .../galleryComponents/captureCard.vue             | 11 ++++-------
 src/store.js                                      | 15 +++++++++------
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index c31e96df..edc9d0c3 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -4,7 +4,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="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
-        <i class="material-icons">settings_ethernet</i>
+        <i class="material-icons">thumbs_up_down</i>
       </tabIcon>
       <tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
         <i class="material-icons">gamepad</i>  
diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
index 410bb52c..218cf796 100644
--- a/src/components/panelRight.vue
+++ b/src/components/panelRight.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 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">
+    <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" id="tabContainer" uk-tab="swiping: false">
         <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>
@@ -56,6 +56,17 @@ export default {
       }
     });
 
+    // Create a global event to switch the active tab
+    var switcherObj = UIkit.tab('#tabContainer')
+    console.log(switcherObj)
+    this.$root.$on('globalTogglePanelRightTab', (state) => {
+      console.log(`Toggling panelRight tab to ${state}`)
+      switcherObj.show(1)
+		})
+
+  },
+
+  methods: {
   }
 
 }
diff --git a/src/components/viewComponents/connectDisplay.vue b/src/components/viewComponents/connectDisplay.vue
index 55c89874..a4403f8c 100644
--- a/src/components/viewComponents/connectDisplay.vue
+++ b/src/components/viewComponents/connectDisplay.vue
@@ -65,7 +65,7 @@
                     :name="host.name" 
                     :hostname="host.hostname" 
                     :port="host.port"
-                    v-on:connect="connectToHost(host)"
+                    v-on:connect="handleConnectButton(host)"
                     v-on:delete="delSavedHost(host)"
                   ></hostCard>
                 </div>
@@ -87,7 +87,7 @@
                     :hostname="host.hostname" 
                     :port="host.port"
                     :deletable="false"
-                    v-on:connect="connectToHost(host)"
+                    v-on:connect="handleConnectButton(host)"
                   ></hostCard>
                 </div>
                 
@@ -196,7 +196,10 @@ export default {
       this.$store.dispatch('firstConnect')
       .then (() => {
         console.log("Connected!")
+        // Check client and server match
         this.checkServerVersion()
+        // Switch to live view tab
+        this.$root.$emit('globalTogglePanelRightTab', 'preview')
       })
       .catch(error => {
         this.modalError(error) // Let mixin handle error
@@ -226,6 +229,11 @@ export default {
       this.connectToHost(selectedHost)
     },
 
+    handleConnectButton: function(host) {
+      this.computedLocalMode = false
+      this.connectToHost(host)
+    },
+
     checkServerVersion: function () {
       this.$store.dispatch('updateState')
       .then (() => {
diff --git a/src/components/viewComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
index 041d1fc5..cacb0680 100644
--- a/src/components/viewComponents/galleryComponents/captureCard.vue
+++ b/src/components/viewComponents/galleryComponents/captureCard.vue
@@ -29,9 +29,10 @@
     </div>
 
     <div class="uk-card-footer uk-padding-small">
-      <span v-if="temporary" class="uk-label uk-label-danger uk-margin-small-right" uk-tooltip="title: Capture will be removed automatically; delay: 500">Temporary</span>
-
-      <span v-for="tag in tags" :key="tag" v-on:click="delTagConfirm(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
+      <div v-for="tag in tags" :key="tag">
+        <span v-if="tag==='temporary'" class="uk-label uk-label-danger uk-margin-small-right" uk-tooltip="title: Capture will be removed automatically; delay: 500">Temporary</span>
+        <span v-else v-on:click="delTagConfirm(tag)" class="uk-label uk-margin-small-right deletable-label"> {{ tag }} </span>
+      </div>
 
       <a v-bind:href="tagModalTarget" uk-toggle>
         <span class="uk-label uk-label-success uk-margin-small-right">Add</span>
@@ -84,10 +85,6 @@ export default {
   name: 'captureCard',
 
   props: {
-    temporary: {
-      type: Boolean,
-      required: true
-    },
     metadata: {
       type: Object,
       required: true
diff --git a/src/store.js b/src/store.js
index 88c03ee6..0c4cb7ff 100644
--- a/src/store.js
+++ b/src/store.js
@@ -74,13 +74,10 @@ export default new Vuex.Store({
       var sendRequest = function(resolve, reject) {
         // Do requests
         context.dispatch('updateConfig')
+        .then (() => context.dispatch('updateState'))
+        .then (() => context.dispatch('updatePlugins'))
         .then (() => {
-          context.dispatch('updateState')
-        })
-        .then (() => {
-          context.dispatch('updatePlugins')
-        })
-        .then (() => {
+          console.log("Finished first connect")
           resolve()
         })
         .catch(error => {
@@ -91,6 +88,7 @@ export default new Vuex.Store({
     },
 
     updateConfig(context, uri=`${context.getters.uri}/config`) {
+      console.log("Updating config")
       context.commit('changeWaiting', true)
   
       var sendRequest = function(resolve, reject) {
@@ -98,6 +96,7 @@ export default new Vuex.Store({
         .then(response => { 
           context.commit('commitConfig', response.data)
           context.commit('setConnected')
+          console.log("Updating config finished")
           resolve()
         })
         .catch(error => {
@@ -108,6 +107,7 @@ export default new Vuex.Store({
     },
 
     updateState(context, uri=`${context.getters.uri}/state`) {
+      console.log("Updating state")
       context.commit('changeWaiting', true)
   
       var sendRequest = function(resolve, reject) {
@@ -115,6 +115,7 @@ export default new Vuex.Store({
         .then(response => { 
           context.commit('commitState', response.data)
           context.commit('setConnected')
+          console.log("Updating state finished")
           resolve()
         })
         .catch(error => {
@@ -125,6 +126,7 @@ export default new Vuex.Store({
     },
 
     updatePlugins(context, uri=`${context.getters.uri}/plugin`) {
+      console.log("Updating plugins")
       context.commit('changeWaiting', true)
   
       var sendRequest = function(resolve, reject) {
@@ -134,6 +136,7 @@ export default new Vuex.Store({
           console.log(response.data)
           context.commit('commitPlugins', response.data)
           context.commit('setConnected')
+          console.log("Updating plugins finished")
           resolve()
         })
         .catch(error => {