add nzbget service widget

This commit is contained in:
Ben Phelps 2022-08-25 02:48:52 +03:00
parent d54561cec9
commit 33cf69964a
4 changed files with 94 additions and 0 deletions

View file

@ -3,6 +3,7 @@ import Radarr from "./widgets/radarr";
import Ombi from "./widgets/ombi";
import Portainer from "./widgets/portainer";
import Emby from "./widgets/emby";
import Nzbget from "./widgets/nzbget";
const widgetMappings = {
sonarr: Sonarr,
@ -10,6 +11,7 @@ const widgetMappings = {
ombi: Ombi,
portainer: Portainer,
emby: Emby,
nzbget: Nzbget,
};
export default function Widget({ service }) {

View file

@ -0,0 +1,85 @@
import useSWR from "swr";
import { JSONRPCClient } from "json-rpc-2.0";
import { formatBytes } from "utils/stats-helpers";
export default function Nzbget({ service }) {
const config = service.widget;
const constructedUrl = new URL(config.url);
constructedUrl.pathname = "jsonrpc";
const client = new JSONRPCClient((jsonRPCRequest) =>
fetch(constructedUrl.toString(), {
method: "POST",
headers: {
"content-type": "application/json",
authorization: `Basic ${btoa(`${config.username}:${config.password}`)}`,
},
body: JSON.stringify(jsonRPCRequest),
}).then(async (response) => {
if (response.status === 200) {
const jsonRPCResponse = await response.json();
return client.receive(jsonRPCResponse);
} else if (jsonRPCRequest.id !== undefined) {
return Promise.reject(new Error(response.statusText));
}
})
);
const { data: statusData, error: statusError } = useSWR(
"status",
(resource) => {
return client.request(resource).then((response) => response);
},
{
refreshInterval: 1000,
}
);
if (statusError) {
return (
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">Nzbget API Error</div>
</div>
);
}
if (!statusData) {
return (
<div className="flex flex-row w-full">
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">-</div>
<div className="font-bold text-xs">RATE</div>
</div>
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">-</div>
<div className="font-bold text-xs">REMAINING</div>
</div>
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">-</div>
<div className="font-bold text-xs">DOWNLOADED</div>
</div>
</div>
);
}
console.log(statusData);
return (
<div className="flex flex-row w-full">
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">{formatBytes(statusData.DownloadRate)}/s</div>
<div className="font-bold text-xs">RATE</div>
</div>
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">{Math.round((statusData.RemainingSizeMB / 1024) * 100) / 100} GB</div>
<div className="font-bold text-xs">REMAINING</div>
</div>
<div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
<div className="font-thin text-sm">{Math.round((statusData.DownloadedSizeMB / 1024) * 100) / 100} GB</div>
<div className="font-bold text-xs">DOWNLOADED</div>
</div>
</div>
);
}