summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ConfiguratorModuleEntry.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/ConfiguratorModuleEntry.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/ConfiguratorModuleEntry.vue')
-rw-r--r--webapp/src/components/ConfiguratorModuleEntry.vue33
1 files changed, 29 insertions, 4 deletions
diff --git a/webapp/src/components/ConfiguratorModuleEntry.vue b/webapp/src/components/ConfiguratorModuleEntry.vue
index 7907742..3bb03a3 100644
--- a/webapp/src/components/ConfiguratorModuleEntry.vue
+++ b/webapp/src/components/ConfiguratorModuleEntry.vue
@@ -22,7 +22,8 @@
</v-card-title>
<v-card-text>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
- <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>
@@ -42,7 +43,11 @@ export default {
data () {
return {
name: '',
- script: ''
+ script: '',
+ interval: {
+ id: null,
+ counter: 0
+ }
}
},
computed: {
@@ -54,8 +59,10 @@ export default {
deep: true,
handler (value) {
if (value.type === 'entry' && value.show) {
- this.name = value.info.name
- this.script = value.info.script
+ this.name = value.info.name || ''
+ this.script = value.info.script || ''
+ this.interval.id = setInterval(this.refreshEditor, 50)
+ this.interval.counter = 0
}
}
}
@@ -71,6 +78,11 @@ export default {
})
this.$store.dispatch('configurator/loadData')
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)
}
}
}
@@ -81,4 +93,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>