fluidd-core
diff --git a/‎src/components/settings/GeneralSettings.vue
Copy file name to clipboard
+3-2Lines changed: 3 additions & 2 deletions b/‎src/components/settings/GeneralSettings.vue
Copy file name to clipboard
+3-2Lines changed: 3 additions & 2 deletions
diff --git a/‎src/components/settings/SpoolmanSettings.vue
Copy file name to clipboard
+5-1Lines changed: 5 additions & 1 deletion b/‎src/components/settings/SpoolmanSettings.vue
Copy file name to clipboard
+5-1Lines changed: 5 additions & 1 deletion
diff --git a/‎src/components/widgets/spoolman/QRReader.vue
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎src/components/widgets/spoolman/QRReader.vue
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/widgets/spoolman/SpoolSelectionDialog.vue
Copy file name to clipboard
+106-34Lines changed: 106 additions & 34 deletions b/‎src/components/widgets/spoolman/SpoolSelectionDialog.vue
Copy file name to clipboard
+106-34Lines changed: 106 additions & 34 deletions
diff --git a/‎src/components/widgets/spoolman/SpoolmanCard.vue
Copy file name to clipboard
+16-14Lines changed: 16 additions & 14 deletions b/‎src/components/widgets/spoolman/SpoolmanCard.vue
Copy file name to clipboard
+16-14Lines changed: 16 additions & 14 deletions
diff --git a/‎src/components/widgets/toolhead/ToolChangeCommands.vue
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎src/components/widgets/toolhead/ToolChangeCommands.vue
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/locales/en.yaml
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/‎src/locales/en.yaml
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
@@ -284,6 +284,7 @@ import consola from 'consola'
 import { readFileAsTextAsync } from '@/util/file-system-entry'
 import { EventBus } from '@/eventBus'
 import { isFluiddContent, toFluiddContent } from '@/util/fluidd-content'
+import { getAllLocales } from '@/plugins/i18n'
 
 @Component({
   components: {}
@@ -336,7 +337,7 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     return Object.entries(DateFormats)
       .map(([key, entry]) => ({
         value: key,
-        text: `${date.toLocaleDateString(entry.locales ?? this.$filters.getAllLocales(), entry.options)}${entry.suffix ?? ''}`
+        text: `${date.toLocaleDateString(entry.locales ?? getAllLocales(), entry.options)}${entry.suffix ?? ''}`
       }))
   }
 
@@ -358,7 +359,7 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     return Object.entries(TimeFormats)
       .map(([key, entry]) => ({
         value: key,
-        text: `${date.toLocaleTimeString(entry.locales ?? this.$filters.getAllLocales(), entry.options)}${entry.suffix ?? ''}`
+        text: `${date.toLocaleTimeString(entry.locales ?? getAllLocales(), entry.options)}${entry.suffix ?? ''}`
       }))
   }
 
 
