Handling local-mode moved to connect tab radio boxes

src/components/paneConnect.vue

@@ -5,11 +5,17 @@
     <h3>Connect</h3>
 
     <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 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" uk-icon="icon: server"></span>
+          <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" name="flavor" placeholder="localhost">
+        </div>
       </div>
-      <button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>
 
       <ul uk-accordion>
         <li>
@@ -17,11 +23,14 @@
           <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>
+              <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>
+      </ul>
+
+      <button class="uk-button uk-button-default uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
+
     </form>
 
     <div class="host-display">
@@ -42,11 +51,14 @@
       <div v-else>No active connection</div>
     </div>
 
-    <h3>Saved hosts</h3>
 
-    <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
-      <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-      <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a> 
+    <div v-if="!localMode">
+      <h3>Saved hosts</h3>
+
+      <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
+        <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
+        <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a> 
+      </div>
     </div>
 
   </div>
@@ -63,6 +75,7 @@ export default {
 
   data: function () {
     return {
+      localMode: true,
       hostname: "localhost",
       port: 5000,
       selectedHost: "",
@@ -77,6 +90,8 @@ export default {
   },
 
   mounted() {
+    // Propagate localMode settings
+    this.setLocalMode(this.localMode)
     // Try loading and parsing savedHosts from localStorage 
     if (localStorage.getItem('savedHosts')) {
       try {
@@ -97,19 +112,34 @@ export default {
 
   methods: {
     handleSubmit: function(event) {
+      // Split host and port if needed
       if (this.hostname.includes(':')) {
-        this.port = this.computedPort
+        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;
+      }
       // Commit the hostname and port to store
       this.$store.commit('changeHost', [
-        this.hostname, 
+        hostname, 
         this.port
       ]);
       // Try to get config and state JSON from the newly submitted host
       this.$store.dispatch('firstConnect')
     },
 
+    setLocalMode: function (state) {
+      this.$store.commit("changeSetting", ['trackWindow', state]);
+      this.$store.commit("changeSetting", ['disableStream', state]);
+      this.$store.commit("changeSetting", ['autoGpuPreview', state]);
+      this.$root.$emit('globalTogglePreview', state)
+    },
+
     autofillHost: function (host) {
       this.hostname = host.hostname;
       this.port = host.port
@@ -144,6 +174,16 @@ export default {
       }
     },
 
+    computedLocalMode: {
+      get: function() {
+        return this.localMode
+      },
+      set: function(state) {
+        this.localMode = state;
+        this.setLocalMode(state)
+      }
+    },
+
     computedPort: {
       get: function() {
         if (this.hostname.includes(':')) {

src/components/paneSettingsComponents/streamSettings.vue

@@ -1,13 +1,11 @@
 <template>
 <div id="appSettings">
 
-  <p><label><input v-model="localMode" class="uk-checkbox" type="checkbox"><b> Local mode</b></label></p>
-
-  <p><label v-bind:class="disableIfLocalMode"><input v-model="disableStream" class="uk-checkbox" type="checkbox"> Disable live stream</label></p>
+  <p><label><input v-model="disableStream" class="uk-checkbox" type="checkbox"> Disable live stream</label></p>
 
   <div class="uk-child-width-1-2" uk-grid>
-    <p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}, disableIfLocalMode]"><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox"> GPU preview</label></p>
-    <p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}, disableIfLocalMode]"><input v-model="trackWindow" class="uk-checkbox" type="checkbox"> Track window</label></p>
+    <p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}]"><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox"> GPU preview</label></p>
+    <p><label v-bind:class="[{'uk-disabled': !this.$store.getters.ready}]"><input v-model="trackWindow" class="uk-checkbox" type="checkbox"> Track window</label></p>
   </div>
 
 </div>
@@ -20,23 +18,10 @@ export default {
   name: 'appSettings',
 
   data: function () {
-    return {
-			isLocalMode: false
-    }
+    return {}
   },
 
   computed: {
-    localMode: {
-      get() {
-        return this.isLocalMode
-      },
-      set(value) {
-        this.isLocalMode = value;
-        this.trackWindow = value;
-        this.disableStream = value;
-        this.autoGpuPreview = value;
-      }
-    },
 
     disableStream: {
       get() {
@@ -64,10 +49,6 @@ export default {
       set(value) {
         this.$store.commit("changeSetting", ['trackWindow', value]);
       }
-    },
-    
-    disableIfLocalMode: function () {
-      return {'uk-disabled': this.localMode}
     }
   }