115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<main>
|
|
<Loading v-if="loading" />
|
|
<div class="canvas" v-else>
|
|
<component :is="component" :config="config" :plugin-name="pluginName" />
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineAsyncComponent, shallowRef } from "vue";
|
|
import Utils from '@/Utils'
|
|
import Loading from "@/components/Loading";
|
|
import Nav from "@/components/Nav";
|
|
import Settings from "@/components/panels/Settings/Index";
|
|
|
|
export default {
|
|
name: 'Panel',
|
|
mixins: [Utils],
|
|
components: {Settings, Nav, Loading},
|
|
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
config: {},
|
|
plugins: {},
|
|
backends: {},
|
|
procedures: {},
|
|
component: undefined,
|
|
hostname: undefined,
|
|
selectedPanel: undefined,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
pluginName() {
|
|
return this.$route.params.plugin
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
async initPanel() {
|
|
const componentName = this.pluginName.split('.').map((token) => token[0].toUpperCase() + token.slice(1)).join('')
|
|
let comp = null
|
|
|
|
try {
|
|
comp = await import(`@/components/panels/${componentName}/Index`)
|
|
} catch (e) {
|
|
console.error(e)
|
|
this.notify({
|
|
error: true,
|
|
title: `Cannot load plugin ${this.pluginName}`,
|
|
text: e.toString(),
|
|
})
|
|
|
|
return
|
|
}
|
|
|
|
this.component = shallowRef(defineAsyncComponent(async () => { return comp }))
|
|
this.$options.components[componentName] = this.component
|
|
},
|
|
|
|
async initConfig() {
|
|
const config = await this.request('config.get')
|
|
this.config = config[this.pluginName] || {}
|
|
this.hostname = await this.request('config.get_device_id')
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
this.loading = true
|
|
|
|
try {
|
|
await this.initConfig()
|
|
await this.initPanel()
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
main {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
@media screen and (max-width: $tablet) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.canvas {
|
|
display: flex;
|
|
flex-grow: 100;
|
|
background: $menu-panel-bg;
|
|
overflow: auto;
|
|
|
|
.panel {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
html {
|
|
overflow: auto !important;
|
|
}
|
|
</style>
|