From 49451311f88d9005865d351169036a68ed134dc6 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Wed, 2 Apr 2025 12:58:07 +0100
Subject: [PATCH] feat(Spoolman): spool progress indicator in card

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../widgets/spoolman/SpoolmanCard.vue         | 32 +++++++++++++++----
 src/store/spoolman/getters.ts                 |  3 ++
 src/store/spoolman/types.ts                   |  1 +
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/widgets/spoolman/SpoolmanCard.vue b/src/components/widgets/spoolman/SpoolmanCard.vue
index f5185eb0c3..8c2aa8c828 100644
--- a/src/components/widgets/spoolman/SpoolmanCard.vue
+++ b/src/components/widgets/spoolman/SpoolmanCard.vue
@@ -93,7 +93,7 @@
 
     <v-progress-linear
       v-if="activeSpool && $vuetify.breakpoint.lgAndDown"
-      value="100"
+      :value="activeSpool.progress"
       :height="6"
       :color="getSpoolColor(activeSpool)"
     />
@@ -160,14 +160,23 @@
           align-self="center"
           class="pa-0"
         >
-          <v-icon
+          <v-progress-circular
             v-if="activeSpool"
-            :color="getSpoolColor(activeSpool)"
-            size="110"
-            class="spool-icon"
+            :rotate="-90"
+            :size="102"
+            :width="7"
+            :value="activeSpool.progress"
+            color="primary"
+            class="mr-4 flex-column"
           >
-            $filament
-          </v-icon>
+            <v-icon
+              :color="getSpoolColor(activeSpool)"
+              size="100"
+              class="spool-icon"
+            >
+              $filament
+            </v-icon>
+          </v-progress-circular>
           <v-icon
             v-else-if="isConnected"
             size="55"
@@ -184,6 +193,15 @@
         </v-col>
       </v-row>
     </v-card-text>
+
+    <template #collapsed-content>
+      <v-progress-linear
+        v-if="activeSpool"
+        :value="activeSpool.progress"
+        :height="6"
+        :color="getSpoolColor(activeSpool)"
+      />
+    </template>
   </collapsable-card>
 </template>
 
diff --git a/src/store/spoolman/getters.ts b/src/store/spoolman/getters.ts
index fb85139245..c8edeff09e 100644
--- a/src/store/spoolman/getters.ts
+++ b/src/store/spoolman/getters.ts
@@ -43,6 +43,9 @@ const spoolmanSpoolAsSpool = (spool: SpoolmanSpool): Spool => {
     initial_length: initial_weight != null
       ? filamentWeightToLength(initial_weight, filament)
       : undefined,
+    progress: !!initial_weight && spool.used_weight != null
+      ? (initial_weight - spool.used_weight) / initial_weight * 100
+      : undefined,
     filament,
   })
 }
diff --git a/src/store/spoolman/types.ts b/src/store/spoolman/types.ts
index 94c52f215f..c3c3543a12 100644
--- a/src/store/spoolman/types.ts
+++ b/src/store/spoolman/types.ts
@@ -83,6 +83,7 @@ export interface Spool extends Omit<SpoolmanSpool, 'registered' | 'filament' | '
   first_used?: Date;
   last_used?: Date;
   initial_length?: number;
+  progress?: number;
 }
 
 export interface Filament extends Omit<SpoolmanFilament, 'registered' | 'vendor' | 'multi_color_hexes'> {