feat: dnshole controls widget (#867)

* feat: dnshole controls widget * feat: add duration and timer modal * fix: code improvment * fix: add support for many integrations * fix: add support for more integrations * fix: move ControlsCard outside of main component * fix: deepsource
2024-08-04 18:47:00 +03:00
parent 9013d5dbf0
commit 65c6854e44
14 changed files with 501 additions and 29 deletions
--- a/packages/widgets/src/dns-hole/controls/TimerModal.tsx
+++ b/packages/widgets/src/dns-hole/controls/TimerModal.tsx
@@ -0,0 +1,105 @@
+import { useRef, useState } from "react";
+import type { NumberInputHandlers } from "@mantine/core";
+import { ActionIcon, Button, Flex, Group, Modal, NumberInput, rem, Stack, Text } from "@mantine/core";
+import { IconClockPause } from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface TimerModalProps {
+  opened: boolean;
+  close: () => void;
+  integrationIds: string[];
+  disableDns: (data: { duration: number; integrationId: string }) => void;
+}
+
+const TimerModal = ({ opened, close, integrationIds, disableDns }: TimerModalProps) => {
+  const t = useI18n();
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const hoursHandlers = useRef<NumberInputHandlers>();
+  const minutesHandlers = useRef<NumberInputHandlers>();
+
+  const handleSetTimer = () => {
+    const duration = hours * 3600 + minutes * 60;
+    integrationIds.forEach((integrationId) => {
+      disableDns({ duration, integrationId });
+    });
+    setHours(0);
+    setMinutes(0);
+    close();
+  };
+
+  return (
+    <Modal
+      withinPortal
+      radius="lg"
+      shadow="sm"
+      size="sm"
+      opened={opened}
+      onClose={() => {
+        close();
+        setHours(0);
+        setMinutes(0);
+      }}
+      title={t("widget.dnsHoleControls.controls.setTimer")}
+    >
+      <Flex direction="column" align="center" justify="center">
+        <Stack align="flex-end">
+          <Group>
+            <Text>{t("widget.dnsHoleControls.controls.hours")}</Text>
+            <ActionIcon size={35} variant="default" onClick={() => hoursHandlers.current?.decrement()}>
+              –
+            </ActionIcon>
+            <NumberInput
+              hideControls
+              value={hours}
+              onChange={(val) => setHours(Number(val))}
+              handlersRef={hoursHandlers}
+              max={999}
+              min={0}
+              step={1}
+              styles={{ input: { width: rem(54), textAlign: "center" } }}
+            />
+            <ActionIcon size={35} variant="default" onClick={() => hoursHandlers.current?.increment()}>
+              +
+            </ActionIcon>
+          </Group>
+          <Group>
+            <Text>{t("widget.dnsHoleControls.controls.minutes")}</Text>
+            <ActionIcon size={35} variant="default" onClick={() => minutesHandlers.current?.decrement()}>
+              –
+            </ActionIcon>
+            <NumberInput
+              hideControls
+              value={minutes}
+              onChange={(val) => setMinutes(Number(val))}
+              handlersRef={minutesHandlers}
+              max={59}
+              min={0}
+              step={1}
+              styles={{ input: { width: rem(54), textAlign: "center" } }}
+            />
+            <ActionIcon size={35} variant="default" onClick={() => minutesHandlers.current?.increment()}>
+              +
+            </ActionIcon>
+          </Group>
+        </Stack>
+        <Text ta="center" c="dimmed" my={5}>
+          {t("widget.dnsHoleControls.controls.unlimited")}
+        </Text>
+        <Button
+          variant="light"
+          color="red"
+          leftSection={<IconClockPause size={20} />}
+          h="2rem"
+          w="12rem"
+          onClick={handleSetTimer}
+        >
+          {t("widget.dnsHoleControls.controls.set")}
+        </Button>
+      </Flex>
+    </Modal>
+  );
+};
+
+export default TimerModal;