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

Address PR comments

Browse Source
This commit is contained in:
ajnart
2022-11-22 18:15:37 +09:00
parent 3d7449d871
commit fb78736a83
2 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/modules/docker/DockerTable.tsx
View File

@@ -1,4 +1,4 @@
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, useMantineTheme } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons';
import Dockerode from 'dockerode';
@@ -24,6 +24,7 @@ export default function DockerTable({
containers: Dockerode.ContainerInfo[];
selection: Dockerode.ContainerInfo[];
}) {
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
const { classes, cx } = useStyles();
const [search, setSearch] = useState('');
@@ -69,8 +70,8 @@ export default function DockerTable({
/>
</td>
<td>{element.Names[0].replace('/', '')}</td>
{width > 576 ? <td>{element.Image}</td> : null}
{width > 576 ? (
{width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
{width > MIN_WIDTH_MOBILE && (
<td>
<Group>
{element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -92,7 +93,7 @@ export default function DockerTable({
)}
</Group>
</td>
) : null}
)}
<td>
<ContainerState state={element.State} />
</td>
@@ -123,8 +124,8 @@ export default function DockerTable({
/>
</th>
<th>{t('table.header.name')}</th>
{width > 576 ? <th>{t('table.header.image')}</th> : null}
{width > 576 ? <th>{t('table.header.ports')}</th> : null}
{width > MIN_WIDTH_MOBILE ? <th>{t('table.header.image')}</th> : null}
{width > MIN_WIDTH_MOBILE ? <th>{t('table.header.ports')}</th> : null}
<th>{t('table.header.state')}</th>
</tr>
</thead>

22
src/modules/torrents/TorrentsModule.tsx
View File

@@ -9,6 +9,7 @@ import {
ScrollArea,
Center,
Stack,
useMantineTheme,
} from '@mantine/core';
import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react';
@@ -23,8 +24,6 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
import { humanFileSize } from '../../tools/humanFileSize';
const MIM_WIDTH_MOBILE = 576;
export const TorrentsModule: IModule = {
id: 'torrents-status',
title: 'Torrent',
@@ -54,6 +53,7 @@ export default function TorrentsComponent() {
const setSafeInterval = useSetSafeInterval();
const [isLoading, setIsLoading] = useState(true);
const { ref, width, height } = useElementSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const { t } = useTranslation(`modules/${TorrentsModule.id}`);
@@ -114,9 +114,9 @@ export default function TorrentsComponent() {
<tr ref={ref}>
<th>{t('card.table.header.name')}</th>
<th>{t('card.table.header.size')}</th>
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</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>
);
@@ -161,25 +161,21 @@ export default function TorrentsComponent() {
<td>
<Text size="xs">{humanFileSize(size)}</Text>
</td>
{width > 576 ? (
{width > MIN_WIDTH_MOBILE && (
<td>
<Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
) : (
''
)}
{width > 576 ? (
{width > MIN_WIDTH_MOBILE && (
<td>
<Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td>
) : (
''
)}
{width > 576 ? (
{width > MIN_WIDTH_MOBILE && (
<td>
<Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
</td>
) : null}
)}
<td>
<Text>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress