summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/ConfiguratorModuleEntry.vue
diff options
context:
space:
mode:
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>