diff --git a/src/widgets/useNet/UseNetTile.tsx b/src/widgets/useNet/UseNetTile.tsx index 8bb003478..494df5132 100644 --- a/src/widgets/useNet/UseNetTile.tsx +++ b/src/widgets/useNet/UseNetTile.tsx @@ -46,11 +46,13 @@ 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 = diff --git a/src/widgets/useNet/UsenetHistoryList.tsx b/src/widgets/useNet/UsenetHistoryList.tsx index f5e4a3e17..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); @@ -81,50 +81,49 @@ export const UsenetHistoryList: FunctionComponent = ({ a } return ( - <> - - - - - - + +
{t('modules/usenet:history.header.name')}{t('modules/usenet:history.header.size')}
+ + + + + {durationBreakpoint < width ? ( + + ) : null} + + + + {data.items.map((history) => ( + + + {durationBreakpoint < width ? ( - + ) : null} - - - {data.items.map((history) => ( - - - - {durationBreakpoint < width ? ( - - ) : null} - - ))} - -
{t('modules/usenet:history.header.name')}{t('modules/usenet:history.header.size')}{t('modules/usenet:history.header.duration')}
+ + + {history.name} + + + + {humanFileSize(history.size)} + {t('modules/usenet:history.header.duration')} + {parseDuration(history.time, t)} +
- - - {history.name} - - - - {humanFileSize(history.size)} - - {parseDuration(history.time, t)} -
-
+ ))} + + {totalPages > 1 && ( = ({ a onChange={setPage} /> )} - + ); }; diff --git a/src/widgets/useNet/UsenetQueueList.tsx b/src/widgets/useNet/UsenetQueueList.tsx index 4ad919692..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,7 +40,7 @@ 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({ @@ -85,103 +87,102 @@ export const UsenetQueueList: FunctionComponent = ({ appId ); } + // TODO: Set ScollArea dynamic height based on the widget size return ( - <> - - - - - + +
- {t('queue.header.name')}
+ + + + {sizeBreakpoint < width ? ( + + ) : null} + + {progressBreakpoint < width ? ( + + ) : null} + + + + {data.items.map((nzb) => ( + + + {sizeBreakpoint < width ? ( - + ) : null} - + {progressBreakpoint < width ? ( - + ) : null} - - - {data.items.map((nzb) => ( - - - - {sizeBreakpoint < width ? ( - - ) : null} - - {progressBreakpoint < width ? ( - - ) : null} - - ))} - -
+ {t('queue.header.name')}{t('queue.header.size')}{t('queue.header.eta')} width ? 100 : 200 }}> + {t('queue.header.progress')} +
+ {nzb.state === 'paused' ? ( + + + + + + ) : ( + + + + + + )} + + + + {nzb.name} + + + {t('queue.header.size')} + {humanFileSize(nzb.size)} + {t('queue.header.eta')} + {nzb.eta <= 0 ? ( + + {t('queue.paused')} + + ) : ( + {dayjs.duration(nzb.eta, 's').format('H:mm:ss')} + )} + width ? 100 : 200 }}> - {t('queue.header.progress')} - + + {nzb.progress.toFixed(1)}% + + {width > progressbarBreakpoint ? ( + 0 ? theme.primaryColor : 'lightgrey'} + value={nzb.progress} + size="lg" + style={{ width: '100%' }} + /> + ) : null} +
- {nzb.state === 'paused' ? ( - - - - - - ) : ( - - - - - - )} - - - - {nzb.name} - - - - {humanFileSize(nzb.size)} - - {nzb.eta <= 0 ? ( - - {t('queue.paused')} - - ) : ( - {dayjs.duration(nzb.eta, 's').format('H:mm:ss')} - )} - - - {nzb.progress.toFixed(1)}% - - {width > progressbarBreakpoint ? ( - 0 ? theme.primaryColor : 'lightgrey'} - value={nzb.progress} - size="lg" - style={{ width: '100%' }} - /> - ) : null} -
-
+ ))} + + {totalPages > 1 && ( )} - + ); };