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

✨Add useNet tile

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-11 16:06:41 +01:00
parent c2571190f6
commit bbc02f38c1
13 changed files with 426 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/modules/usenet/UsenetHistoryList.tsx
View File

@@ -1,133 +0,0 @@
import {
Alert,
Center,
Code,
Group,
Pagination,
Skeleton,
Table,
Text,
Title,
Tooltip,
} from '@mantine/core';
import { IconAlertCircle } from '@tabler/icons';
import { AxiosError } from 'axios';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { useTranslation } from 'next-i18next';
import { FunctionComponent, useState } from 'react';
import { useGetUsenetHistory } from '../../tools/hooks/api';
import { humanFileSize } from '../../tools/humanFileSize';
import { parseDuration } from '../../tools/parseDuration';
dayjs.extend(duration);
interface UsenetHistoryListProps {
serviceId: string;
}
const PAGE_SIZE = 10;
export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
const [page, setPage] = useState(1);
const { t } = useTranslation(['modules/usenet', 'common']);
const { data, isLoading, isError, error } = useGetUsenetHistory({
limit: PAGE_SIZE,
offset: (page - 1) * PAGE_SIZE,
serviceId,
});
const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
if (isLoading) {
return (
<>
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
</>
);
}
if (isError) {
return (
<Group position="center">
<Alert
icon={<IconAlertCircle size={16} />}
my="lg"
title={t('modules/usenet:history.error.title')}
color="red"
radius="md"
>
{t('modules/usenet:history.error.message')}
<Code mt="sm" block>
{(error as AxiosError)?.response?.data as string}
</Code>
</Alert>
</Group>
);
}
if (!data || data.items.length <= 0) {
return (
<Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Title order={3}>{t('modules/usenet:history.empty')}</Title>
</Center>
);
}
return (
<>
<Table highlightOnHover style={{ tableLayout: 'fixed' }}>
<colgroup>
<col span={1} />
<col span={1} style={{ width: 100 }} />
<col span={1} style={{ width: 200 }} />
</colgroup>
<thead>
<tr>
<th>{t('modules/usenet:history.header.name')}</th>
<th>{t('modules/usenet:history.header.size')}</th>
<th>{t('modules/usenet:history.header.duration')}</th>
</tr>
</thead>
<tbody>
{data.items.map((history) => (
<tr key={history.id}>
<td>
<Tooltip position="top" label={history.name}>
<Text
size="xs"
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{history.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{humanFileSize(history.size)}</Text>
</td>
<td>
<Text size="xs">{parseDuration(history.time, t)}</Text>
</td>
</tr>
))}
</tbody>
</Table>
{totalPages > 1 && (
<Pagination
size="sm"
position="center"
mt="md"
total={totalPages}
page={page}
onChange={setPage}
/>
)}
</>
);
};

4
src/modules/usenet/UsenetModule.tsx
View File

@@ -17,11 +17,11 @@ import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { useElementSize } from '@mantine/hooks';
import { IModule } from '../ModuleTypes';
import { UsenetQueueList } from './UsenetQueueList';
import { UsenetHistoryList } from './UsenetHistoryList';
import { UsenetQueueList } from '../../components/Dashboard/Tiles/UseNet/UsenetQueueList';
import { useGetServiceByType } from '../../tools/hooks/useGetServiceByType';
import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
import { humanFileSize } from '../../tools/humanFileSize';
import { UsenetHistoryList } from '../../components/Dashboard/Tiles/UseNet/UsenetHistoryList';
dayjs.extend(duration);

167
src/modules/usenet/UsenetQueueList.tsx
View File

@@ -1,167 +0,0 @@
import {
ActionIcon,
Alert,
Center,
Code,
Group,
Pagination,
Progress,
Skeleton,
Table,
Text,
Title,
Tooltip,
useMantineTheme,
} from '@mantine/core';
import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
import { AxiosError } from 'axios';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { useTranslation } from 'next-i18next';
import { FunctionComponent, useState } from 'react';
import { useGetUsenetDownloads } from '../../tools/hooks/api';
import { humanFileSize } from '../../tools/humanFileSize';
dayjs.extend(duration);
interface UsenetQueueListProps {
serviceId: string;
}
const PAGE_SIZE = 10;
export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ serviceId }) => {
const theme = useMantineTheme();
const { t } = useTranslation('modules/usenet');
const [page, setPage] = useState(1);
const { data, isLoading, isError, error } = useGetUsenetDownloads({
limit: PAGE_SIZE,
offset: (page - 1) * PAGE_SIZE,
serviceId,
});
const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);
if (isLoading) {
return (
<>
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
<Skeleton height={40} mt={10} />
</>
);
}
if (isError) {
return (
<Group position="center">
<Alert
icon={<IconAlertCircle size={16} />}
my="lg"
title={t('queue.error.title')}
color="red"
radius="md"
>
{t('queue.error.message')}
<Code mt="sm" block>
{(error as AxiosError)?.response?.data as string}
</Code>
</Alert>
</Group>
);
}
if (!data || data.items.length <= 0) {
return (
<Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Title order={3}>{t('queue.empty')}</Title>
</Center>
);
}
return (
<>
<Table highlightOnHover style={{ tableLayout: 'fixed' }}>
<thead>
<tr>
<th style={{ width: 50 }} />
<th style={{ width: '75%' }}>{t('queue.header.name')}</th>
<th style={{ width: 100 }}>{t('queue.header.size')}</th>
<th style={{ width: 100 }}>{t('queue.header.eta')}</th>
<th style={{ width: 200 }}>{t('queue.header.progress')}</th>
</tr>
</thead>
<tbody>
{data.items.map((nzb) => (
<tr key={nzb.id}>
<td>
{nzb.state === 'paused' ? (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="gray" variant="subtle" radius="xl" size="sm">
<IconPlayerPlay size="16" />
</ActionIcon>
</Tooltip>
) : (
<Tooltip label="NOT IMPLEMENTED">
<ActionIcon color="primary" variant="subtle" radius="xl" size="sm">
<IconPlayerPause size="16" />
</ActionIcon>
</Tooltip>
)}
</td>
<td>
<Tooltip position="top" label={nzb.name}>
<Text
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
size="xs"
color={nzb.state === 'paused' ? 'dimmed' : undefined}
>
{nzb.name}
</Text>
</Tooltip>
</td>
<td>
<Text size="xs">{humanFileSize(nzb.size)}</Text>
</td>
<td>
{nzb.eta <= 0 ? (
<Text size="xs" color="dimmed">
{t('queue.paused')}
</Text>
) : (
<Text size="xs">{dayjs.duration(nzb.eta, 's').format('H:mm:ss')}</Text>
)}
</td>
<td style={{ display: 'flex', alignItems: 'center' }}>
<Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
{nzb.progress.toFixed(1)}%
</Text>
<Progress
radius="lg"
color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
value={nzb.progress}
size="lg"
style={{ width: '100%' }}
/>
</td>
</tr>
))}
</tbody>
</Table>
{totalPages > 1 && (
<Pagination
size="sm"
position="center"
mt="md"
total={totalPages}
page={page}
onChange={setPage}
/>
)}
</>
);
};

20
src/modules/usenet/types.ts
View File

@@ -1,20 +0,0 @@
export interface UsenetQueueItem {
name: string;
progress: number;
/**
* Size in bytes
*/
size: number;
id: string;
state: 'paused' | 'downloading' | 'queued';
eta: number;
}
export interface UsenetHistoryItem {
name: string;
/**
* Size in bytes
*/
size: number;
id: string;
time: number;
}