refactor: refactor Console & MiniConsole (#2031)

src/components/inputs/ConsoleTextarea.vue

@@ -0,0 +1,138 @@
+<template>
+    <v-textarea
+        ref="gcodeCommandField"
+        v-model="gcode"
+        :items="items"
+        :label="$t('Panels.MiniconsolePanel.SendCode')"
+        solo
+        class="gcode-command-field"
+        autocomplete="off"
+        no-resize
+        auto-grow
+        :rows="rows"
+        hide-details
+        outlined
+        dense
+        :prepend-icon="isTouchDevice ? mdiChevronDoubleRight : ''"
+        :append-icon="mdiSend"
+        @keydown.enter.prevent.stop="doSend"
+        @keyup.up="onKeyUp"
+        @keyup.down="onKeyDown"
+        @keydown.tab="onAutocomplete"
+        @click:prepend="onAutocomplete"
+        @click:append="doSend" />
+</template>
+<script lang="ts">
+import { Component, Mixins, Ref } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import ConsoleMixin from '@/components/mixins/console'
+import { mdiSend, mdiChevronDoubleRight } from '@mdi/js'
+import { VTextareaType } from '@/store/printer/types'
+import { strLongestEqual } from '@/plugins/helpers'
+
+@Component
+export default class ConsoleTextarea extends Mixins(BaseMixin, ConsoleMixin) {
+    mdiSend = mdiSend
+    mdiChevronDoubleRight = mdiChevronDoubleRight
+
+    @Ref() readonly gcodeCommandField!: VTextareaType
+
+    gcode = ''
+    lastCommandNumber: number | null = null
+    items = []
+
+    get rows(): number {
+        return this.gcode?.split('\n').length ?? 1
+    }
+
+    setGcode(gcode: string): void {
+        this.gcode = gcode
+
+        this.$nextTick(() => {
+            this.gcodeCommandField.focus()
+        })
+    }
+
+    onKeyUp(): void {
+        if (this.lastCommandNumber === null && this.lastCommands.length) {
+            this.lastCommandNumber = this.lastCommands.length - 1
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        } else if (this.lastCommandNumber && this.lastCommandNumber > 0) {
+            this.lastCommandNumber--
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        }
+    }
+
+    onKeyDown(): void {
+        if (this.lastCommandNumber === null) return
+
+        if (this.lastCommandNumber < this.lastCommands.length - 1) {
+            this.lastCommandNumber++
+            this.gcode = this.lastCommands[this.lastCommandNumber]
+        } else if (this.lastCommandNumber === this.lastCommands.length - 1) {
+            this.lastCommandNumber = null
+            this.gcode = ''
+        }
+    }
+
+    doSend(cmd: KeyboardEvent) {
+        if (cmd.shiftKey) {
+            this.gcode += '\n'
+            return
+        }
+
+        if (this.gcode === '') return
+
+        this.$store.dispatch('printer/sendGcode', this.gcode)
+        this.$store.dispatch('gui/gcodehistory/addToHistory', this.gcode)
+        this.gcode = ''
+        this.lastCommandNumber = null
+    }
+
+    onAutocomplete(e: Event): void {
+        e.preventDefault()
+
+        if (!this.gcode.length) return
+
+        const textarea = this.gcodeCommandField.$refs.input
+        const currentPosition = textarea.selectionStart
+        const beforeCursor = this.gcode.substring(0, currentPosition)
+        const lastNewlineIndex = beforeCursor.lastIndexOf('\n')
+        const currentLine = beforeCursor.substring(lastNewlineIndex + 1)
+
+        const currentLineLowerCase = currentLine.toLowerCase()
+        const commands = this.helplist.filter((element) => element.commandLow.startsWith(currentLineLowerCase))
+
+        if (commands.length === 0) return
+
+        if (commands?.length === 1) {
+            this.updateGcode(commands[0].command, lastNewlineIndex, currentPosition)
+            return
+        }
+
+        const longestCommon = commands.reduce((acc, val) => {
+            return strLongestEqual(acc, val.command)
+        }, commands[0].command)
+
+        let output = ''
+        commands.forEach(
+            (command) =>
+                (output += `<a class="command font-weight-bold">${command.command}</a>: ${command.description}<br />`)
+        )
+
+        this.$store.dispatch('server/addEvent', { message: output, type: 'autocomplete' })
+
+        this.updateGcode(longestCommon, lastNewlineIndex, currentPosition)
+    }
+
+    updateGcode(text: string, start: number, end: number) {
+        this.gcode = this.gcode.substring(0, start + 1) + text + this.gcode.substring(end)
+    }
+}
+</script>
+
+<style scoped>
+.gcode-command-field {
+    font-family: 'Roboto Mono', monospace;
+}
+</style>

src/components/mixins/console.ts

@@ -0,0 +1,63 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { CommandHelp } from '@/store/printer/types'
+import { GuiConsoleStateFilter } from '@/store/gui/console/types'
+
+@Component
+export default class ConsoleMixin extends Vue {
+    get helplist(): CommandHelp[] {
+        return this.$store.state.printer.helplist ?? []
+    }
+
+    get consoleDirection() {
+        return this.$store.state.gui.console.direction ?? 'table'
+    }
+
+    get hideWaitTemperatures(): boolean {
+        return this.$store.state.gui.console.hideWaitTemperatures
+    }
+
+    set hideWaitTemperatures(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.hideWaitTemperatures', value: newVal })
+    }
+
+    get hideTlCommands(): boolean {
+        return this.$store.state.gui.console.hideTlCommands
+    }
+
+    set hideTlCommands(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.hideTlCommands', value: newVal })
+    }
+
+    get customFilters() {
+        return this.$store.state.gui.console.consolefilters ?? {}
+    }
+
+    get autoscroll(): boolean {
+        return this.$store.state.gui.console.autoscroll ?? true
+    }
+
+    set autoscroll(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.autoscroll', value: newVal })
+    }
+
+    get rawOutput(): boolean {
+        return this.$store.state.gui.console.rawOutput ?? false
+    }
+
+    set rawOutput(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'console.rawOutput', value: newVal })
+    }
+
+    get lastCommands(): string[] {
+        return this.$store.state.gui.gcodehistory.entries ?? []
+    }
+
+    toggleFilter(id: string | number, filter: GuiConsoleStateFilter): void {
+        this.$store.dispatch('gui/console/filterUpdate', { id, values: filter })
+    }
+
+    clearConsole() {
+        this.$store.dispatch('gui/console/clear')
+    }
+}