feat(afc): Enhance Spoolman integration in AFC widgets

src/components/widgets/afc/AfcCardUnitLaneBody.vue

@@ -21,9 +21,26 @@
             </span>
           </template>
           <span>
-            #{{ spoolId }} | {{ spoolVendor }}
+            <strong>ID #{{ spoolId }}</strong>
             <br>
-            {{ spoolFilamentName }}
+            <template v-if="spoolFilamentVendor">{{ spoolFilamentVendor }} — </template>{{ spoolFilamentName }}
+            <template v-if="spoolMaterial">
+              <br>
+              {{ spoolMaterial }}
+              <template v-if="spoolExtruderTemp">
+                | {{ spoolExtruderTemp }}°C
+              </template>
+              <template v-if="spoolBedTemp">
+                | {{ spoolBedTemp }}°C
+              </template>
+            </template>
+            <template v-if="spoolRemainingWeight != null">
+              <br>
+              {{ $t('app.afc.WeightRemaining', { weight: Math.round(spoolRemainingWeight) }) }}
+              <template v-if="spoolUsedWeight != null">
+                ({{ $t('app.afc.WeightUsed', { weight: Math.round(spoolUsedWeight) }) }})
+              </template>
+            </template>
           </span>
         </v-tooltip>
         <afc-unit-lane-filament-dialog
@@ -56,7 +73,8 @@
           {{ spoolMaterial }}
         </span>
         <span class="text--disabled">
-          {{ spoolRemainingWeightOutput }}
+          <template v-if="spoolRemainingWeight != null">{{ Math.round(spoolRemainingWeight) }} g</template>
+          <template v-else>--</template>
         </span>
         <v-tooltip
           v-if="tdPresent"
@@ -84,9 +102,17 @@
     >
       <v-col class="px-6 pt-1">
         <div class="position-relative pb-4">
-          <span class="position-absolute text-truncate text-truncate-element text-center">
-            {{ spoolFilamentName }}
-          </span>
+          <a
+            v-if="spoolUrl"
+            :href="spoolUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="position-absolute text-truncate text-truncate-element text-center text-decoration-none filament-link"
+          >{{ spoolFilamentName }}</a>
+          <span
+            v-else
+            class="position-absolute text-truncate text-truncate-element text-center"
+          >{{ spoolFilamentName }}</span>
         </div>
       </v-col>
     </v-row>
@@ -147,39 +173,51 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
     return this.lane?.color || '#000000'
   }
 
-  get spoolRemainingWeight (): number {
-    if (this.afcExistsSpoolman && this.spool?.remaining_weight != null) {
-      return Math.round(this.spool.remaining_weight)
-    }
-    return Math.round(this.lane?.weight ?? 0)
-  }
-
-  get spoolRemainingWeightOutput (): string {
-    return `${this.spoolRemainingWeight} g`
+  get spoolRemainingWeight (): number | undefined {
+    return this.spool?.remaining_weight ?? this.lane?.weight
   }
 
-  get spoolFullWeight (): number {
-    return this.spool?.initial_weight ?? 1000
+  get spoolFullWeight (): number | undefined {
+    return this.spool?.initial_weight ?? this.lane?.initial_weight
   }
 
   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)
   }
 
   get spoolMaterial (): string {
-    return this.lane?.material || '--'
+    return this.spool?.filament?.material ?? this.lane?.material ?? ''
+  }
+
+  get spoolFilamentVendor (): string | undefined {
+    return this.spool?.filament?.vendor?.name
+  }
+
+  get spoolFilamentName (): string | undefined {
+    return this.spool?.filament?.name ||
+      this.lane?.filament_name ||
+      undefined
+  }
+
+  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}`
   }
 
-  get spoolVendor (): string {
-    return this.spool?.filament?.vendor?.name ?? this.$t('app.afc.Unknown').toString()
+  get spoolExtruderTemp (): number | undefined {
+    return this.spool?.filament?.settings_extruder_temp
   }
 
-  get spoolFilamentName (): string {
-    return this.afcExistsSpoolman
-      ? this.spool?.filament?.name ?? this.$t('app.afc.Unknown').toString()
-      : ''
+  get spoolBedTemp (): number | undefined {
+    return this.spool?.filament?.settings_bed_temp
+  }
+
+  get spoolUsedWeight (): number | undefined {
+    return this.spool?.used_weight
   }
 
   get tdPresent (): boolean {
@@ -246,4 +284,8 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
 .position-relative {
     position: relative !important;
 }
+
+.filament-link {
+  color: inherit !important;
+}
 </style>

src/locales/en.yaml

@@ -86,9 +86,10 @@ app:
     ShowTd1Color: "Show TD-1 Color"
     Unloading: "Unloading"
     UnloadLane: "Unload Lane"
-    Unknown: "Unknown"
     Weight: "Weight"
+    WeightRemaining: "{weight} g remaining"
     WeightSubtitle: "The weight of the filament in grams (without spool)."
+    WeightUsed: "{weight} g used"
   bedmesh:
     label:
       active: active

src/typings/klipper.d.ts

@@ -815,9 +815,11 @@ declare namespace Klipper {
     density?: number;
     diameter?: number;
     empty_spool_weight?: number;
+    initial_weight?: number;
     spool_id: number | null;
     color: string | null;
     weight: number;
+    filament_name?: string;
     extruder_temp: number | null;
     runout_lane: string | null;
     filament_status: 'In Tool' | 'Ready' | 'Prep' | 'Not Ready';