160 lines
4.3 KiB
Vue
160 lines
4.3 KiB
Vue
<template>
|
|
<div id="panel-left" 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="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
|
|
<i class="material-icons">thumbs_up_down</i>
|
|
</tabIcon>
|
|
<tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
|
|
<i class="material-icons">gamepad</i>
|
|
</tabIcon>
|
|
<tabIcon id="capture" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
|
|
<i class="material-icons">camera_alt</i>
|
|
</tabIcon>
|
|
<tabIcon id="settings" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
|
|
<i class="material-icons">settings</i>
|
|
</tabIcon>
|
|
|
|
<hr>
|
|
|
|
<tabIcon v-for="plugin in $store.state.apiPlugins" @set-tab="setTab"
|
|
:key="plugin.id"
|
|
:id="plugin.id"
|
|
:requireConnection="plugin.requiresConnection"
|
|
:currentTab="currentTab">
|
|
<i class="material-icons">{{ plugin.icon || "extension" }}</i>
|
|
</tabIcon>
|
|
|
|
</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-remove uk-flex uk-flex-1 panel-content">
|
|
<tabContent id="status" :requireConnection="false" :currentTab="currentTab">
|
|
<paneStatus/>
|
|
</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>
|
|
|
|
<tabContent v-for="plugin in $store.state.apiPlugins"
|
|
:key="plugin.id"
|
|
:id="plugin.id"
|
|
:requireConnection="plugin.requiresConnection"
|
|
:currentTab="currentTab">
|
|
|
|
<div class="uk-flex uk-flex-column" v-for="form in plugin.forms" :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()" >
|
|
<JsonForm
|
|
:name="form.name"
|
|
:route="form.route"
|
|
:isTask="form.isTask"
|
|
:submitLabel="form.submitLabel"
|
|
:selfUpdate="form.selfUpdate"
|
|
:schema="form.schema"/>
|
|
<hr>
|
|
</div>
|
|
|
|
</tabContent>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
// Import axios for HTTP requests
|
|
import axios from 'axios'
|
|
|
|
// Import generic components
|
|
import tabIcon from './genericComponents/tabIcon'
|
|
import tabContent from './genericComponents/tabContent'
|
|
|
|
// Import pane components
|
|
import paneStatus from './controlComponents/paneStatus'
|
|
import paneNavigate from './controlComponents/paneNavigate'
|
|
import paneCapture from './controlComponents/paneCapture'
|
|
import paneSettings from './controlComponents/paneSettings'
|
|
|
|
// Import plugin components
|
|
import JsonForm from './pluginComponents/JsonForm'
|
|
|
|
// Export main app
|
|
export default {
|
|
name: 'panelLeft',
|
|
|
|
components: {
|
|
tabIcon,
|
|
tabContent,
|
|
paneStatus,
|
|
paneNavigate,
|
|
paneCapture,
|
|
paneSettings,
|
|
JsonForm
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
currentTab: 'status',
|
|
showControlBar: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
setTab: function(event, tab) {
|
|
if (this.currentTab == tab) {
|
|
this.showControlBar = !this.showControlBar
|
|
this.currentTab = 'none'
|
|
}
|
|
else {
|
|
this.showControlBar = true
|
|
this.currentTab = tab
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
pluginApiUri: function () {
|
|
return this.$store.getters.uri + "/plugin"
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
#component-left {
|
|
width: 300px;
|
|
}
|
|
|
|
#container-left {
|
|
overflow: hidden auto;
|
|
background-color: rgba(180, 180, 180, 0.025);
|
|
}
|
|
|
|
#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: 10px 16px;
|
|
}
|
|
|
|
#switcher-left{
|
|
background-color: rgba(180, 180, 180, 0.1);
|
|
padding-top: 2px !important;
|
|
}
|
|
|
|
</style>
|