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

Migrated status to about tab

Browse source
This commit is contained in:
Joel Collins 2020-06-01 15:08:51 +01:00
parent 58f1dcdb84
commit f44c4f1f71
6 changed files with 76 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/appContent.vue
View file

@ -79,6 +79,17 @@
>
<i class="material-icons">{{ plugin.icon || "extension" }}</i>
</tabIcon>
<tabIcon
id="about-tab-icon"
class="uk-margin-auto-top"
tab-i-d="about"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
>
<i class="material-icons">info</i>
</tabIcon>
</div>
<!-- Corresponding vertical tab content -->
@ -137,6 +148,14 @@
@reloadForms="updatePlugins()"
/>
</tabContent>
<tabContent
tab-i-d="about"
:require-connection="false"
:current-tab="currentTab"
>
<aboutContent class="section-content" />
</tabContent>
</div>
</div>
</template>
@ -155,6 +174,7 @@ import viewContent from "./tabContentComponents/viewContent.vue";
import settingsContent from "./tabContentComponents/settingsContent.vue";
import galleryContent from "./tabContentComponents/galleryContent.vue";
import extensionContent from "./tabContentComponents/extensionContent.vue";
import aboutContent from "./tabContentComponents/aboutContent.vue";
// Import modal components for device initialisation
import calibrationModal from "./modalComponents/calibrationModal.vue";
@ -172,7 +192,8 @@ export default {
settingsContent,
galleryContent,
extensionContent,
calibrationModal
calibrationModal,
aboutContent
},
data: function() {

7
src/components/controlComponents/devTools.vue
View file

@ -1,10 +1,7 @@
<template>
<div>
<form
class="uk-form-stacked uk-width-medium"
@submit.prevent="overrideAPIHost"
>
<label class="uk-form-label">API origin</label>
<form class="uk-form-stacked" @submit.prevent="overrideAPIHost">
<label class="uk-form-label">Override API origin</label>
<input v-model="currentOrigin" class="uk-input" type="text" />
</form>
</div>

2
src/components/loadingContent.vue
View file

@ -11,7 +11,7 @@
{{ $store.state.error }}
</div>
<div class="uk-align-center">
<devTools></devTools>
<devTools class="uk-width-medium"></devTools>
</div>
</div>
</template>

35
src/components/tabContentComponents/aboutContent.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<!-- Grid managing tab content -->
<div class="uk-height-1-1 view-component">
<div class="uk-padding-small">
<statusPane class="uk-width-large" />
</div>
<div class="uk-padding-small">
<h2>Links</h2>
<a
class="uk-link"
target="_blank"
href="https://gitlab.com/openflexure/openflexure-microscope-jsclient/-/issues"
>Report an issue</a
>
</div>
<div class="uk-padding-small">
<h2>Developer tools</h2>
<devTools class="uk-width-large" />
</div>
</div>
</template>
<script>
import devTools from "../controlComponents/devTools.vue";
import statusPane from "../viewComponents/statusPane.vue";
export default {
name: "AboutContent",
components: {
devTools,
statusPane
}
};
</script>

29
src/components/viewComponents/settingsDisplay.vue
View file

@ -4,19 +4,6 @@
<div class="settings-nav">
<ul class="uk-nav uk-nav-default">
<li class="uk-nav-header">Application settings</li>
<li>
<tabIcon
id="settings-status-icon"
tab-i-d="status"
:show-title="false"
:show-tooltip="false"
:require-connection="false"
:current-tab="currentTab"
@set-tab="setTab"
>
Status
</tabIcon>
</li>
<li>
<tabIcon
id="settings-display-icon"
@ -73,16 +60,6 @@
</ul>
</div>
<div class="view-component uk-width-expand uk-padding-small">
<tabContent
tab-i-d="status"
:require-connection="false"
:current-tab="currentTab"
>
<div class="settings-pane uk-padding-small">
<statusPane />
</div>
</tabContent>
<tabContent
tab-i-d="display"
:require-connection="false"
@ -135,7 +112,6 @@
</template>
<script>
import statusPane from "./settingsComponents/statusPane.vue";
import streamSettings from "./settingsComponents/streamSettings.vue";
import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
import cameraSettings from "./settingsComponents/cameraSettings.vue";
@ -151,7 +127,6 @@ export default {
name: "SettingsDisplay",
components: {
statusPane,
streamSettings,
cameraSettings,
microscopeSettings,
@ -163,8 +138,8 @@ export default {
data: function() {
return {
selected: "status",
currentTab: "status"
selected: "display",
currentTab: "display"
};
},

35
src/components/viewComponents/settingsComponents/statusPane.vue → src/components/viewComponents/statusPane.vue
View file

@ -1,12 +1,15 @@
<template>
<div class="host-input">
<h3>Status</h3>
<div v-if="configuration && $store.getters.ready">
<div v-if="configuration">
<div>
<div class="uk-margin-small-bottom">
<b>Host:</b>
<b>API origin:</b>
<br />
{{ $store.state.host }}
{{ $store.state.origin }}
<br />
<b>API URL:</b>
<br />
{{ $store.getters.uriV2 }}
</div>
</div>
@ -21,7 +24,7 @@
{{ configuration.application.version }}
</div>
<div>
<b>OpenFlexure eV version:</b> <br />
<b>Client version:</b> <br />
{{ clientVersionName }}
</div>
@ -69,7 +72,7 @@
</div>
</div>
<div v-else-if="$store.state.waiting">
<progressBar></progressBar>
Loading...
</div>
<div v-else-if="$store.state.error">
<b>Error:</b> {{ $store.state.error }}
@ -80,14 +83,11 @@
<script>
import axios from "axios";
import progressBar from "../../genericComponents/progressBar";
export default {
name: "StatusPane",
components: {
progressBar
},
components: {},
data: function() {
return {
@ -113,18 +113,11 @@ export default {
}
},
created: function() {
mounted: function() {
// Watch for host 'ready', then update configuration
this.$store.watch(
(state, getters) => {
return getters.ready;
},
() => {
this.updateConfiguration();
this.updateSettings();
this.updateSystemActions();
}
);
this.updateConfiguration();
this.updateSettings();
this.updateSystemActions();
},
methods: {