Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-05-20 13:16:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

add nzbget service widget

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"@tailwindcss/forms": "^0.5.2",
"dockerode": "^3.3.3",
"js-yaml": "^4.1.0",
"json-rpc-2.0": "^1.3.0",
"memory-cache": "^0.2.0",
"next": "12.2.5",
"node-os-utils": "^1.3.7",

6
pnpm-lock.yaml generated
View File

@ -8,6 +8,7 @@ specifiers:
eslint: 8.22.0
eslint-config-next: 12.2.5
js-yaml: ^4.1.0
json-rpc-2.0: ^1.3.0
memory-cache: ^0.2.0
next: 12.2.5
node-os-utils: ^1.3.7
@ -25,6 +26,7 @@ dependencies:
'@tailwindcss/forms': 0.5.2_tailwindcss@3.1.8
dockerode: 3.3.3
js-yaml: 4.1.0
json-rpc-2.0: 1.3.0
memory-cache: 0.2.0
next: 12.2.5_biqbaboplfbrettd7655fr4n2y
node-os-utils: 1.3.7
@ -1489,6 +1491,10 @@ packages:
dependencies:
argparse: 2.0.1
/json-rpc-2.0/1.3.0:
resolution: {integrity: sha512-pA85D9LG4B+b8njdb8DzktltNfGPcxGJJydEg6jRqePfwhK008lRdbX7bco6aokfw9oDFw7fEe+LRxxXwP11HA==}
dev: false
/json-schema-traverse/0.4.1:
resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
dev: true

2
src/components/services/widget.jsx
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 }) {

85
src/components/services/widgets/nzbget.jsx Normal file
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>
);
}