feat(AFC): Adding AFC print dialog

src/App.vue

@@ -75,6 +75,7 @@
         <bed-screws-adjust-dialog />
         <screws-tilt-adjust-dialog />
         <mmu-edit-ttg-map-dialog />
+        <afc-print-start-dialog />
       </template>
     </v-main>
 
@@ -105,6 +106,7 @@ import ActionCommandPromptDialog from '@/components/common/ActionCommandPromptDi
 import KeyboardShortcutsDialog from '@/components/common/KeyboardShortcutsDialog.vue'
 import { eventTargetIsContentEditable, keyboardEventToKeyboardShortcut } from '@/util/event-helpers'
 import MmuEditTtgMapDialog from './components/widgets/mmu/MmuEditTtgMapDialog.vue'
+import AfcPrintStartDialog from './components/widgets/afc/dialogs/AfcPrintStartDialog.vue'
 
 @Component<App>({
   metaInfo () {
@@ -120,7 +122,8 @@ import MmuEditTtgMapDialog from './components/widgets/mmu/MmuEditTtgMapDialog.vu
     FileSystemUploadDialog,
     ActionCommandPromptDialog,
     KeyboardShortcutsDialog,
-    MmuEditTtgMapDialog
+    MmuEditTtgMapDialog,
+    AfcPrintStartDialog
   }
 })
 export default class App extends Mixins(StateMixin, FilesMixin, BrowserMixin) {

src/components/widgets/afc/AfcCardUnitLaneBody.vue

@@ -122,7 +122,7 @@
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import AfcMixin from '@/mixins/afc'
-import type { Spool, SpoolSelectionDialogState } from '@/store/spoolman/types'
+import type { SpoolSelectionDialogState } from '@/store/spoolman/types'
 import AfcUnitLaneInfiniteDialog from '@/components/widgets/afc/dialogs/AfcUnitLaneInfiniteDialog.vue'
 import AfcUnitLaneFilamentDialog from '@/components/widgets/afc/dialogs/AfcUnitLaneFilamentDialog.vue'
 import AfcFilamentReel from './AfcFilamentReel.vue'
@@ -151,73 +151,60 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
     return this.lane?.runout_lane ?? 'NONE'
   }
 
