rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Great big ESLint

Browse source
This commit is contained in:
Joel Collins 2019-11-11 16:33:43 +00:00
parent 051eabbdc3
commit ebcb938da1
48 changed files with 3890 additions and 2536 deletions
Download patch file Download diff file Expand all files Collapse all files

93
src/components/panelRight.vue
View file

@ -1,81 +1,98 @@
<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" id="tabContainer" uk-tab="swiping: false">
<div
id="panel-right"
class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1"
>
<ul
id="tabContainer"
class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center"
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>
<li :class="{ 'uk-disabled': !this.$store.getters.ready }">
<a href="#" uk-switcher-item="preview">Live</a>
</li>
<li :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 uk-overflow-auto">
<li class="uk-height-1-1 uk-width-1-1" 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" id="galleryDisplayTab"><galleryDisplay/></li>
<li id="connectDisplayTab" class="uk-height-1-1 uk-width-1-1">
<connectDisplay />
</li>
<li id="streamDisplayTab" class="uk-height-1-1 uk-width-1-1 clickableTab">
<streamDisplay />
</li>
<li id="galleryDisplayTab" class="uk-height-1-1 uk-width-1-1">
<galleryDisplay />
</li>
</ul>
</div>
</template>
<script>
// Import axios for HTTP requests
import axios from 'axios'
// Import basic UIkit
import UIkit from 'uikit';
import UIkit from "uikit";
// Import components
import connectDisplay from './viewComponents/connectDisplay.vue'
import streamDisplay from './viewComponents/streamDisplay.vue'
import galleryDisplay from './viewComponents/galleryDisplay.vue'
import connectDisplay from "./viewComponents/connectDisplay.vue";
import streamDisplay from "./viewComponents/streamDisplay.vue";
import galleryDisplay from "./viewComponents/galleryDisplay.vue";
// Export main app
export default {
name: 'panelRight',
name: "PanelRight",
components: {
connectDisplay,
streamDisplay,
galleryDisplay,
galleryDisplay
},
mounted() {
// Attach methods to UIkit events for tab switching
var context = this;
// Gallery tab
UIkit.util.on('#streamDisplayTab', 'hidden', function(event, area) {
console.log("Stream tab hidden")
// Stream tab leave
UIkit.util.on("#streamDisplayTab", "hidden", function() {
console.log("Stream tab hidden");
if (context.$store.state.globalSettings.trackWindow == true) {
context.$root.$emit('globalTogglePreview', false)
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()
// Stream tab enter
UIkit.util.on("#streamDisplayTab", "shown", function() {
console.log("Stream tab entered");
UIkit.update();
if (context.$store.state.globalSettings.trackWindow == true) {
context.$root.$emit('globalTogglePreview', true)
context.$root.$emit("globalTogglePreview", true);
}
});
// Gallery tab enter
UIkit.util.on("#galleryDisplayTab", "shown", function() {
console.log("Gallery tab entered");
UIkit.update();
context.$root.$emit("globalUpdateCaptureList");
});
// 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)
})
var switcherObj = UIkit.tab("#tabContainer");
console.log(switcherObj);
this.$root.$on("globalTogglePanelRightTab", state => {
console.log(`Toggling panelRight tab to ${state}`);
switcherObj.show(1);
});
},
methods: {
}
}
methods: {}
};
</script>
<style scoped lang="less">
.uk-tab {
padding-left: 0;
}
</style>