feat: add native filaman widget

src/api/socketActions.ts

@@ -1068,6 +1068,15 @@ export const SocketActions = {
     )
   },
 
+  serverFilamanGetSpoolId (options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.SpoolIdResponse>(
+      'server.filaman.get_spool_id', {
+        dispatch: 'spoolman/onActiveSpool',
+        ...options
+      }
+    )
+  },
+
   serverSpoolmanPostSpoolId (spoolId: number | undefined, options?: NotifyOptions) {
     return baseEmit<Moonraker.Spoolman.SpoolIdResponse>(
       'server.spoolman.post_spool_id', {
@@ -1080,6 +1089,18 @@ export const SocketActions = {
     )
   },
 
+  serverFilamanPostSpoolId (spoolId: number | undefined, options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.SpoolIdResponse>(
+      'server.filaman.post_spool_id', {
+        dispatch: 'spoolman/onActiveSpool',
+        ...options,
+        params: {
+          spool_id: spoolId
+        }
+      }
+    )
+  },
+
   serverSpoolmanProxyGetAvailableSpools (options?: NotifyOptions) {
     return baseEmit<Moonraker.Spoolman.ProxyResponse<Moonraker.Spoolman.Spool[]>>(
       'server.spoolman.proxy', {
@@ -1094,6 +1115,20 @@ export const SocketActions = {
     )
   },
 
+  serverFilamanProxyGetAvailableSpools (page = 1, pageSize = 200, options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.ProxyResponse<Moonraker.Spoolman.FilamanPaginatedResponse>>(
+      'server.filaman.proxy', {
+        ...options,
+        params: {
+          request_method: 'GET',
+          path: '/api/v1/spools',
+          query: `page=${page}&page_size=${pageSize}`,
+          use_v2_response: true
+        }
+      }
+    )
+  },
+
   serverSpoolmanProxyGetInfo (options?: NotifyOptions) {
     return baseEmit<Moonraker.Spoolman.ProxyResponse<Moonraker.Spoolman.Info>>(
       'server.spoolman.proxy', {

src/components/layout/AppSettingsNav.vue

@@ -48,11 +48,17 @@ export default class AppSettingsNav extends Vue {
       { name: this.$t('app.setting.title.gcode_preview'), hash: '#gcodePreview', visible: true },
       { name: this.$t('app.general.title.timelapse'), hash: '#timelapse', visible: this.supportsTimelapse },
       { name: this.$t('app.mmu.title.headline'), hash: '#mmu', visible: this.supportsMmu },
-      { name: this.$t('app.spoolman.title.spoolman'), hash: '#spoolman', visible: this.supportsSpoolman },
+      { name: this.spoolTrackingSettingsTitle, hash: '#spoolman', visible: this.supportsSpoolTracking },
       { name: this.$t('app.version.title'), hash: '#versions', visible: this.supportsVersions }
     ]
   }
 
+  get spoolTrackingSettingsTitle (): string {
+    return this.$typedGetters['server/componentSupport']('filaman')
+      ? 'FilaMan'
+      : this.$t('app.spoolman.title.spoolman').toString()
+  }
+
   get supportsVersions (): boolean {
     return this.$typedGetters['server/componentSupport']('update_manager')
   }
@@ -61,8 +67,11 @@ export default class AppSettingsNav extends Vue {
     return this.$typedGetters['server/componentSupport']('timelapse')
   }
 
-  get supportsSpoolman (): boolean {
-    return this.$typedGetters['server/componentSupport']('spoolman')
+  get supportsSpoolTracking (): boolean {
+    return (
+      this.$typedGetters['server/componentSupport']('spoolman') ||
+      this.$typedGetters['server/componentSupport']('filaman')
+    )
   }
 
   get supportsMmu (): boolean {

src/components/settings/SpoolmanSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-subheader id="spoolman">
-      {{ $t('app.spoolman.title.spoolman') }}
+      {{ headingTitle }}
     </v-subheader>
     <v-card
       :elevation="5"
@@ -18,41 +18,43 @@
         />
       </app-setting>
 
-      <v-divider />
-      <app-setting
-        :title="$tc('app.spoolman.setting.auto_open_qr_camera')"
-      >
-        <v-select
-          v-model="autoOpenQRDetectionCameraId"
-          filled
-          dense
-          single-line
-          hide-details="auto"
-          :items="supportedCameras"
-        />
-      </app-setting>
+      <template v-if="supportsQRCodeScanSettings">
+        <v-divider />
+        <app-setting
+          :title="$tc('app.spoolman.setting.auto_open_qr_camera')"
+        >
+          <v-select
+            v-model="autoOpenQRDetectionCameraId"
+            filled
+            dense
+            single-line
+            hide-details="auto"
+            :items="supportedCameras"
+          />
+        </app-setting>
 
-      <v-divider />
-      <app-setting
-        :title="$t('app.spoolman.setting.prefer_device_camera')"
-      >
-        <v-switch
-          v-model="preferDeviceCamera"
-          hide-details
-          class="mt-0 mb-4"
-        />
-      </app-setting>
+        <v-divider />
+        <app-setting
+          :title="$t('app.spoolman.setting.prefer_device_camera')"
+        >
+          <v-switch
+            v-model="preferDeviceCamera"
+            hide-details
+            class="mt-0 mb-4"
+          />
+        </app-setting>
 
-      <v-divider />
-      <app-setting
-        :title="$t('app.spoolman.setting.auto_select_spool_on_match')"
-      >
-        <v-switch
-          v-model="autoSelectSpoolOnMatch"
-          hide-details
-          class="mt-0 mb-4"
-        />
-      </app-setting>
+        <v-divider />
+        <app-setting
+          :title="$t('app.spoolman.setting.auto_select_spool_on_match')"
+        >
+          <v-switch
+            v-model="autoSelectSpoolOnMatch"
+            hide-details
+            class="mt-0 mb-4"
+          />
+        </app-setting>
+      </template>
 
       <v-divider />
       <app-setting
@@ -135,6 +137,16 @@ import type { SpoolmanRemainingFilamentUnit } from '@/store/config/types'
   components: {}
 })
 export default class SpoolmanSettings extends Mixins(StateMixin) {
+  get headingTitle (): string {
+    return this.$typedGetters['server/componentSupport']('filaman')
+      ? 'FilaMan'
+      : this.$t('app.spoolman.title.spoolman').toString()
+  }
+
+  get supportsQRCodeScanSettings (): boolean {
+    return !this.$typedGetters['server/componentSupport']('filaman')
+  }
+
   get autoSpoolSelectionDialog (): boolean {
     return this.$typedState.config.uiSettings.spoolman.autoSpoolSelectionDialog
   }

src/components/widgets/afc/AfcCardUnitLaneBody.vue

@@ -113,9 +113,9 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
   readonly name!: string
 
   showInfintiyDialog = false
-  showSpoolmanDialog = false
+  showSpoolTrackingDialog = false
   showFilamentDialog = false
-  spoolmanSelection = false
+  spoolTrackingSelection = false
 
   get lane (): Klipper.AfcLaneState | undefined {
     return this.getAfcLaneObject(this.name)
@@ -174,7 +174,7 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
   }
 
   get spoolFilamentName (): string {
-    return this.afcExistsSpoolman
+    return this.afcHasSpoolTracking
       ? this.spool?.filament?.name ?? this.$t('app.afc.Unknown').toString()
       : ''
   }
@@ -192,7 +192,7 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
   }
 
   handleSelectSpool () {
-    this.spoolmanSelection = true
+    this.spoolTrackingSelection = true
     this.$typedCommit('spoolman/setDialogState', {
       show: true,
       spoolSelectionOnly: true,
@@ -201,12 +201,12 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
   }
 
   @Watch('$typedState.spoolman.dialog')
-  onSpoolmanChanged (dialog: SpoolSelectionDialogState) {
+  onSpoolTrackingDialogChanged (dialog: SpoolSelectionDialogState) {
     if (
       !dialog.show &&
-      this.spoolmanSelection
+      this.spoolTrackingSelection
     ) {
-      this.spoolmanSelection = false
+      this.spoolTrackingSelection = false
 
       if (dialog.selectedSpoolId !== this.spoolId) {
         this.sendGcode(`SET_SPOOL_ID LANE=${this.name} SPOOL_ID=${dialog.selectedSpoolId ?? ''}`)
@@ -215,7 +215,7 @@ export default class AfcCardUnitLaneBody extends Mixins(StateMixin, AfcMixin) {
   }
 
   onFilamentClick () {
-    if (this.afcExistsSpoolman) {
+    if (this.afcHasSpoolTracking) {
       this.handleSelectSpool()
       return
     }