diff --git a/docs/widgets/services/spoolman.md b/docs/widgets/services/spoolman.md index da26b498be02..9e330fac7caa 100644 --- a/docs/widgets/services/spoolman.md +++ b/docs/widgets/services/spoolman.md @@ -5,11 +5,13 @@ description: Spoolman Widget Configuration Learn more about [Spoolman](https://github.com/Donkie/Spoolman). -Keep track of your inventory of 3D-printer filament spools. -Spoolman is a self-hosted web service designed to help you efficiently manage your 3D printer filament spools and monitor their usage. It acts as a centralized database that seamlessly integrates with popular 3D printing software like OctoPrint and Klipper/Moonraker. When connected, it automatically updates spool weights as printing progresses, giving you real-time insights into filament usage. +4 spools are displayed by default. If more than 4 spools are configured in spoolman you can use the filamentNames configuration option to filter for spools by their filament name. ```yaml widget: type: spoolman url: http://spoolman.host.or.ip + filamentNames: + - orange + - blue ``` diff --git a/src/widgets/spoolman/component.jsx b/src/widgets/spoolman/component.jsx index e502d079a6d5..bfc57f9a807a 100644 --- a/src/widgets/spoolman/component.jsx +++ b/src/widgets/spoolman/component.jsx @@ -10,10 +10,22 @@ export default function Component({ service }) { const { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools"); + // Helper to handle filtering based on filamentNames + const filterSpools = (data, filamentNames) => { + if (!filamentNames || filamentNames.length === 0) return data; // No filtering if no filamentNames + const limitedfilamentNames = filamentNames.slice(0, 4); // Limit to 4 names + return data.filter(spool => limitedfilamentNames.includes(spool.filament.name)); + }; + + // Helper to limit spoolData length + const limitSpoolData = (data, limit = 4) => (data.length > limit ? data.slice(0, limit) : data); + + // Error handling if (spoolError) { return ; } + // Loading state if (!spoolData) { return ( @@ -23,17 +35,34 @@ export default function Component({ service }) { ); } + // API error or unexpected response if (spoolData.error || spoolData.message) { return ; } + // No spools available + if (spoolData.length === 0) { + return ( + + + + ); + } + + // Filter and limit spools + let filteredSpoolData = filterSpools(spoolData, widget.filamentNames); + filteredSpoolData = limitSpoolData(filteredSpoolData); + + // Render filtered and limited spools return ( - {spoolData.map((spool) => ( + {filteredSpoolData.map((spool) => ( ))}