Tidied up component structure (2327b9b8) · Commits · OpenFlexure / openflexure-microscope-server

src/App.vue

+7 −158

Original line number	Diff line number	Diff line
		@@ -3,50 +3,8 @@

		<!-- Grid managing whole app -->
		<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>

		<!-- Grid managing the left panel -->
		<div id="panelLeft" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>

		<!-- 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" name="Connect" uk-icon="server" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
		<tabIcon id="navigate" name="Navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
		<tabIcon id="capture" name="Capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
		<tabIcon id="settings" name="Settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
		</div>

		<!-- 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-small uk-flex uk-flex-1 panel-content">
		<tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
		<paneConnect/>
		</tabContent>
		<tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
		<paneNavigate/>
		</tabContent>
		<tabContent id="capture" :requireConnection="true" :currentTab="currentTab">
		<paneCapture/>
		</tabContent>
		<tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
		<paneSettings/>
		</tabContent>
		</div>
		</div>

		</div>

		<!-- Tabbed panel for gallery and live views -->
		<div id="panelDisplay" 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 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 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
		<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
		</ul>
		</div>

		<panelLeft/>
		<panelRight/>
		</div>

		</div>
		@@ -55,105 +13,29 @@
		<script>
		// Import axios for HTTP requests
		import axios from 'axios'
		// Import basic UIkit
		import UIkit from 'uikit';

		// Import components
		import tabIcon from './components/tabIcon.vue'
		import tabContent from './components/tabContent.vue'

		// Import components
		import paneConnect from './components/paneConnect.vue'
		import paneNavigate from './components/paneNavigate.vue'
		import paneCapture from './components/paneCapture.vue'
		import panePlugins from './components/panePlugins.vue'
		import paneSettings from './components/paneSettings.vue'
		// Import components
		import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
		import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
		import panelLeft from './components/panelLeft.vue'
		import panelRight from './components/panelRight.vue'

		// Export main app
		export default {
		name: 'app',

		components: {
		tabIcon,
		tabContent,
		streamDisplay,
		galleryDisplay,
		paneConnect,
		paneNavigate,
		paneCapture,
		panePlugins,
		paneSettings
		panelRight,
		panelLeft
		},

		data: function () {
		return {
		currentTab: 'connect',
		showControlBar: true,
		window: {
		width: 0,
		height: 0
		}
		}
		return {}
		},

		created: function () {
		var context = this

		window.addEventListener('resize', this.handleResize)
		this.handleResize();

		window.addEventListener('beforeunload', this.handleExit)
		},

		mounted() {
		// Attach methods to UIkit events for tab switching
		var context = this;
		// Gallery tab
		UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
		console.log("Gallery tab entered")
		if (context.$store.state.globalSettings.trackWindow == true) {
		context.$root.$emit('globalTogglePreview', false)
		}
		context.$root.$emit('globalUpdateCaptureList');
		});

		// Stream tab
		UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
		console.log("Stream tab entered")
		UIkit.update()
		if (context.$store.state.globalSettings.trackWindow == true) {
		context.$root.$emit('globalTogglePreview', true)
		}
		});

		},

		beforeDestroy: function () {
		window.removeEventListener('resize', this.handleResize)
		},

		methods: {
		setTab: function(event, tab) {
		console.log(event)
		console.log(tab)
		if (this.currentTab == tab) {
		this.showControlBar = !this.showControlBar
		this.currentTab = 'none'
		}
		else {
		this.showControlBar = true
		this.currentTab = tab
		}
		},

		handleResize: function(event) {
		this.window.width = window.innerWidth;
		this.window.height = window.innerHeight;
		},

		handleExit: function(event) {
		console.log("Triggered beforeunload")
		this.$root.$emit('globalTogglePreview', false)
		@@ -166,14 +48,6 @@ export default {
		'uk-light': this.$store.state.globalSettings.darkMode,
		'uk-background-secondary': this.$store.state.globalSettings.darkMode
		}
		},
		disableIfDisconnected: function () {
		return {
		'uk-disabled': !this.$store.getters.ready
		}
		},
		onMobile: function () {
		return (this.window.width <= 800) ? true : false
		}
		}

		@@ -204,29 +78,4 @@ body, html {
		opacity: 0.4;
		}

		.uk-tab {
		padding-left: 0;
		}
		#component-left {
		width: 300px;
		}

		#container-left {
		overflow: hidden auto;
		}

		#container-left, #switcher-left {
		border-width: 0 1px 0 0;
		border-style: solid;
		border-color: rgba(180, 180, 180, 0.25)
		}

		#switcher-left a{
		padding: 12px 20px;
		}

		#switcher-left{
		background-color: rgba(180, 180, 180, 0.1);
		}

		</style>

src/assets/less/theme.less

+1 −1

Original line number	Diff line number	Diff line
		@@ -188,7 +188,7 @@

		.hook-inverse() {
		.uk-button-primary{
		background-color: rgba(180, 180, 180, 0.1);
		background-color: rgba(180, 180, 180, 0.15);
		color: @inverse-primary-muted-color;
		border-color: @inverse-primary-muted-color;
		}

src/components/paneCapture.vue→src/components/controlComponents/paneCapture.vue

+0 −0

File moved.

View file

src/components/paneConnect.vue→src/components/controlComponents/paneConnect.vue

+16 −7

Original line number	Diff line number	Diff line
		@@ -2,8 +2,6 @@
		<div class="host-input">
		<div class="uk-margin">

		<h4>Connect</h4>

		<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>
		@@ -23,10 +21,11 @@
		<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-small" id="form-stacked-text" type="number" value=5000>
		</div>
		</div>
		</li>

		<li>
		<a class="uk-accordion-title" href="#">Status</a>
		<div class="uk-accordion-content">
		@@ -35,23 +34,23 @@
		<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 v-if="!localMode" class="uk-open">
		<a class="uk-accordion-title" href="#">Saved hosts</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-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>
		<a href="#" v-on:click="autofillHost(host)" class="uk-icon-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-link uk-width-auto host-delete" uk-icon="trash"></a>
		</div>
		</div>
		</li>

		</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>
		@@ -246,4 +245,14 @@ export default {
		.host-input {
		text-align: left;
		}

		.host-description {
		text-overflow: ellipsis;
		overflow: hidden;
		}

		.host-delete {
		padding: 0 2px 0 10px;
		}

		</style>

src/components/paneNavigate.vue→src/components/controlComponents/paneNavigate.vue

+0 −0

File moved.

View file