@@ -251,12 +251,16 @@ export default class SpoolmanSettings extends Mixins(StateMixin) {
       'lot_nr',
       'price',
       'density',
+      'diameter',
       'extruder_temp',
       'bed_temp',
       'first_used',
       'last_used',
       'comment'
-    ].map(field => ({ value: field, text: this.$t(`app.spoolman.label.${field}`) }))
+    ].map(field => ({
+      value: field,
+      text: this.$t(`app.spoolman.label.${field}`)
+    }))
   }
 
   get fieldsToShowInSpoolmanCard (): string[] {
 
@@ -131,7 +131,7 @@ export default class QRReader extends Mixins(StateMixin, BrowserMixin) {
   }
 
   get availableSpools (): Spool[] {
-    return this.$store.state.spoolman.availableSpools
+    return this.$store.getters['spoolman/getAvailableSpools']
   }
 
   handleCodeFound (code: string) {
 
@@ -2,7 +2,7 @@
   <app-dialog
     v-model="open"
     scrollable
-    :max-width="isMobileViewport ? '90vw' : '75vw'"
+    :max-width="$vuetify.breakpoint.mdAndDown ? '90vw' : '75vw'"
     :title="$tc('app.spoolman.title.spool_selection', targetMacro ? 2 : 1, { macro: targetMacro })"
     title-shadow
   >
@@ -94,7 +94,7 @@
       />
     </v-toolbar>
 
-    <v-card-text class="pa-0">
+    <v-card-text class="pa-0 file-system">
       <v-data-table
         :items="availableSpools"
         :headers="headers"
@@ -104,6 +104,7 @@
         :no-results-text="$t('app.file_system.msg.not_found')"
         :sort-by="sortOrder.key ?? undefined"
         :sort-desc="sortOrder.desc ?? undefined"
+        item-key="id"
         mobile-breakpoint="0"
         class="spool-table"
         hide-default-footer
@@ -122,7 +123,7 @@
             <template #[`item.filament_name`]>
               <div class="d-flex my-1">
                 <v-icon
-                  :color="`#${item.filament.color_hex ?? ($vuetify.theme.dark ? 'fff' : '000')}`"
+                  :color="getSpoolColor(item)"
                   size="42px"
                   class="mr-4 flex-column spool-icon"
                 >
@@ -135,24 +136,56 @@
                   <div class="flex-row">
                     <small v-if="remainingFilamentUnit === 'weight'">
                       <b>{{ $filters.getReadableWeightString(item.remaining_weight) }}</b>
-                      / {{ $filters.getReadableWeightString(item.filament.weight) }}
+                      / {{ $filters.getReadableWeightString(item.initial_weight) }}
                     </small>
                     <small v-else-if="remainingFilamentUnit === 'length'">
                       <b>{{ $filters.getReadableLengthString(item.remaining_length) }}</b>
-                      / {{ $filters.getReadableLengthString($filters.convertFilamentWeightToLength(item.filament.weight ?? 0, item.filament.density, item.filament.diameter)) }}
+                      / {{ $filters.getReadableLengthString(item.initial_length) }}
                     </small>
                   </div>
                 </div>
               </div>
             </template>
 
+            <template #[`item-value.price`]="{ value }">
+              {{ $filters.getReadableCurrencyString(value, currency ?? '') }}
+            </template>
+
+            <template #[`item-value.filament.density`]="{ value }">
+              {{ value }} g/cm³
+            </template>
+
+            <template #[`item-value.filament.diameter`]="{ value }">
+              {{ value }} mm
+            </template>
+
+            <template #[`item-value.filament.settings_extruder_temp`]="{ value }">
+              {{ value }}<small>°C</small>
+            </template>
+
+            <template #[`item-value.filament.settings_bed_temp`]="{ value }">
+              {{ value }}<small>°C</small>
+            </template>
+
+            <template #[`item.first_used`]="{ value }">
+              {{
+                value
+                  ? $filters.formatRelativeTimeToNow(value)
+                  : $tc('app.setting.label.never')
+              }}
+            </template>
+
             <template #[`item.last_used`]="{ value }">
               {{
                 value
                   ? $filters.formatRelativeTimeToNow(value)
                   : $tc('app.setting.label.never')
               }}
             </template>
+
+            <template #[`item-value.filament.colors`]="{ value }">
+              <app-data-table-cell-colors :colors="value" />
+            </template>
           </app-data-table-row>
         </template>
       </v-data-table>
@@ -270,49 +303,89 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
   }
 
   get availableSpools () {
-    const spools = []
-    const availableSpools: Spool[] = this.$store.state.spoolman.availableSpools
-
-    for (const spool of availableSpools) {
-      if (spool.archived) {
-        continue
-      }
+    const availableSpools: Spool[] = this.$store.getters['spoolman/getAvailableSpools']
 
-      const filamentName = spool.filament.vendor
-        ? `${spool.filament.vendor.name} - ${spool.filament.name}`
-        : spool.filament.name
-
-      spools.push({
-        ...spool,
-        filament_name: filamentName,
-        material: spool.filament.material
-      })
-    }
+    return availableSpools
+      .filter(x => !x.archived)
+  }
 
-    return spools
+  get currency (): string | null {
+    return this.$store.state.spoolman.currency
   }
 
   get configurableHeaders (): AppDataTableHeader[] {
     const headers: AppDataTableHeader[] = [
       {
         text: this.$tc('app.spoolman.label.id'),
-        value: 'id'
+        value: 'id',
+        cellClass: 'text-no-wrap'
       },
       {
         text: this.$tc('app.spoolman.label.material'),
-        value: 'material'
+        value: 'filament.material',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.price'),
+        value: 'price',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.lot_nr'),
+        value: 'lot_nr',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.density'),
+        value: 'filament.density',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.diameter'),
+        value: 'filament.diameter',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.extruder_temp'),
+        value: 'filament.settings_extruder_temp',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.bed_temp'),
+        value: 'filament.settings_bed_temp',
+        visible: false,
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.colors'),
+        value: 'filament.colors',
+        cellClass: 'text-no-wrap'
       },
       {
         text: this.$tc('app.spoolman.label.location'),
-        value: 'location'
+        value: 'location',
+        cellClass: 'text-no-wrap'
       },
       {
         text: this.$tc('app.spoolman.label.comment'),
-        value: 'comment'
+        value: 'comment',
+        cellClass: 'text-no-wrap'
+      },
+      {
+        text: this.$tc('app.spoolman.label.first_used'),
+        value: 'first_used',
+        visible: false,
+        cellClass: 'text-no-wrap'
       },
       {
         text: this.$tc('app.spoolman.label.last_used'),
-        value: 'last_used'
+        value: 'last_used',
+        cellClass: 'text-no-wrap'
       },
     ]
 
@@ -482,12 +555,7 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
             return
           }
         } else if (this.warnOnNotEnoughFilament) {
-          let remainingLength = spool.remaining_length
-          if (!remainingLength && spool.remaining_weight) {
-            remainingLength = this.$filters.convertFilamentWeightToLength(spool.remaining_weight, spool.filament.density, spool.filament.diameter)
-          }
-
-          if (typeof remainingLength === 'number' && requiredLength >= remainingLength) {
+          if (spool.remaining_length != null && requiredLength >= spool.remaining_length) {
             // not enough filament
 
             const confirmation = await this.$confirm(
@@ -564,5 +632,9 @@ export default class SpoolSelectionDialog extends Mixins(StateMixin, BrowserMixi
       server: true
     })
   }
+
+  getSpoolColor (spool?: Spool) {
+    return spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? '#fff' : '#000')
+  }
 }
 </script>