-  get spoolId (): number | undefined {
-    return this.lane?.spool_id ?? undefined
+  get laneInfo (): Klipper.AfcSpoolLaneInfo {
+    return this.getAfcLaneInfo(this.name)
   }
 
-  get spool (): Spool | null {
-    if (!this.spoolId) return null
+  get spoolId (): number | undefined {
+    return this.laneInfo.spoolId
+  }
 
-    return this.$typedGetters['spoolman/getSpoolById'](this.spoolId) ?? null
+  get spool () {
+    return this.laneInfo.spool
   }
 
   get spoolColor (): string {
-    if (
-      this.afc?.td1_present &&
-      this.lane?.td1_color &&
-      this.afcShowTd1Color
-    ) {
-      return `#${this.lane.td1_color}`
-    }
-
-    return this.lane?.color || '#000000'
+    return this.laneInfo.color
   }
 
   get spoolRemainingWeight (): number | undefined {
-    return this.spool?.remaining_weight ?? this.lane?.weight
+    return this.laneInfo.remainingWeight
   }
 
   get spoolFullWeight (): number | undefined {
-    return this.spool?.initial_weight ?? this.lane?.initial_weight
+    return this.laneInfo.fullWeight
   }
 
   get spoolPercent (): number {
-    if (this.spoolRemainingWeight == null || this.spoolFullWeight == null) return 100
-    if (this.spoolFullWeight === 0) return 100
-
-    return Math.round((this.spoolRemainingWeight / this.spoolFullWeight) * 100)
+    return this.laneInfo.spoolPercent
   }
 
   get spoolMaterial (): string {
-    return this.spool?.filament?.material ?? this.lane?.material ?? ''
+    return this.laneInfo.material
   }
 
   get spoolFilamentVendor (): string | undefined {
-    return this.spool?.filament?.vendor?.name
+    return this.laneInfo.filamentVendor
   }
 
   get spoolFilamentName (): string | undefined {
-    return this.spool?.filament?.name ||
-      this.lane?.filament_name ||
-      undefined
+    return this.laneInfo.filamentName
   }
 
   get spoolUrl (): string | undefined {
-    const base: string | undefined = this.$typedGetters['spoolman/getSpoolmanUrl']
-    if (!base || !this.spoolId) return undefined
-    return `${base.replace(/\/$/, '')}/spool/show/${this.spoolId}`
+    return this.laneInfo.spoolUrl
   }
 
   get spoolExtruderTemp (): number | undefined {
-    return this.spool?.filament?.settings_extruder_temp
+    return this.laneInfo.extruderTemp
   }
 
   get spoolBedTemp (): number | undefined {
-    return this.spool?.filament?.settings_bed_temp
+    return this.laneInfo.bedTemp
   }
 
   get spoolUsedWeight (): number | undefined {
-    return this.spool?.used_weight
+    return this.laneInfo.usedWeight
   }
 
   get tdPresent (): boolean {

src/components/widgets/afc/dialogs/AfcPrintStartDialog.vue

@@ -0,0 +1,163 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.afc.PrintStartDialog.Title')"
+    width="600"
+    :save-button-text="$t('app.general.btn.print')"
+    @save="handlePrint"
+  >
+    <!-- Thumbnail preview -->
+    <div
+      v-if="thumbnailUrl"
+      class="d-flex align-center justify-center thumbnail-container"
+    >
+      <v-img
+        :src="thumbnailUrl"
+        :max-width="thumbnailWidth"
+        contain
+        class="thumbnail-preview"
+      />
+    </div>
+
+    <!-- Filename subtitle -->
+    <v-card-title class="text-h5">
+      {{ $t('app.afc.PrintStartDialog.StartJob') }}
+    </v-card-title>
+    <v-card-text class="pb-1 pt-3 px-4">
+      <span class="text-body-2 text--secondary text-truncate d-block">
+        {{ question }}
+      </span>
+    </v-card-text>
+
+    <v-divider />
+
+    <!-- Tool rows -->
+    <v-card-text class="pa-0">
+      <afc-print-start-dialog-tool
+        v-for="(toolIndex, index) in usedTools"
+        :key="toolIndex"
+        :file="currentFile"
+        :tool-index="toolIndex"
+        :class="{ 'border-top': index > 0 }"
+      />
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import AfcMixin from '@/mixins/afc'
+import FilesMixin from '@/mixins/files'
+import { SocketActions } from '@/api/socketActions'
+import getFilePaths from '@/util/get-file-paths'
+import type { AppFileWithMeta } from '@/store/files/types'
+@Component({
+  components: {
+    AfcPrintStartDialogTool: () => import('./AfcPrintStartDialogTool.vue')
+  }
+})
+export default class AfcPrintStartDialog extends Mixins(StateMixin, AfcMixin, FilesMixin) {
+  get open (): boolean {
+    return this.$typedState.afc.dialog.show
+  }
+
+  set open (val: boolean) {
+    this.$typedCommit('afc/setDialogState', {
+      ...this.$typedState.afc.dialog,
+      show: val
+    })
+  }
+
+  get filename (): string | undefined {
+    return this.$typedState.afc.dialog.filename
+  }
+
+  get currentFile (): AppFileWithMeta | undefined {
+    if (!this.filename) return undefined
+
+    const { filename, rootPath } = getFilePaths(this.filename, 'gcodes')
+    return this.$typedGetters['files/getFile'](rootPath, filename)
+  }
+
+  get shortFilename (): string {
+    if (!this.filename) return ''
+    return getFilePaths(this.filename, 'gcodes').filename
+  }
+
+  get activeSpool () {
+    return this.$typedGetters['spoolman/getActiveSpool']
+  }
+
+  get question (): string {
+    if (this.activeSpool) {
+      return this.$t('app.afc.PrintStartDialog.QuestionWithSpool', {
+        filename: this.shortFilename
+      }).toString()
+    }
+
+    return this.$t('app.afc.PrintStartDialog.Question', {
+      filename: this.shortFilename
+    }).toString()
+  }
+
+  get thumbnailUrl (): string {
+    if (!this.currentFile || !this.filename) return ''
+
+    const { path } = getFilePaths(this.filename, 'gcodes')
+    return this.getThumbUrl(this.currentFile, 'gcodes', path, true, this.currentFile.modified)
+  }
+
+  get thumbnailWidth (): number {
+    const thumb = this.currentFile?.thumbnails?.reduce((a, b) => (a.size > b.size ? a : b))
+    return thumb?.width ?? 400
+  }
+
+  get usedTools (): number[] {
+    const filamentWeights: number[] = this.currentFile?.filament_weights ?? []
+
+    return filamentWeights.reduce<number[]>((tools, weight, index) => {
+      if (weight > 0) tools.push(index)
+      return tools
+    }, [])
+  }
+
+  handlePrint () {
+    if (this.filename) {
+      SocketActions.printerPrintStart(this.filename)
+
+      if (this.$route.name !== 'home') {
+        this.$router.push({ name: 'home' })
+      }
+    }
+    this.open = false
+  }
+
+  @Watch('open')
+  onOpenChange (val: boolean) {
+    if (val && this.filename && this.currentFile == null) {
+      SocketActions.serverFilesMetadata(this.filename)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.thumbnail-container {
+  background-color: rgba(0, 0, 0, 0.6);
+  max-height: 250px;
+  overflow: hidden;
+}
+
+.thumbnail-preview {
+  max-height: 250px;
+}
+
+.border-top {
+  border-top: thin solid rgba(255, 255, 255, 0.12);
+}
+
+.v-application.theme--light .border-top {
+  border-top: thin solid rgba(0, 0, 0, 0.12);
+}
+</style>