summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/RegistrationModuleEdit.vue
diff options
context:
space:
mode:
authorUdo Walter2018-11-22 05:27:34 +0100
committerUdo Walter2018-11-22 05:27:34 +0100
commit5b315f938afddad911f2c69a2deca2ca5b3f8c17 (patch)
tree7f314825e61ff7da08a46ee7d116e72831bb10aa /webapp/src/components/RegistrationModuleEdit.vue
parent[external-backends] Fix: Delete clients in the backend is now working properly. (diff)
downloadbas-5b315f938afddad911f2c69a2deca2ca5b3f8c17.tar.gz
bas-5b315f938afddad911f2c69a2deca2ca5b3f8c17.tar.xz
bas-5b315f938afddad911f2c69a2deca2ca5b3f8c17.zip
[webapp] replace script textareas with a code editor
npm install is necessary to load the editor module
Diffstat (limited to 'webapp/src/components/RegistrationModuleEdit.vue')
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue35
1 files changed, 30 insertions, 5 deletions
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index 302cc2e..7adee37 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -48,7 +48,8 @@
deletable-chips
></v-autocomplete>
<v-textarea prepend-icon="description" rows="3" :label="$t('description')" color="primary" v-model="description"></v-textarea>
- <v-textarea prepend-icon="code" rows="20" :label="$t('script')" color="primary" v-model="script"></v-textarea>
+ <div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
+ <codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
@@ -72,7 +73,11 @@ export default {
type: '',
groups: [],
script: '',
- types: ['BASH', 'IPXE']
+ types: ['BASH', 'IPXE'],
+ interval: {
+ id: null,
+ counter: 0
+ }
}
},
computed: {
@@ -84,11 +89,13 @@ export default {
deep: true,
handler (value) {
if (value.type === 'edit' && value.show) {
- this.name = value.info.name
- this.description = value.info.description
+ this.name = value.info.name || ''
+ this.description = value.info.description || ''
this.type = value.info.type || 'BASH'
this.groups = value.info.groups ? value.info.groups.map(x => x.id) : []
- this.script = value.info.script
+ this.script = value.info.script || ''
+ this.interval.id = setInterval(this.refreshEditor, 50)
+ this.interval.counter = 0
}
}
}
@@ -107,6 +114,11 @@ export default {
})
this.$store.dispatch('registration/loadHooks')
this.setDialog({ show: false })
+ },
+ refreshEditor () {
+ this.interval.counter++
+ if (this.$refs.editor) this.$refs.editor.codemirror.refresh()
+ if (this.interval.counter >= 15) clearInterval(this.interval.id)
}
}
}
@@ -117,4 +129,17 @@ export default {
.dialog-title {
z-index: 1;
}
+
+.script-heading {
+ display: flex;
+ align-items: center;
+}
+
+.script-heading > span {
+ margin-left: 9px;
+}
+
+.script-editor {
+ margin-top: 8px;
+}
</style>