Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-16 10:16:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix overflowing torrent module issue and added updated last text

Browse Source
This commit is contained in:
Manuel Ruwe
2023-01-03 21:13:53 +01:00
parent 831e671956
commit 501714113f
2 changed files with 41 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/widgets/bitTorrent/BitTorrentTile.tsx
View File

@@ -1,6 +1,7 @@
import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent';
import { NormalizedTorrent } from '@ctrl/shared-torrent';
import {
Center,
Flex,
Group,
Loader,
ScrollArea,
@@ -12,6 +13,9 @@ import {
} from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { IconFileDownload } from '@tabler/icons';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useTranslation } from 'next-i18next';
import { useEffect, useState } from 'react';
import { useConfigContext } from '../../config/provider';
@@ -21,6 +25,9 @@ import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
import { BitTorrrentQueueItem } from './BitTorrentQueueItem';
dayjs.extend(duration);
dayjs.extend(relativeTime);
const downloadAppTypes: AppIntegrationType['type'][] = ['deluge', 'qBittorrent', 'transmission'];
const definition = defineWidget({
@@ -62,7 +69,9 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
[];
const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
const { data, isFetching, isError } = useGetTorrentData({ appId: selectedAppId! });
const { data, isError, isInitialLoading, dataUpdatedAt } = useGetTorrentData({
appId: selectedAppId!,
});
useEffect(() => {
if (!selectedAppId && downloadApps.length) {
@@ -92,7 +101,7 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
);
}
if (isFetching) {
if (isInitialLoading) {
return (
<Stack align="center">
<Loader />
@@ -124,26 +133,35 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
return true;
};
const difference = new Date().getTime() - dataUpdatedAt;
const duration = dayjs.duration(difference, 'ms');
const humanizedDuration = duration.humanize();
return (
<ScrollArea sx={{ height: 300, width: '100%' }}>
<Table highlightOnHover p="sm">
<thead>
<tr>
<th>{t('card.table.header.name')}</th>
<th>{t('card.table.header.size')}</th>
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
<th>{t('card.table.header.progress')}</th>
</tr>
</thead>
<tbody>
{data.filter(filter).map((item: NormalizedTorrent, index: number) => (
<BitTorrrentQueueItem key={index} torrent={item} />
))}
</tbody>
</Table>
</ScrollArea>
<Flex direction="column" sx={{ height: '100%' }}>
<ScrollArea sx={{ height: '100%', width: '100%' }}>
<Table highlightOnHover p="sm">
<thead>
<tr>
<th>{t('card.table.header.name')}</th>
<th>{t('card.table.header.size')}</th>
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
{width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
<th>{t('card.table.header.progress')}</th>
</tr>
</thead>
<tbody>
{data.filter(filter).map((item: NormalizedTorrent, index: number) => (
<BitTorrrentQueueItem key={index} torrent={item} />
))}
</tbody>
</Table>
</ScrollArea>
<Text color="dimmed" size="xs">
Last updated {humanizedDuration} ago
</Text>
</Flex>
);
}