feat: add macro prompt dialog

src/App.vue

@@ -17,6 +17,7 @@
             <the-manual-probe-dialog />
             <the-bed-screws-dialog />
             <the-screws-tilt-adjust-dialog />
+            <the-macro-prompt />
         </template>
         <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'" />
         <the-connecting-dialog v-else />
@@ -41,11 +42,13 @@ import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 import { setAndLoadLocale } from './plugins/i18n'
+import TheMacroPrompt from '@/components/dialogs/TheMacroPrompt.vue'
 
 Component.registerHooks(['metaInfo'])
 
 @Component({
     components: {
+        TheMacroPrompt,
         TheTimelapseRenderingSnackbar,
         TheEditor,
         TheSelectPrinterDialog,

src/components/console/ConsoleTableEntry.vue

@@ -1,35 +1,7 @@
-<style scoped>
-.consoleTableRow {
-    font-family: 'Roboto Mono', monospace;
-    font-size: 0.95em;
-
-    &.default {
-        .col {
-            padding-top: 8px !important;
-            padding-bottom: 8px !important;
-        }
-
-        & + .consoleTableRow .col {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
-        }
-    }
-
-    &.compact {
-        .col {
-            padding-top: 2px !important;
-            padding-bottom: 2px !important;
-        }
-    }
-}
-</style>
-
 <template>
-    <v-row :class="'ma-0 ' + entryStyle">
+    <v-row :class="entryStyle">
         <v-col class="col-auto pr-0 text--disabled console-time">{{ entryFormatTime }}</v-col>
-        <v-col
-            :class="colorConsoleMessage(event) + ' ' + 'console-message'"
-            @click.capture="commandClick"
-            v-html="event.formatMessage"></v-col>
+        <v-col :class="messageClass" @click.capture="commandClick" v-html="event.formatMessage" />
     </v-row>
 </template>
 
@@ -45,17 +17,25 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     declare readonly event: ServerStateEvent
 
     get entryStyle() {
-        return this.$store.state.gui.console.entryStyle ?? 'default'
+        const classes = ['ma-0']
+        classes.push(this.$store.state.gui.console.entryStyle ?? 'default')
+        if (this.event.type === 'action') classes.push('text--disabled')
+
+        return classes
     }
 
     get entryFormatTime() {
         return this.formatTime(this.event.date.getTime(), true)
     }
 
-    colorConsoleMessage(item: ServerStateEvent): string {
-        if (item.message.startsWith('!! ')) return 'error--text'
+    get messageClass() {
+        const classes = ['console-message']
 
-        return 'text--primary'
+        if (this.event.type === 'action') classes.push('text--disabled')
+        else if (this.event.message.startsWith('!! ')) classes.push('error--text')
+        else classes.push('text--primary')
+
+        return classes
     }
 
     commandClick(event: Event) {
@@ -68,3 +48,28 @@ export default class ConsoleTableEntry extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+.consoleTableRow {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 0.95em;
+
+    &.default {
+        .col {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+        }
+
+        & + .consoleTableRow .col {
+            border-top: 1px solid rgba(255, 255, 255, 0.12);
+        }
+    }
+
+    &.compact {
+        .col {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+        }
+    }
+}
+</style>

src/components/dialogs/MacroPromptButton.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-btn :color="color" class="mx-2" @click="sendCommand">{{ text }}</v-btn>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPrompt } from '@/store/server/types'
+
+@Component({})
+export default class MacroPromptButton extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPrompt
+
+    get splits() {
+        return this.event.message.split('|')
+    }
+
+    get text() {
+        return this.splits[0]
+    }
+
+    get command() {
+        return this.splits[1] ?? this.text
+    }
+
+    get color() {
+        return this.splits[2] ?? ''
+    }
+
+    sendCommand() {
+        this.$store.dispatch('server/addEvent', { message: this.command, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.command })
+    }
+}
+</script>

src/components/dialogs/MacroPromptButtonGroup.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-row>
+        <v-col class="text-center">
+            <macro-prompt-button
+                v-for="(button, index) in children"
+                :key="'prompt_' + groupIndex + '_' + index"
+                :event="button" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPrompt } from '@/store/server/types'
+
+@Component({})
+export default class MacroPromptButton extends Mixins(BaseMixin) {
+    @Prop({ type: Array, required: true }) readonly children!: ServerStateEventPrompt[]
+    @Prop({ type: Number, required: true }) readonly groupIndex!: number
+}
+</script>

src/components/dialogs/MacroPromptFooterButton.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-btn :color="color" text @click="clickButton">
+        {{ text }}
+    </v-btn>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPrompt } from '@/store/server/types'
+
+@Component({})
+export default class MacroPromptActionButton extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPrompt
+
+    get splits() {
+        return this.event.message.split('|')
+    }
+
+    get text() {
+        return this.splits[0]
+    }
+
+    get command() {
+        return this.splits[1] ?? this.text
+    }
+
+    get color() {
+        return this.splits[2] ?? ''
+    }
+
+    clickButton() {
+        this.$store.dispatch('server/addEvent', { message: this.command, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.command })
+    }
+}
+</script>
+
+<style scoped></style>

src/components/dialogs/MacroPromptText.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-row>
+        <v-col>
+            <p class="mb-0">{{ text }}</p>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerStateEventPromptContent } from '@/store/server/types'
+
+@Component({})
+export default class MacroPromptText extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly event!: ServerStateEventPromptContent
+
+    get text() {
+        return this.event.message
+    }
+}
+</script>