-
+
(downloadApps[0]?.id);
- const { data, isFetching, isError } = useGetTorrentData({ appId: selectedAppId! });
+ const { data, isError, isInitialLoading, dataUpdatedAt } = useGetTorrentData({
+ appId: selectedAppId!,
+ refreshInterval: widget.properties.refreshInterval * 1000,
+ });
useEffect(() => {
if (!selectedAppId && downloadApps.length) {
@@ -92,9 +109,15 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
);
}
- if (isFetching) {
+ if (isInitialLoading) {
return (
-
+
{t('card.loading.title')}
@@ -124,26 +147,35 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
return true;
};
+ const difference = new Date().getTime() - dataUpdatedAt;
+ const duration = dayjs.duration(difference, 'ms');
+ const humanizedDuration = duration.humanize();
+
return (
-
-
-
-
- | {t('card.table.header.name')} |
- {t('card.table.header.size')} |
- {width > MIN_WIDTH_MOBILE && {t('card.table.header.download')} | }
- {width > MIN_WIDTH_MOBILE && {t('card.table.header.upload')} | }
- {width > MIN_WIDTH_MOBILE && {t('card.table.header.estimatedTimeOfArrival')} | }
- {t('card.table.header.progress')} |
-
-
-
- {data.filter(filter).map((item: NormalizedTorrent, index: number) => (
-
- ))}
-
-
-
+
+
+
+
+
+ | {t('card.table.header.name')} |
+ {t('card.table.header.size')} |
+ {width > MIN_WIDTH_MOBILE && {t('card.table.header.download')} | }
+ {width > MIN_WIDTH_MOBILE && {t('card.table.header.upload')} | }
+ {width > MIN_WIDTH_MOBILE && {t('card.table.header.estimatedTimeOfArrival')} | }
+ {t('card.table.header.progress')} |
+
+
+
+ {data.filter(filter).map((item: NormalizedTorrent, index: number) => (
+
+ ))}
+
+
+
+
+ Last updated {humanizedDuration} ago
+
+
);
}
diff --git a/src/widgets/dashDot/DashDotTile.tsx b/src/widgets/dashDot/DashDotTile.tsx
index 531a25313..fcf8271c1 100644
--- a/src/widgets/dashDot/DashDotTile.tsx
+++ b/src/widgets/dashDot/DashDotTile.tsx
@@ -54,9 +54,11 @@ function DashDotTile({ widget }: DashDotTileProps) {
const { classes } = useDashDotTileStyles();
const { t } = useTranslation('modules/dashdot');
- const dashDotUrl = widget?.properties.url;
+ const dashDotUrl = widget.properties.url;
- const { data: info } = useDashDotInfo({ dashDotUrl });
+ const { data: info } = useDashDotInfo({
+ dashDotUrl,
+ });
const graphs = widget?.properties.graphs.map((g) => ({
id: g,
@@ -112,6 +114,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => {
const { name: configName } = useConfigContext();
return useQuery({
+ refetchInterval: 50000,
queryKey: [
'dashdot/info',
{
diff --git a/src/widgets/date/DateTile.tsx b/src/widgets/date/DateTile.tsx
index 843dc2564..5e830a792 100644
--- a/src/widgets/date/DateTile.tsx
+++ b/src/widgets/date/DateTile.tsx
@@ -1,4 +1,4 @@
-import { Center, Stack, Text, Title } from '@mantine/core';
+import { Stack, Text, Title } from '@mantine/core';
import { IconClock } from '@tabler/icons';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
diff --git a/src/widgets/helper.ts b/src/widgets/helper.ts
index 1344584bb..238fd88a4 100644
--- a/src/widgets/helper.ts
+++ b/src/widgets/helper.ts
@@ -5,6 +5,4 @@ import { IWidgetDefinition } from './widgets';
// The options of IWidgetDefinition are so heavily typed that it even used 'true' as type
export const defineWidget = >(
options: TOptions
-) => {
- return options;
-};
+) => options;
diff --git a/src/widgets/useNet/UseNetTile.tsx b/src/widgets/useNet/UseNetTile.tsx
index 61182c37e..494df5132 100644
--- a/src/widgets/useNet/UseNetTile.tsx
+++ b/src/widgets/useNet/UseNetTile.tsx
@@ -46,16 +46,20 @@ const definition = defineWidget({
},
});
-export type IWeatherWidget = IWidget;
+export type IUsenetWidget = IWidget;
-interface UseNetTileProps {}
+interface UseNetTileProps {
+ widget: IUsenetWidget;
+}
-function UseNetTile({}: UseNetTileProps) {
+function UseNetTile({ widget }: UseNetTileProps) {
const { t } = useTranslation('modules/usenet');
const { config } = useConfigContext();
const downloadApps =
config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
[];
+ const { ref, width, height } = useElementSize();
+ const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const [selectedAppId, setSelectedApp] = useState(downloadApps[0]?.id);
const { data } = useGetUsenetInfo({ appId: selectedAppId! });
@@ -84,9 +88,6 @@ function UseNetTile({}: UseNetTileProps) {
return null;
}
- const { ref, width, height } = useElementSize();
- const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
-
return (
diff --git a/src/widgets/useNet/UsenetHistoryList.tsx b/src/widgets/useNet/UsenetHistoryList.tsx
index 119356dea..28ee10ccf 100644
--- a/src/widgets/useNet/UsenetHistoryList.tsx
+++ b/src/widgets/useNet/UsenetHistoryList.tsx
@@ -4,8 +4,8 @@ import {
Code,
Group,
Pagination,
- ScrollArea,
Skeleton,
+ Stack,
Table,
Text,
Title,
@@ -28,7 +28,7 @@ interface UsenetHistoryListProps {
appId: string;
}
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
export const UsenetHistoryList: FunctionComponent = ({ appId }) => {
const [page, setPage] = useState(1);
@@ -39,7 +39,7 @@ export const UsenetHistoryList: FunctionComponent = ({ a
const { data, isLoading, isError, error } = useGetUsenetHistory({
limit: PAGE_SIZE,
offset: (page - 1) * PAGE_SIZE,
- appId: appId,
+ appId,
});
const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
@@ -81,50 +81,49 @@ export const UsenetHistoryList: FunctionComponent = ({ a
}
return (
- <>
-
-
-
-
- | {t('modules/usenet:history.header.name')} |
- {t('modules/usenet:history.header.size')} |
+
+
+
+
+ | {t('modules/usenet:history.header.name')} |
+ {t('modules/usenet:history.header.size')} |
+ {durationBreakpoint < width ? (
+ {t('modules/usenet:history.header.duration')} |
+ ) : null}
+
+
+
+ {data.items.map((history) => (
+
+ |
+
+
+ {history.name}
+
+
+ |
+
+ {humanFileSize(history.size)}
+ |
{durationBreakpoint < width ? (
- {t('modules/usenet:history.header.duration')} |
+
+ {parseDuration(history.time, t)}
+ |
) : null}
-
-
- {data.items.map((history) => (
-
- |
-
-
- {history.name}
-
-
- |
-
- {humanFileSize(history.size)}
- |
- {durationBreakpoint < width ? (
-
- {parseDuration(history.time, t)}
- |
- ) : null}
-
- ))}
-
-
-
+ ))}
+
+
{totalPages > 1 && (
= ({ a
onChange={setPage}
/>
)}
-
+
);
};
diff --git a/src/widgets/useNet/UsenetQueueList.tsx b/src/widgets/useNet/UsenetQueueList.tsx
index 3138048ee..5fec4f842 100644
--- a/src/widgets/useNet/UsenetQueueList.tsx
+++ b/src/widgets/useNet/UsenetQueueList.tsx
@@ -1,6 +1,7 @@
import {
ActionIcon,
Alert,
+ Button,
Center,
Code,
Group,
@@ -8,6 +9,7 @@ import {
Progress,
ScrollArea,
Skeleton,
+ Stack,
Table,
Text,
Title,
@@ -30,7 +32,7 @@ interface UsenetQueueListProps {
appId: string;
}
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
export const UsenetQueueList: FunctionComponent = ({ appId }) => {
const theme = useMantineTheme();
@@ -38,13 +40,13 @@ export const UsenetQueueList: FunctionComponent = ({ appId
const progressbarBreakpoint = theme.breakpoints.xs;
const progressBreakpoint = 400;
const sizeBreakpoint = 300;
- const { ref, width, height } = useElementSize();
+ const { ref, width } = useElementSize();
const [page, setPage] = useState(1);
const { data, isLoading, isError, error } = useGetUsenetDownloads({
limit: PAGE_SIZE,
offset: (page - 1) * PAGE_SIZE,
- appId: appId,
+ appId,
});
const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
@@ -85,103 +87,102 @@ export const UsenetQueueList: FunctionComponent = ({ appId
);
}
+ // TODO: Set ScollArea dynamic height based on the widget size
return (
- <>
-
-
-
-
- |
- {t('queue.header.name')} |
+
+
+
+
+ |
+ {t('queue.header.name')} |
+ {sizeBreakpoint < width ? (
+ {t('queue.header.size')} |
+ ) : null}
+ {t('queue.header.eta')} |
+ {progressBreakpoint < width ? (
+ width ? 100 : 200 }}>
+ {t('queue.header.progress')}
+ |
+ ) : null}
+
+
+
+ {data.items.map((nzb) => (
+
+ |
+ {nzb.state === 'paused' ? (
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+ |
+
+
+
+ {nzb.name}
+
+
+ |
{sizeBreakpoint < width ? (
- {t('queue.header.size')} |
+
+ {humanFileSize(nzb.size)}
+ |
) : null}
- {t('queue.header.eta')} |
+
+ {nzb.eta <= 0 ? (
+
+ {t('queue.paused')}
+
+ ) : (
+ {dayjs.duration(nzb.eta, 's').format('H:mm:ss')}
+ )}
+ |
{progressBreakpoint < width ? (
- width ? 100 : 200 }}>
- {t('queue.header.progress')}
- |
+
+
+ {nzb.progress.toFixed(1)}%
+
+ {width > progressbarBreakpoint ? (
+ |
) : null}
-
-
- {data.items.map((nzb) => (
-
- |
- {nzb.state === 'paused' ? (
-
-
-
-
-
- ) : (
-
-
-
-
-
- )}
- |
-
-
-
- {nzb.name}
-
-
- |
- {sizeBreakpoint < width ? (
-
- {humanFileSize(nzb.size)}
- |
- ) : null}
-
- {nzb.eta <= 0 ? (
-
- {t('queue.paused')}
-
- ) : (
- {dayjs.duration(nzb.eta, 's').format('H:mm:ss')}
- )}
- |
- {progressBreakpoint < width ? (
-
-
- {nzb.progress.toFixed(1)}%
-
- {width > progressbarBreakpoint ? (
- |
- ) : null}
-
- ))}
-
-
-
+ ))}
+
+
{totalPages > 1 && (
)}
-
+
);
};
diff --git a/src/widgets/widgets.d.ts b/src/widgets/widgets.d.ts
index 729ed2e07..19e41ed12 100644
--- a/src/widgets/widgets.d.ts
+++ b/src/widgets/widgets.d.ts
@@ -1,6 +1,5 @@
-import { IconSun, TablerIcon } from '@tabler/icons';
+import { TablerIcon } from '@tabler/icons';
import React from 'react';
-import { BaseTileProps } from '../components/Dashboard/Tiles/type';
// Type of widgets which are safed to config
export type IWidget = {
@@ -32,6 +31,7 @@ export type IWidgetOptionValue =
| IMultiSelectOptionValue
| ISwitchOptionValue
| ITextInputOptionValue
+ | ISliderInputOptionValue
| INumberInputOptionValue;
// will show a multi-select with specified data
@@ -56,7 +56,16 @@ export type ITextInputOptionValue = {
// will show a number-input
export type INumberInputOptionValue = {
type: 'number';
- defaultValue: string;
+ defaultValue: number;
+};
+
+// will show a slider-input
+export type ISliderInputOptionValue = {
+ type: 'slider';
+ defaultValue: number;
+ min: number;
+ max: number;
+ step: number;
};
// is used to type the widget definitions which will be used to display all widgets
|