feat: Let macros define display options (WIP)

src/components/inputs/MacroButton.vue

@@ -5,15 +5,15 @@
             :color="color"
             :class="paramArray.length ? 'macroWithParameters' : ''"
             :loading="loadings.includes('macro_' + macro.name)"
-            :disabled="disabled"
+            :disabled="disabled_or_hidden"
             @click="doSendMacro(macro.name)">
             {{ alias ? alias : macro.name.replace(/_/g, ' ') }}
         </v-btn>
         <template v-if="paramArray.length">
             <v-menu v-if="!isMobile" offset-y :close-on-content-click="false">
                 <template #activator="{ on, attrs }">
                     <v-btn
-                        :disabled="disabled"
+                        :disabled="disabled_or_hidden"
                         :color="color"
                         v-bind="attrs"
                         class="minwidth-0 px-1 btnMacroMenu"
@@ -26,7 +26,7 @@
                     <v-card-text class="py-2">
                         <v-row class="my-2">
                             <v-col v-for="(name, key) in paramArray" :key="'param_' + key" :cols="paramCssCols">
-                                <v-text-field
+                                <v-text-field v-if="params[name].type != 'select'"
                                     v-model="params[name].value"
                                     :label="name"
                                     :placeholder="params[name].default"
@@ -37,6 +37,13 @@
                                     clearable
                                     :clear-icon="mdiRefresh"
                                     @keyup.enter="sendWithParams"></v-text-field>
+                                <v-select v-if="params[name].type == 'select'"
+                                    v-model="params[name].value"
+                                    :label="name"
+                                    :items="params[name].select"
+                                    hide-details
+                                    outlined
+                                    dense></v-select>
                             </v-col>
                         </v-row>
                         <v-row class="my-2">
@@ -51,7 +58,7 @@
             </v-menu>
             <template v-else>
                 <v-btn
-                    :disabled="disabled"
+                    :disabled="disabled_or_hidden"
                     :color="color"
                     class="minwidth-0 px-1 btnMacroMenu"
                     small
@@ -68,7 +75,7 @@
                         <v-card-text>
                             <v-row>
                                 <v-col v-for="(name, key) in paramArray" :key="'param_mobile_' + key" :cols="6">
-                                    <v-text-field
+                                    <v-text-field v-if="params[name].type != 'select'"
                                         v-model="params[name].value"
                                         :label="name"
                                         :placeholder="params[name].default"
@@ -79,6 +86,13 @@
                                         clearable
                                         :clear-icon="mdiRefresh"
                                         @keyup.enter="sendWithParams"></v-text-field>
+                                    <v-select v-if="params[name].type == 'select'"
+                                        v-model="params[name].value"
+                                        :label="name"
+                                        :items="params[name].select"
+                                        hide-details
+                                        outlined
+                                        dense></v-select>
                                 </v-col>
                             </v-row>
                         </v-card-text>
@@ -103,7 +117,8 @@ import { mdiCloseThick, mdiMenuDown, mdiRefresh } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
 
 interface param {
-    type: 'int' | 'double' | 'string' | null
+    type: 'int' | 'double' | 'string' | 'select' | null
+    select: string[] | null
     default: string | number | null
     value: string | number | null
 }
@@ -139,10 +154,18 @@ export default class MacroButton extends Mixins(BaseMixin) {
     @Prop({ default: false })
     declare readonly disabled: boolean
 
+    get disabled_or_hidden() {
+        return this.disabled || this.klipperMacroOptions?.hidden
+    }
+
     get klipperMacro() {
         return this.$store.getters['printer/getMacro'](this.macro.name)
     }
 
+    get klipperMacroOptions() {
+        return this.$store.state.printer['gcode_macro ' + this.macro.name]?.front_end_options
+    }
+
     get isGcodeStyle() {
         return this.macro.name.match(/[G|M]\d{1,3}/gm)
     }
@@ -166,6 +189,7 @@ export default class MacroButton extends Mixins(BaseMixin) {
     }
 
     @Watch('klipperMacro')
+    @Watch('klipperMacroOptions')
     klipperMacroChange() {
         this.refreshParams()
     }
@@ -174,7 +198,18 @@ export default class MacroButton extends Mixins(BaseMixin) {
         this.paramArray.splice(0, this.paramArray.length)
         this.params = {}
 
-        if (this.klipperMacro?.params !== null) {
+        if (this.klipperMacroOptions?.params) {
+            let params = this.klipperMacroOptions.params
+            Object.keys(params).forEach((name: string) => {
+                this.paramArray.push(name)
+                this.params[name] = {
+                    type: params[name].type,
+                    default: String(params[name].default ?? ''),
+                    value: params[name].type == 'select' ? String(params[name].default ?? '') : '',
+                    select: params[name].select,
+                }
+            })
+        } else if (this.klipperMacro?.params !== null) {
             Object.keys(this.klipperMacro.params).forEach((name: string) => {
                 if (!name.startsWith('_')) {
                     this.paramArray.push(name)