Feature: Spoolman Widget (#3959)
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>pull/4321/head
parent
4a3a4c846e
commit
94bbcbe1fb
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Spoolman
|
||||
description: Spoolman Widget Configuration
|
||||
---
|
||||
|
||||
Learn more about [Spoolman](https://github.com/Donkie/Spoolman).
|
||||
|
||||
4 spools are displayed by default. If more than 4 spools are configured in spoolman you can use the spoolIds configuration option to control which are displayed.
|
||||
|
||||
```yaml
|
||||
widget:
|
||||
type: spoolman
|
||||
url: http://spoolman.host.or.ip
|
||||
spoolIds: [1, 2, 3, 4] # optional
|
||||
```
|
@ -0,0 +1,63 @@
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Container from "components/services/widget/container";
|
||||
import Block from "components/services/widget/block";
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
const { widget } = service;
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools");
|
||||
|
||||
if (spoolError) {
|
||||
return <Container service={service} error={spoolError} />;
|
||||
}
|
||||
|
||||
if (!spoolData) {
|
||||
const nBlocksGuess = widget.spoolIds?.length ?? 4;
|
||||
return (
|
||||
<Container service={service}>
|
||||
{[...Array(nBlocksGuess)].map((_, i) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<Block key={i} label="spoolman.loading" />
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (spoolData.error || spoolData.message) {
|
||||
return <Container service={service} error={spoolData?.error ?? spoolData} />;
|
||||
}
|
||||
|
||||
if (spoolData.length === 0) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block label="spoolman.noSpools" />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.spoolIds?.length) {
|
||||
spoolData = spoolData.filter((spool) => widget.spoolIds.includes(spool.id));
|
||||
}
|
||||
|
||||
if (spoolData.length > 4) {
|
||||
spoolData = spoolData.slice(0, 4);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container service={service}>
|
||||
{spoolData.map((spool) => (
|
||||
<Block
|
||||
key={spool.id}
|
||||
label={spool.filament.name}
|
||||
value={t("common.percent", {
|
||||
value: (spool.remaining_weight / spool.initial_weight) * 100,
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
|
||||
|
||||
const widget = {
|
||||
api: "{url}/api/v1/{endpoint}",
|
||||
proxyHandler: credentialedProxyHandler,
|
||||
|
||||
mappings: {
|
||||
spools: {
|
||||
endpoint: "spool",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default widget;
|
Loading…
Reference in new issue