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

2
src/widgets/date/DateTile.tsx
View File

@@ -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 { IconClock } from '@tabler/icons';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';