Merge branch 'manuel-rw-gridstack' into gridstack-wip-meierschlumpf

2023-01-07 17:59:43 +01:00
parent 7c0cf6f4ec 8be8ca2215
commit b70399f4f0
56 changed files with 962 additions and 785 deletions
--- a/src/widgets/bitTorrent/BitTorrentQueueItem.tsx
+++ b/src/widgets/bitTorrent/BitTorrentQueueItem.tsx
@@ -18,7 +18,7 @@ export const BitTorrrentQueueItem = ({ torrent }: BitTorrentQueueItemProps) => {
  return (
    <tr key={torrent.id}>
      <td>
-        <Tooltip position="top" label={torrent.name}>
+        <Tooltip position="top" withinPortal label={torrent.name}>
          <Text
            style={{
              maxWidth: '30vw',
--- a/src/widgets/bitTorrent/BitTorrentTile.tsx
+++ b/src/widgets/bitTorrent/BitTorrentTile.tsx
@@ -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({
@@ -35,6 +42,13 @@ const definition = defineWidget({
      type: 'switch',
      defaultValue: true,
    },
+    refreshInterval: {
+      type: 'slider',
+      defaultValue: 1,
+      min: 1,
+      max: 60,
+      step: 1,
+    },
  },
  gridstack: {
    minWidth: 4,
@@ -62,7 +76,10 @@ 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!,
+    refreshInterval: widget.properties.refreshInterval * 1000,
+  });

  useEffect(() => {
    if (!selectedAppId && downloadApps.length) {
@@ -92,9 +109,15 @@ function BitTorrentTile({ widget }: BitTorrentTileProps) {
    );
  }

-  if (isFetching) {
+  if (isInitialLoading) {
    return (
-      <Stack align="center">
+      <Stack
+        align="center"
+        justify="center"
+        style={{
+          height: '100%',
+        }}
+      >
        <Loader />
        <Stack align="center" spacing={0}>
          <Text>{t('card.loading.title')}</Text>
@@ -124,26 +147,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>
  );
 }

--- a/src/widgets/dashDot/DashDotTile.tsx
+++ b/src/widgets/dashDot/DashDotTile.tsx
@@ -54,9 +54,11 @@ function DashDotTile({ widget }: DashDotTileProps) {
  const { classes } = useDashDotTileStyles();
  const { t } = useTranslation('modules/dashdot');

-  const dashDotUrl = widget?.properties.url;
+  const dashDotUrl = widget.properties.url;

-  const { data: info } = useDashDotInfo({ dashDotUrl });
+  const { data: info } = useDashDotInfo({
+    dashDotUrl,
+  });

  const graphs = widget?.properties.graphs.map((g) => ({
    id: g,
@@ -112,6 +114,7 @@ function DashDotTile({ widget }: DashDotTileProps) {
 const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => {
  const { name: configName } = useConfigContext();
  return useQuery({
+    refetchInterval: 50000,
    queryKey: [
      'dashdot/info',
      {
--- a/src/widgets/date/DateTile.tsx
+++ b/src/widgets/date/DateTile.tsx
@@ -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 dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
--- a/src/widgets/helper.ts
+++ b/src/widgets/helper.ts
@@ -5,6 +5,4 @@ import { IWidgetDefinition } from './widgets';
 // The options of IWidgetDefinition are so heavily typed that it even used 'true' as type
 export const defineWidget = <TKey extends string, TOptions extends IWidgetDefinition<TKey>>(
  options: TOptions
-) => {
-  return options;
-};
+) => options;
--- a/src/widgets/useNet/UseNetTile.tsx
+++ b/src/widgets/useNet/UseNetTile.tsx
@@ -46,16 +46,20 @@ const definition = defineWidget({
  },
 });

-export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
+export type IUsenetWidget = IWidget<typeof definition['id'], typeof definition>;

-interface UseNetTileProps {}
+interface UseNetTileProps {
+  widget: IUsenetWidget;
+}

-function UseNetTile({}: UseNetTileProps) {
+function UseNetTile({ widget }: UseNetTileProps) {
  const { t } = useTranslation('modules/usenet');
  const { config } = useConfigContext();
  const downloadApps =
    config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
    [];
+  const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;

  const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
  const { data } = useGetUsenetInfo({ appId: selectedAppId! });
@@ -84,9 +88,6 @@ function UseNetTile({}: UseNetTileProps) {
    return null;
  }

-  const { ref, width, height } = useElementSize();
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
-
  return (
    <Tabs keepMounted={false} defaultValue="queue">
      <Tabs.List ref={ref} mb="md" style={{ flex: 1 }} grow>
--- 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<UsenetHistoryListProps> = ({ appId }) => {
  const [page, setPage] = useState(1);
@@ -39,7 +39,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
  const { data, isLoading, isError, error } = useGetUsenetHistory({
    limit: PAGE_SIZE,
    offset: (page - 1) * PAGE_SIZE,
-    appId: appId,
+    appId,
  });
  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);

@@ -81,50 +81,49 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
  }

  return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
-        <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
-          <thead>
-            <tr>
-              <th>{t('modules/usenet:history.header.name')}</th>
-              <th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
+    <Stack justify="space-around" spacing="xs">
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
+        <thead>
+          <tr>
+            <th>{t('modules/usenet:history.header.name')}</th>
+            <th style={{ width: 100 }}>{t('modules/usenet:history.header.size')}</th>
+            {durationBreakpoint < width ? (
+              <th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
+            ) : null}
+          </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>
              {durationBreakpoint < width ? (
-                <th style={{ width: 200 }}>{t('modules/usenet:history.header.duration')}</th>
+                <td>
+                  <Text size="xs">{parseDuration(history.time, t)}</Text>
+                </td>
              ) : null}
            </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>
-                {durationBreakpoint < width ? (
-                  <td>
-                    <Text size="xs">{parseDuration(history.time, t)}</Text>
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </ScrollArea>
+          ))}
+        </tbody>
+      </Table>
      {totalPages > 1 && (
        <Pagination
+          noWrap
          size="sm"
          position="center"
          mt="md"
@@ -133,6 +132,6 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
          onChange={setPage}
        />
      )}
-    </>
+    </Stack>
  );
 };
--- 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<UsenetQueueListProps> = ({ appId }) => {
  const theme = useMantineTheme();
@@ -38,13 +40,13 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ 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({
    limit: PAGE_SIZE,
    offset: (page - 1) * PAGE_SIZE,
-    appId: appId,
+    appId,
  });
  const totalPages = Math.ceil((data?.total || 1) / PAGE_SIZE);

@@ -85,103 +87,102 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
    );
  }

+  // TODO: Set ScollArea dynamic height based on the widget size
  return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
-        <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
-          <thead>
-            <tr>
-              <th style={{ width: 32 }} />
-              <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+    <Stack justify="space-around" spacing="xs">
+      <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
+        <thead>
+          <tr>
+            <th style={{ width: 32 }} />
+            <th style={{ width: '75%' }}>{t('queue.header.name')}</th>
+            {sizeBreakpoint < width ? (
+              <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+            ) : null}
+            <th style={{ width: 60 }}>{t('queue.header.eta')}</th>
+            {progressBreakpoint < width ? (
+              <th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
+                {t('queue.header.progress')}
+              </th>
+            ) : null}
+          </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>
              {sizeBreakpoint < width ? (
-                <th style={{ width: 100 }}>{t('queue.header.size')}</th>
+                <td>
+                  <Text size="xs">{humanFileSize(nzb.size)}</Text>
+                </td>
              ) : null}
-              <th style={{ width: 60 }}>{t('queue.header.eta')}</th>
+              <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>
              {progressBreakpoint < width ? (
-                <th style={{ width: progressbarBreakpoint > width ? 100 : 200 }}>
-                  {t('queue.header.progress')}
-                </th>
+                <td style={{ display: 'flex', alignItems: 'center' }}>
+                  <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
+                    {nzb.progress.toFixed(1)}%
+                  </Text>
+                  {width > progressbarBreakpoint ? (
+                    <Progress
+                      radius="lg"
+                      color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
+                      value={nzb.progress}
+                      size="lg"
+                      style={{ width: '100%' }}
+                    />
+                  ) : null}
+                </td>
              ) : null}
            </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>
-                {sizeBreakpoint < width ? (
-                  <td>
-                    <Text size="xs">{humanFileSize(nzb.size)}</Text>
-                  </td>
-                ) : null}
-                <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>
-                {progressBreakpoint < width ? (
-                  <td style={{ display: 'flex', alignItems: 'center' }}>
-                    <Text mr="sm" style={{ whiteSpace: 'nowrap' }}>
-                      {nzb.progress.toFixed(1)}%
-                    </Text>
-                    {width > progressbarBreakpoint ? (
-                      <Progress
-                        radius="lg"
-                        color={nzb.eta > 0 ? theme.primaryColor : 'lightgrey'}
-                        value={nzb.progress}
-                        size="lg"
-                        style={{ width: '100%' }}
-                      />
-                    ) : null}
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </ScrollArea>
+          ))}
+        </tbody>
+      </Table>
      {totalPages > 1 && (
        <Pagination
+          noWrap
          size="sm"
          position="center"
-          mt="md"
          total={totalPages}
          page={page}
          onChange={setPage}
        />
      )}
-    </>
+    </Stack>
  );
 };
--- a/src/widgets/widgets.d.ts
+++ b/src/widgets/widgets.d.ts
@@ -1,6 +1,5 @@
-import { IconSun, TablerIcon } from '@tabler/icons';
+import { TablerIcon } from '@tabler/icons';
 import React from 'react';
-import { BaseTileProps } from '../components/Dashboard/Tiles/type';

 // Type of widgets which are safed to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {
@@ -32,6 +31,7 @@ export type IWidgetOptionValue =
  | IMultiSelectOptionValue
  | ISwitchOptionValue
  | ITextInputOptionValue
+  | ISliderInputOptionValue
  | INumberInputOptionValue;

 // will show a multi-select with specified data
@@ -56,7 +56,16 @@ export type ITextInputOptionValue = {
 // will show a number-input
 export type INumberInputOptionValue = {
  type: 'number';
-  defaultValue: string;
+  defaultValue: number;
+};
+
+// will show a slider-input
+export type ISliderInputOptionValue = {
+  type: 'slider';
+  defaultValue: number;
+  min: number;
+  max: number;
+  step: number;
 };

 // is used to type the widget definitions which will be used to display all widgets