@@ -11,7 +11,7 @@
         small
         class="me-1 my-1"
         :disabled="!isConnected"
-        @click="() => handleSelectSpool()"
+        @click="handleSelectSpool"
       >
         {{ $t('app.spoolman.label.change_spool') }}
       </app-btn>
@@ -43,7 +43,7 @@
           </app-btn>
         </template>
         <v-list dense>
-          <v-list-item @click="() => handleSelectSpool()">
+          <v-list-item @click="handleSelectSpool">
             <v-list-item-content>
               <v-list-item-title>
                 {{ $t('app.spoolman.label.active_spool') }}
@@ -65,8 +65,10 @@
           <template v-for="macro of targetableMacros">
             <v-list-item
               :key="macro.name"
-              :class="{primary: macro.variables?.active}"
-              @click="() => handleSelectSpool(macro)"
+              :class="{
+                primary: macro.variables?.active
+              }"
+              @click="handleSelectSpool(macro)"
             >
               <v-list-item-content>
                 <v-list-item-title>
@@ -94,7 +96,7 @@
       v-if="activeSpool && $vuetify.breakpoint.lgAndDown"
       value="100"
       :height="6"
-      :color="`#${activeSpool.filament.color_hex ?? ($vuetify.theme.dark ? 'fff' : '000')}`"
+      :color="getSpoolColor(activeSpool)"
     />
 
     <v-card-text>
@@ -114,22 +116,22 @@
                 <template v-if="field === 'remaining_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
                     {{ $filters.getReadableWeightString(activeSpool.remaining_weight) }}
