✨ Add pihole integration (#860)

* ✨ Add pihole integration * Update src/widgets/adhole/AdHoleControls.tsx Co-authored-by: Larvey <39219859+LarveyOfficial@users.noreply.github.com> * Update src/tools/client/math.ts Co-authored-by: Meier Lukas <meierschlumpf@gmail.com> * Update src/widgets/dnshole/DnsHoleSummary.tsx Co-authored-by: Meier Lukas <meierschlumpf@gmail.com> --------- Co-authored-by: Larvey <39219859+LarveyOfficial@users.noreply.github.com> Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
2025-11-15 09:46:19 +01:00 · 2023-05-06 19:51:53 +02:00
parent 6ad799efe8
commit 92e8d79c5a
22 changed files with 1289 additions and 10 deletions
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -0,0 +1,120 @@
+import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
+import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons';
+import { useConfigContext } from '../../config/provider';
+import { defineWidget } from '../helper';
+import { WidgetLoading } from '../loading';
+import { IWidget } from '../widgets';
+import { useDnsHoleControlMutation, useDnsHoleSummeryQuery } from './query';
+import { PiholeApiSummaryType } from './type';
+import { queryClient } from '../../tools/server/configurations/tanstack/queryClient.tool';
+
+const definition = defineWidget({
+  id: 'dns-hole-controls',
+  icon: IconDeviceGamepad,
+  options: {},
+  gridstack: {
+    minWidth: 3,
+    minHeight: 2,
+    maxWidth: 12,
+    maxHeight: 12,
+  },
+  component: DnsHoleControlsWidgetTile,
+});
+
+export type IDnsHoleControlsWidget = IWidget<(typeof definition)['id'], typeof definition>;
+
+interface DnsHoleControlsWidgetProps {
+  widget: IDnsHoleControlsWidget;
+}
+
+function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
+  const { isInitialLoading, data, refetch } = useDnsHoleSummeryQuery();
+  const { mutateAsync } = useDnsHoleControlMutation();
+  const { t } = useTranslation('modules/dns-hole-controls');
+
+  const { config } = useConfigContext();
+
+  if (isInitialLoading || !data) {
+    return <WidgetLoading />;
+  }
+
+  return (
+    <Stack>
+      <Group grow>
+        <Button
+          onClick={async () => {
+            await mutateAsync('enabled');
+            await queryClient.invalidateQueries({ queryKey: ['dns-hole-summary'] });
+          }}
+          leftIcon={<IconPlayerPlay size={20} />}
+          variant="light"
+          color="green"
+        >
+          {t('card.buttons.enableAll')}
+        </Button>
+        <Button
+          onClick={async () => {
+            await mutateAsync('disabled');
+            await queryClient.invalidateQueries({ queryKey: ['dns-hole-summary'] });
+          }}
+          leftIcon={<IconPlayerStop size={20} />}
+          variant="light"
+          color="red"
+        >
+          {t('card.buttons.disableAll')}
+        </Button>
+      </Group>
+
+      {data.status.map((status, index) => {
+        const app = config?.apps.find((x) => x.id === status.appId);
+
+        if (!app) {
+          return null;
+        }
+
+        return (
+          <Card withBorder key={index} p="xs">
+            <Group position="apart">
+              <Group>
+                <Box
+                  sx={(theme) => ({
+                    backgroundColor:
+                      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+                    textAlign: 'center',
+                    padding: 5,
+                    borderRadius: theme.radius.md,
+                  })}
+                >
+                  <Image src={app.appearance.iconUrl} width={25} height={25} fit="contain" />
+                </Box>
+                <Text>{app.name}</Text>
+              </Group>
+
+              <StatusBadge status={status.status} />
+            </Group>
+          </Card>
+        );
+      })}
+    </Stack>
+  );
+}
+
+const StatusBadge = ({ status }: { status: PiholeApiSummaryType['status'] }) => {
+  const { t } = useTranslation('modules/dns-hole-controls');
+  if (status === 'enabled') {
+    return (
+      <Badge variant="dot" color="green">
+        {t('card.status.enabled')}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="dot" color="red">
+      {t('card.status.disabled')}
+    </Badge>
+  );
+};
+
+export default definition;