feat: add native filaman widget

src/api/filamanActions.ts

@@ -0,0 +1,76 @@
+import Vue from 'vue'
+import type { NotifyOptions } from '@/plugins/socketClient'
+import { consola } from 'consola'
+
+const baseEmit = async <T = unknown>(method: string, options: NotifyOptions): Promise<T> => {
+  if (!Vue.$socket) {
+    consola.warn('Socket emit denied, socket not ready.', method, options)
+
+    throw new Error('Socket not ready')
+  } else {
+    const result = await Vue.$socket.emit(method, options)
+
+    return result as T
+  }
+}
+
+export const FilamanActions = {
+  getSpoolId (options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.SpoolIdResponse>(
+      'server.filaman.get_spool_id', {
+        dispatch: 'spoolman/onActiveSpool',
+        ...options
+      }
+    )
+  },
+
+  getSpoolIds (options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.FilamanExtruderSpoolsResponse>(
+      'server.filaman.spool_ids', {
+        dispatch: 'spoolman/onExtruderSpoolsChanged',
+        ...options
+      }
+    )
+  },
+
+  postSpoolId (spoolId: number | undefined, extruder?: string, options?: NotifyOptions) {
+    const params: Record<string, unknown> = spoolId != null ? { spool_id: spoolId } : {}
+    if (extruder != null) params.extruder = extruder
+
+    return baseEmit<Moonraker.Spoolman.SpoolIdResponse>(
+      'server.filaman.post_spool_id', {
+        dispatch: extruder != null ? 'spoolman/onExtruderSpoolsChanged' : 'spoolman/onActiveSpool',
+        ...options,
+        params
+      }
+    )
+  },
+
+  repush (options?: NotifyOptions) {
+    return baseEmit<Moonraker.Spoolman.FilamanExtruderSpoolsResponse>(
+      'server.filaman.repush', {
+        dispatch: 'spoolman/onExtruderSpoolsChanged',
+        ...options
+      }
+    )
+  },
+
+  proxyGetAvailableSpools (page = 1, pageSize = 200, options?: NotifyOptions) {
+    const query = new URLSearchParams({
+      page: String(page),
+      page_size: String(pageSize)
+    }).toString()
+
+    return baseEmit<Moonraker.Spoolman.ProxyResponse<Moonraker.Spoolman.FilamanPaginatedResponse>>(
+      'server.filaman.proxy', {
+        ...options,
+        params: {
+          request_method: 'GET',
+          path: '/api/v1/spools',
+          query,
+          use_v2_response: true
+        }
+      }
+    )
+  }
+}

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')
+      ? this.$t('app.filaman.title.filaman').toString()
+      : 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,8 +18,9 @@
         />
       </app-setting>
 
-      <v-divider />
+      <v-divider v-if="supportsQRCodeScanSettings" />
       <app-setting
+        v-if="supportsQRCodeScanSettings"
         :title="$tc('app.spoolman.setting.auto_open_qr_camera')"
       >
         <v-select
@@ -32,8 +33,9 @@
         />
       </app-setting>
 
-      <v-divider />
+      <v-divider v-if="supportsQRCodeScanSettings" />
       <app-setting
+        v-if="supportsQRCodeScanSettings"
         :title="$t('app.spoolman.setting.prefer_device_camera')"
       >
         <v-switch
@@ -43,8 +45,9 @@
         />
       </app-setting>
 
-      <v-divider />
+      <v-divider v-if="supportsQRCodeScanSettings" />
       <app-setting
+        v-if="supportsQRCodeScanSettings"
         :title="$t('app.spoolman.setting.auto_select_spool_on_match')"
       >
         <v-switch
@@ -135,6 +138,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')
+      ? this.$t('app.filaman.title.filaman').toString()
+      : 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
   }