-                    <small>/ {{ $filters.getReadableWeightString(activeSpool.filament.weight) }}</small>
+                    <small>/ {{ $filters.getReadableWeightString(activeSpool.initial_weight) }}</small>
                   </span>
                   <span v-else-if="remainingFilamentUnit === 'length'">
                     {{ $filters.getReadableLengthString(activeSpool.remaining_length) }}
-                    <small>/ {{ $filters.getReadableLengthString($filters.convertFilamentWeightToLength(activeSpool.filament.weight ?? 0, activeSpool.filament.density, activeSpool.filament.diameter)) }}</small>
+                    <small>/ {{ $filters.getReadableLengthString(activeSpool.initial_length) }}</small>
                   </span>
                 </template>
 
                 <template v-else-if="field === 'used_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
                     {{ $filters.getReadableWeightString(activeSpool.used_weight) }}
-                    <small>/ {{ $filters.getReadableWeightString(activeSpool.filament.weight) }}</small>
+                    <small>/ {{ $filters.getReadableWeightString(activeSpool.initial_weight) }}</small>
                   </span>
                   <span v-else-if="remainingFilamentUnit === 'length'">
                     {{ $filters.getReadableLengthString(activeSpool.used_length) }}
-                    <small>/ {{ $filters.getReadableLengthString($filters.convertFilamentWeightToLength(activeSpool.filament.weight ?? 0, activeSpool.filament.density, activeSpool.filament.diameter)) }}</small>
+                    <small>/ {{ $filters.getReadableLengthString(activeSpool.initial_length) }}</small>
                   </span>
                 </template>
 
@@ -248,7 +250,7 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
   }
 
   getSpoolColor (spool?: Spool) {
-    return `#${spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? 'fff' : '000')}`
+    return spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? '#fff' : '#000')
   }
 
   getFormattedField (field: string) {
@@ -271,14 +273,14 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
         return this.activeSpool.last_used ? this.$filters.formatRelativeTimeToNow(this.activeSpool.last_used) : this.$tc('app.setting.label.never')
 
       case 'price':
-        return [
-          this.activeSpool.filament.price?.toFixed(2),
-          this.currency
-        ].filter(x => x != null).join(' ') || '-'
+        return this.activeSpool.price != null ? this.$filters.getReadableCurrencyString(this.activeSpool.price, this.currency ?? '') : '-'
 
       case 'density':
         return this.activeSpool.filament.density || '-'
 
+      case 'diameter':
+        return this.activeSpool.filament.diameter ? this.$filters.getReadableLengthString(this.activeSpool.filament.diameter) : '-'
+
       case 'extruder_temp':
         return this.activeSpool.filament.settings_extruder_temp || '-'
 
 
@@ -118,7 +118,7 @@ export default class ToolChangeCommands extends Mixins(StateMixin) {
   }
 
   getSpoolColor (spool: Spool | undefined) {
-    return `#${spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? 'fff' : '000')}`
+    return spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? '#fff' : '#000')
   }
 }
 </script>
 
@@ -911,9 +911,11 @@ app:
       active_spool: Active Spool
       bed_temp: Bed Temp
       change_spool: Change Spool
+      colors: Colors
       comment: Comment
       density: Density
       device_camera: Device
+      diameter: Diameter
       extruder_temp: Extruder Temp
       filament_name: Filament
       first_used: First Used
Original file line number	Diff line number	Diff line change
`@@ -131,7 +131,7 @@ export default class QRReader extends Mixins(StateMixin, BrowserMixin) {`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`get availableSpools (): Spool[] {`
`134`		`- return this.$store.state.spoolman.availableSpools`
	`134`	`+ return this.$store.getters['spoolman/getAvailableSpools']`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`handleCodeFound (code: string) {`
Original file line number	Diff line number	Diff line change
`@@ -118,7 +118,7 @@ export default class ToolChangeCommands extends Mixins(StateMixin) {`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`getSpoolColor (spool: Spool \| undefined) {`
`121`		- return `#${spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? 'fff' : '000')}`
	`121`	`+ return spool?.filament.color_hex ?? (this.$vuetify.theme.dark ? '#fff' : '#000')`
`122`	`122`	`}`
`123`	`123`	`}`
`124`	`124`	`</script>`