Handling local-mode moved to connect tab radio boxes (6067f5f7) · Commits · OpenFlexure / openflexure-microscope-server

src/components/paneConnect.vue

+52 −12

Original line number	Diff line number	Diff line
		@@ -5,11 +5,17 @@
		<h3>Connect</h3>

		<form @submit.prevent="handleSubmit">
		<div class="uk-inline">
		<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-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">
		<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>
		@@ -22,6 +28,9 @@
		</div>
		</li>
		</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,12 +51,15 @@
		<div v-else>No active connection</div>
		</div>


		<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

+4 −23

Original line number	Diff line number	Diff line
		<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}
		}
		}