summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorJannik Schönartz2019-04-23 01:24:22 +0200
committerJannik Schönartz2019-04-23 01:24:22 +0200
commit47c141d17e2a1be206788a74f6ef9b2e494f9b8f (patch)
tree371bd89483f927f8f2de586f5de7a12e6352de3b /webapp
parent[eventmanager] better support for firesnail (diff)
downloadbas-47c141d17e2a1be206788a74f6ef9b2e494f9b8f.tar.gz
bas-47c141d17e2a1be206788a74f6ef9b2e494f9b8f.tar.xz
bas-47c141d17e2a1be206788a74f6ef9b2e494f9b8f.zip
[webapp/ipxeBuilder] Change expansion-panels to tabs
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/IpxeBuilderModule.vue4
-rw-r--r--webapp/src/components/IpxeBuilderModuleConfig.vue118
2 files changed, 50 insertions, 72 deletions
diff --git a/webapp/src/components/IpxeBuilderModule.vue b/webapp/src/components/IpxeBuilderModule.vue
index 2cd6eaf..f72e6ef 100644
--- a/webapp/src/components/IpxeBuilderModule.vue
+++ b/webapp/src/components/IpxeBuilderModule.vue
@@ -23,10 +23,10 @@
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
- <v-tab-item>
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<ipxe-builder-module-config :ipxeVersion="'efi'"></ipxe-builder-module-config>
</v-tab-item>
- <v-tab-item>
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<ipxe-builder-module-config :ipxeVersion="'bios'"></ipxe-builder-module-config>
</v-tab-item>
diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
index 6454d41..638de2d 100644
--- a/webapp/src/components/IpxeBuilderModuleConfig.vue
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -15,6 +15,7 @@
"general": "general.h",
"generalSaved": "general.h saved successfully",
"ipxe": "iPXE",
+ "scripts": "Scripts",
"script": "Embedded script (EMBED=)",
"scriptSaved": "Embedded script saved successfully",
"scrollDown": "Go to the bottom",
@@ -34,6 +35,7 @@
"efi": "EFI",
"general": "general.h",
"generalSaved": "general.h wurde erfolgreich gespeichert",
+ "scripts": "Skripte",
"ipxe": "iPXE",
"script": "Eingebettetes Skript (EMBED=)",
"scriptSaved": "Eingebettetes Skript wurde erfolgreich gespeichert",
@@ -77,70 +79,61 @@
<v-btn flat color="warning" @click="cancelIpxe" :disabled=!disableButtons><v-icon left>cancel</v-icon>{{ $t('cancelIpxe') }}</v-btn>
<v-btn flat color="primary" @click="buildIpxe" :disabled=disableButtons><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
</div>
- <v-subheader></v-subheader>
- <v-expansion-panel v-model="scriptExpanded" class="non-selectable">
- <v-expansion-panel-content>
+ <v-subheader>{{ $t('scripts') }}</v-subheader>
+ <v-card class="tabbar-card subtabs" :color="tabsColor">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" hide-slider>
+ <v-tab :class="tabs === 0 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 0 ? 'primary' : ''">description</v-icon>{{ $t('script') }}</v-tab>
+ <v-tab :class="tabs === 1 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 1 ? 'primary' : ''">description</v-icon>{{ $t('trust') }}</v-tab>
+ <v-tab :class="tabs === 2 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 2 ? 'primary' : ''">description</v-icon>{{ $t('general') }}</v-tab>
+ <v-tab :class="tabs === 3 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 3 ? 'primary' : ''">description</v-icon>{{ $t('console') }}</v-tab>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="tabs" style="padding-bottom: 12px"> <!--20px-->
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('script') }}</div>
<v-card>
<codemirror class="script-editor" ref="script" v-model="script"></codemirror>
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
</v-card>
- <!--<v-divider></v-divider>-->
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
- </div>
- </v-expansion-panel-content>
- </v-expansion-panel>
-
- <v-subheader></v-subheader>
- <v-expansion-panel v-model="certificateExpanded">
- <v-expansion-panel-content class="non-selectable">
+ </v-tab-item>
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('trust') }}</div>
<v-card>
<codemirror class="script-editor" ref="certificate" v-model="certificate"></codemirror>
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
</v-card>
- <!--<v-divider></v-divider>-->
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
- </div>
- </v-expansion-panel-content>
- </v-expansion-panel>
-
- <v-subheader></v-subheader>
- <v-expansion-panel v-model="generalExpanded">
- <v-expansion-panel-content class="non-selectable">
+ </v-tab-item>
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('general') }}</div>
<v-card>
<codemirror class="script-editor" ref="general" v-model="general"></codemirror>
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
</v-card>
- <!--<v-divider></v-divider>-->
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
- </div>
- </v-expansion-panel-content>
- </v-expansion-panel>
-
- <v-subheader></v-subheader>
- <v-expansion-panel v-model="consoleExpanded">
- <v-expansion-panel-content class="non-selectable">
+ </v-tab-item>
+ <v-tab-item lazy :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('console') }}</div>
<v-card>
<codemirror class="script-editor" ref="console" v-model="console"></codemirror>
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
</v-card>
- <!--<v-divider></v-divider>-->
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
- </div>
- </v-expansion-panel-content>
- </v-expansion-panel>
-
+ </v-tab-item>
+ </v-tabs-items>
</div>
</template>
@@ -160,10 +153,6 @@ export default {
certificate: '',
general: '',
console: '',
- scriptExpanded: null,
- certificateExpanded: null,
- generalExpanded: null,
- consoleExpanded: null,
log: [],
disableButtons: false,
autoscroll: true
@@ -172,24 +161,6 @@ export default {
computed: {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
},
- watch: {
- scriptExpanded: async function () {
- await this.$nextTick()
- if (this.scriptExpanded === 0) this.$refs.script.refresh()
- },
- certificateExpanded: async function () {
- await this.$nextTick()
- if (this.certificateExpanded === 0) this.$refs.certificate.refresh()
- },
- generalExpanded: async function () {
- await this.$nextTick()
- if (this.generalExpanded === 0) this.$refs.general.refresh()
- },
- consoleExpanded: async function () {
- await this.$nextTick()
- if (this.consoleExpanded === 0) this.$refs.console.refresh()
- }
- },
methods: {
save (apiPath) {
axios.put('/api/ipxe/' + this.ipxeVersion + '/' + apiPath, { data: this[apiPath] }).then(result => {
@@ -292,4 +263,11 @@ export default {
height: 588px;
overflow: auto;
}
+
+ .script-editor >>> .CodeMirror {
+ height: calc(90vh - 160px);
+ }
+ .subtabs {
+ z-index: 1;
+ }
</style>