feat(HappyHare): Regular click pop-up action menu and reworked MMU unit layout and footer with heater/dryer info

src/components/settings/MmuSettings.vue

@@ -72,6 +72,26 @@
 
       <v-divider />
 
+      <app-setting :title="$t('app.mmu.setting.show_name')">
+        <v-switch
+          v-model="showName"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
+
+      <v-divider />
+
+      <app-setting :title="$t('app.mmu.setting.show_climate')">
+        <v-switch
+          v-model="showClimate"
+          hide-details
+          class="mt-0 mb-4"
+        />
+      </app-setting>
+
+      <v-divider />
+
       <app-setting :title="$t('app.setting.label.reset')">
         <app-btn
           outlined
@@ -168,6 +188,30 @@ export default class MmuSettings extends Mixins(StateMixin, MmuMixin) {
     })
   }
 
+  get showName (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showName
+  }
+
+  set showName (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.mmu.showName',
+      value,
+      server: true
+    })
+  }
+
+  get showClimate (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showClimate
+  }
+
+  set showClimate (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.mmu.showClimate',
+      value,
+      server: true
+    })
+  }
+
   handleReset () {
     this.$typedDispatch('config/saveByPath', {
       path: 'uiSettings.mmu',

src/components/widgets/mmu/MmuCard.vue

@@ -51,7 +51,7 @@
             </v-list-item-content>
           </v-list-item>
 
-          <v-list-item @click="showEditGateMapDialog = true">
+          <v-list-item @click="openEditGateMapDialog()">
             <v-list-item-icon>
               <v-icon left>
                 $mmuEditGateMap
@@ -162,7 +162,10 @@
         pa-2
       >
         <v-row align="start">
-          <mmu-machine />
+          <mmu-machine
+            @select-gate="selectGate"
+            @edit-filament="editFilament"
+          />
         </v-row>
         <v-row align="start">
           <v-col
@@ -250,7 +253,11 @@
 
     <mmu-recover-state-dialog v-model="showRecoverStateDialog" />
     <mmu-maintenance-dialog v-model="showMaintenanceDialog" />
-    <mmu-edit-gate-map-dialog v-model="showEditGateMapDialog" />
+    <mmu-edit-gate-map-dialog
+      v-model="showEditGateMapDialog"
+      :initial-gate="initialEditGate"
+      @close="initialEditGate = null"
+    />
   </collapsable-card>
 </template>
 
@@ -289,6 +296,7 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
   showRecoverStateDialog = false
   showEditGateMapDialog = false
   showMaintenanceDialog = false
+  initialEditGate: number | null = null
 
   get col1Size (): number {
     if (this.$typedState.config.uiSettings.mmu.largeFilamentStatus) return 6
@@ -344,6 +352,24 @@ export default class MmuCard extends Mixins(StateMixin, MmuMixin) {
   private hasSensor (sensorName: string): boolean {
     return sensorName in this.sensors
   }
+
+  openEditGateMapDialog (gate?: number | null) {
+    this.initialEditGate = typeof gate === 'number' ? gate : null
+    this.showEditGateMapDialog = true
+  }
+
+  private selectGate (gate: number) {
+    if (gate === this.TOOL_GATE_BYPASS) {
+      this.sendGcode('MMU_SELECT BYPASS=1', this.$waits.onMmuSelect)
+      return
+    }
+
+    this.sendGcode(`MMU_SELECT GATE=${gate}`, this.$waits.onMmuSelect)
+  }
+
+  private editFilament (gate: number) {
+    this.openEditGateMapDialog(gate)
+  }
 }
 </script>
 

src/components/widgets/mmu/MmuEditGateMapDialog.vue

@@ -44,8 +44,10 @@
             <v-col class="d-flex justify-start align-center no-padding">
               <mmu-machine
                 :show-context-menu="false"
+                :show-details="false"
                 :edit-gate-map="editGateMap"
                 :edit-gate-selected="editGateSelected"
+                :hide-bypass="true"
                 @select-gate="selectGate"
               />
             </v-col>
@@ -344,7 +346,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, VModel, Watch } from 'vue-property-decorator'
+import { Mixins, VModel, Prop, Watch } from 'vue-property-decorator'
 import BrowserMixin from '@/mixins/browser'
 import StateMixin from '@/mixins/state'
 import MmuMixin from '@/mixins/mmu'
@@ -359,6 +361,9 @@ export default class MmuEditGateMapDialog extends Mixins(BrowserMixin, StateMixi
   @VModel({ required: true })
   open!: boolean
 
+  @Prop({ required: false, default: null })
+  readonly initialGate!: number | null
+
   private editGateMap: MmuGateDetails[] = []
   private editGateSelected: number = -1
 
@@ -375,10 +380,16 @@ export default class MmuEditGateMapDialog extends Mixins(BrowserMixin, StateMixi
   private initialize () {
     if (this.open) {
       this.editGateMap = Array.from(this.gateMap)
+
+      if (typeof this.initialGate === 'number' && this.initialGate >= 0 && this.initialGate < this.editGateMap.length) {
+        this.editGateSelected = this.initialGate
+      } else {
+        this.editGateSelected = -1
+      }
     } else {
       this.editGateMap = []
+      this.editGateSelected = -1
     }
-    this.editGateSelected = -1
   }
 
   private selectGate (gate: number) {
@@ -629,6 +640,7 @@ export default class MmuEditGateMapDialog extends Mixins(BrowserMixin, StateMixi
   }
 
   close () {
+    this.$emit('close')
     this.editGateMap = []
     this.editGateSelected = -1
     this.open = false

src/components/widgets/mmu/MmuGateStatus.vue

@@ -6,13 +6,13 @@
     preserveAspectRatio="xMidYMid meet"
   >
     <rect
-      x="20"
-      y="16"
-      width="80"
-      height="35"
+      x="15"
+      y="14"
+      width="90"
+      height="39"
       rx="8"
       ry="8"
-      stroke-width="4"
+      stroke-width="5"
       :stroke="statusColor"
       :fill="selectedColor"
     />
@@ -23,7 +23,7 @@
       text-anchor="middle"
       font-weight="bold"
       font-size="30px"
-      :class="!editGateMap && gateIndex === gate ? 'selected-text' : 'regular-text'"
+      :fill="fontColor"
     >
       {{ gateIndex }}
     </text>
@@ -34,7 +34,7 @@
       text-anchor="middle"
       font-weight="bold"
       font-size="20px"
-      :class="!editGateMap && gateIndex === gate ? 'selected-text' : 'regular-text'"
+      :fill="fontColor"
     >
       BYPASS
     </text>
@@ -82,15 +82,14 @@ export default class MmuGateStatus extends Mixins(StateMixin, MmuMixin) {
       return 'none'
     }
   }
+
+  get fontColor (): string {
+    if (!this.editGateMap && this.gateIndex === this.gate) return '#000000'
+    if (this.$vuetify.theme.dark) return '#c0c0c0'
+    return '#808080'
+  }
 }
 </script>
 
 <style scoped>
-.selected-text {
-    fill: #000000;
-}
-
-.regular-text {
-    fill: #c0c0c0;
-}
 </style>

src/components/widgets/mmu/MmuMachine.vue

@@ -3,15 +3,34 @@
     <v-row dense>
       <v-col
         v-for="index in unitArray"
-        :key="'unit_' + index"
+        :key="index"
         cols="auto"
       >
-        <div :class="$vuetify.theme.dark ? 'mmu-unit mmu-unit-dark-theme' : 'mmu-unit mmu-unit-light-theme'">
+        <div :class="unitClasses(index)">
           <mmu-unit
             :unit-index="index"
             :edit-gate-map="editGateMap"
             :edit-gate-selected="editGateSelected"
             :show-context-menu="showContextMenu"
+            :show-details="showDetails"
+            :hide-bypass="hideBypass"
+            @select-gate="selectGate"
+            @edit-filament="editFilament"
+          />
+        </div>
+      </v-col>
+      <v-col
+        v-if="showStandaloneBypass && !hideBypass"
+        key="bypass"
+        cols="auto"
+      >
+        <div :class="unitClasses(-1)">
+          <mmu-unit
+            :unit-index="-1"
+            :edit-gate-map="false"
+            :show-context-menu="showContextMenu"
+            :show-details="false"
+            :show-footer="false"
             @select-gate="selectGate"
           />
         </div>
@@ -42,30 +61,64 @@ export default class MmuMachine extends Mixins(StateMixin, MmuMixin) {
   @Prop({ required: false, default: true })
   readonly showContextMenu!: boolean
 
+  @Prop({ required: false, default: true })
+  readonly showDetails!: boolean
+
+  @Prop({ required: false, default: false })
+  readonly hideBypass!: boolean
+
   get unitArray (): number[] {
     return Array.from({ length: this.numUnits }, (_, k) => k)
   }
 
+  unitClasses (index: number) {
+    return {
+      'mmu-unit': true,
+      'mmu-unit-dark-theme': this.$vuetify.theme.dark,
+      'mmu-unit-light-theme': !this.$vuetify.theme.dark,
+      'mmu-unit-clear': index < 0
+    }
+  }
+
+  get showStandaloneBypass () {
+    for (let i = 0; i < this.numUnits; i++) {
+      if (this.unitDetails(i).hasBypass) return false
+    }
+    return true
+  }
+
   private selectGate (gate: number) {
     this.$emit('select-gate', gate)
   }
+
+  private editFilament (gate: number) {
+    this.$emit('edit-filament', gate)
+  }
 }
 </script>
 
 <style scoped>
 .mmu-unit {
+    overflow: hidden;
     margin-left: 4px;
     margin-right: 4px;
     padding-left: 16px;
     padding-right: 16px;
-    border-radius: 10px 10px 10px 10px;
+    border-radius: 32px 32px 8px 8px;
 }
 
 .mmu-unit-light-theme {
     background: #f0f0f0;
+    box-shadow: inset 0px 4px 2px -4px #2c2c2c80;
 }
 
 .mmu-unit-dark-theme {
     background: #2c2c2c;
+    box-shadow: inset 0px 4px 4px -4px #ffffff80;
+}
+
+.mmu-unit-clear {
+    background: none !important;
+    box-shadow: none !important;
 }
 </style>

src/components/widgets/mmu/MmuSettings.vue

@@ -98,6 +98,17 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+
+      <v-list-item @click="showClimate = !showClimate">
+        <v-list-item-action class="my-0">
+          <v-checkbox :input-value="showClimate" />
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ $t('app.mmu.setting.show_climate') }}
+          </v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
     </v-list>
   </v-menu>
 </template>
@@ -193,6 +204,18 @@ export default class MmuSettings extends Mixins(StateMixin, MmuMixin) {
     })
   }
 
+  get showClimate (): boolean {
+    return this.$typedState.config.uiSettings.mmu.showClimate
+  }
+
+  set showClimate (value: boolean) {
+    this.$typedDispatch('config/saveByPath', {
+      path: 'uiSettings.mmu.showClimate',
+      value,
+      server: true
+    })
+  }
+
   get hasSyncFeedback (): boolean {
     return this.hasFilamentCompressionSensor || this.hasFilamentTensionSensor || this.hasFilamentProportionalSensor
   }