✨ Add pihole integration

public/locales/en/modules/dns-hole-controls.json

@@ -0,0 +1,16 @@
+{
+  "descriptor": {
+    "name": "DNS hole controls",
+    "description": "Control PiHole or AdGuard from your dashboard"
+  },
+  "card": {
+    "buttons": {
+      "enableAll": "Enable all",
+      "disableAll": "Disable all"
+    },
+    "status": {
+      "enabled": "Enabled",
+      "disabled": "Disabled"
+    }
+  }
+}

public/locales/en/modules/dns-hole-summary.json

@@ -0,0 +1,21 @@
+{
+  "descriptor": {
+    "name": "DNS hole summary",
+    "description": "Displays important data from PiHole or AdGuard",
+    "settings": {
+      "title": "Settings for DNS Hole summary",
+      "usePiHoleColors": {
+        "label": "Use colors from PiHole"
+      }
+    }
+  },
+  "card": {
+    "metrics": {
+      "domainsOnAdlist": "Domains on adlists",
+      "queriesToday": "Queries today",
+      "adsBlockedTodayPercentage": "{{percentage}}%",
+      "queriesBlockedTodayPercentage": "blocked today",
+      "queriesBlockedToday": "blocked today"
+    }
+  }
+}

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -85,6 +85,11 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
       image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/plex.png',
       label: 'Plex',
     },
+    {
+      value: 'pihole',
+      image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/pihole.png',
+      label: 'PiHole',
+    },
   ].filter((x) => Object.keys(integrationFieldProperties).includes(x.value));
 
   const getNewProperties = (value: string | null): AppIntegrationPropertyType[] => {

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -131,11 +131,6 @@ export const AvailableElementTypes = ({
           icon={<IconBoxAlignTop size={40} strokeWidth={1.3} />}
           onClick={onClickCreateCategory}
         />
-        {/*<ElementItem
-          name="Static Element"
-          icon={<IconTextResize size={40} strokeWidth={1.3} />}
-          onClick={onOpenStaticElements}
-        />*/}
       </Group>
     </>
   );

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -29,7 +29,7 @@ export const GenericAvailableElementType = ({
       : image;
 
   return (
-    <Grid.Col span="auto">
+    <Grid.Col xs={12} sm={4} md={3}>
       <Card style={{ height: '100%' }}>
         <Stack justify="space-between" style={{ height: '100%' }}>
           <Stack spacing="xs">

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -2,8 +2,8 @@ import { GridStack } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
 import { AppType } from '../../../types/app';
 import Widgets from '../../../widgets';
-import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
 import { WidgetWrapper } from '../../../widgets/WidgetWrapper';
+import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
 import { appTileDefinition } from '../Tiles/Apps/AppTile';
 import { GridstackTileWrapper } from '../Tiles/TileWrapper';
 import { useGridstackStore } from './gridstack/store';

src/pages/api/configs/[slug].ts

@@ -6,9 +6,8 @@ import Consola from 'consola';
 
 import { NextApiRequest, NextApiResponse } from 'next';
 
-import { BackendConfigType, ConfigType } from '../../../types/config';
 import { getConfig } from '../../../tools/config/getConfig';
-import widgets from '../../../widgets';
+import { BackendConfigType, ConfigType } from '../../../types/config';
 import { IRssWidget } from '../../../widgets/rss/RssWidgetTile';
 
 function Put(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/modules/dns-hole/control.ts

@@ -0,0 +1,53 @@
+/* eslint-disable no-await-in-loop */
+import { z } from 'zod';
+import { getCookie } from 'cookies-next';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { getConfig } from '../../../../tools/config/getConfig';
+import { findAppProperty } from '../../../../tools/client/app-properties';
+import { PiHoleClient } from '../../../../tools/server/sdk/pihole/piHole';
+
+const getQuerySchema = z.object({
+  status: z.enum(['enabled', 'disabled']),
+});
+
+export const Post = async (request: NextApiRequest, response: NextApiResponse) => {
+  const configName = getCookie('config-name', { req: request });
+  const config = getConfig(configName?.toString() ?? 'default');
+
+  const parseResult = getQuerySchema.safeParse(request.query);
+
+  if (!parseResult.success) {
+    response.status(400).json({ message: 'invalid query parameters, please specify the status' });
+    return;
+  }
+
+  const applicableApps = config.apps.filter((x) => x.integration?.type === 'pihole');
+
+  for (let i = 0; i < applicableApps.length; i += 1) {
+    const app = applicableApps[i];
+
+    const pihole = new PiHoleClient(
+      app.url,
+      findAppProperty(app, 'password')
+    );
+
+    switch (parseResult.data.status) {
+      case 'enabled':
+        await pihole.enable();
+        break;
+      case 'disabled':
+        await pihole.disable();
+        break;
+    }
+  }
+
+  response.status(200).json({});
+};
+
+export default async (request: NextApiRequest, response: NextApiResponse) => {
+  if (request.method === 'POST') {
+    return Post(request, response);
+  }
+
+  return response.status(405).json({});
+};