feat: add settings ui

oae · Nov 4, 2022 · 45980ec · 45980ec
1 parent 7d6fe34
commit 45980ec
Show file tree

Hide file tree

Showing 13 changed files with 923 additions and 8 deletions.
diff --git a/.env.example b/.env.example
@@ -12,8 +12,3 @@ DATABASE_URL=postgresql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}
 # Redis
 REDIS_HOST=localhost
 REDIS_PORT=6379
-
-# Notification
-TELEGRAM_TOKEN=
-TELEGRAM_CHAT_ID=
-TELEGRAM_SEND_SILENTLY=0
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -29,6 +29,7 @@
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
+        "ignoreRestSiblings": true,
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^_"

diff --git a/README.md b/README.md
@@ -28,9 +28,6 @@ services:
       - KAIZOKU_PORT=3000
       - REDIS_HOST=redis
       - REDIS_PORT=6379
-      - TELEGRAM_TOKEN=<token> # Don't set if you don't want telegram notifications.
-      - TELEGRAM_CHAT_ID=<chat_id>
-      - TELEGRAM_SEND_SILENTLY=0
       - PUID=<host user puid>
       - PGID=<host user guid>
       - TZ=Europe/Istanbul

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -49,3 +49,7 @@ services:
       - db:/var/lib/postgresql/data
     ports:
       - "${DATABASE_PORT:-5432}:5432"
+  apprise:
+    image: caronc/apprise:latest
+    ports:
+      - "9292:8000"
diff --git a/public/brand/apprise.png b/public/brand/apprise.png
diff --git a/public/brand/komga.png b/public/brand/komga.png
diff --git a/public/brand/telegram.png b/public/brand/telegram.png
diff --git a/src/components/settings/integration.tsx b/src/components/settings/integration.tsx
@@ -0,0 +1,176 @@
+import { Accordion, Box, Breadcrumbs, createStyles, Group, Image, Text } from '@mantine/core';
+import { trpc } from '../../utils/trpc';
+import { SwitchItem, TextItem } from './mangal';
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    '&': {
+      paddingTop: theme.spacing.sm,
+      marginTop: theme.spacing.sm,
+      borderTop: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]}`,
+    },
+  },
+
+  switch: {
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  numberInput: {
+    maxWidth: 60,
+  },
+
+  textInput: {
+    maxWidth: 120,
+  },
+
+  title: {
+    lineHeight: 1,
+  },
+}));
+
+export function IntegrationSettings() {
+  const { classes } = useStyles();
+  const update = trpc.settings.update.useMutation();
+  const settings = trpc.settings.query.useQuery();
+
+  const handleUpdate = async (key: string, value: boolean | string | number) => {
+    await update.mutateAsync({
+      key,
+      value,
+      updateType: 'app',
+    });
+    await settings.refetch();
+  };
+
+  if (settings.isLoading || !settings.data) {
+    return null;
+  }
+
+  return (
+    <Accordion variant="contained">
+      <Accordion.Item value="komga">
+        <Accordion.Control icon={<Image src="/brand/komga.png" width={20} height={20} />}>Komga</Accordion.Control>
+        <Accordion.Panel>
+          <Group position="apart" className={classes.item} spacing="xl" noWrap>
+            <Box>
+              <Breadcrumbs
+                separator="/"
+                styles={{
+                  separator: {
+                    marginLeft: 4,
+                    marginRight: 4,
+                  },
+                  breadcrumb: {
+                    textTransform: 'capitalize',
+                    fontSize: 13,
+                    fontWeight: 500,
+                  },
+                  root: {
+                    marginBottom: 5,
+                  },
+                }}
+              >
+                Enabled
+              </Breadcrumbs>
+              <Text size="xs" color="dimmed">
+                Enable Komga integration to trigger library scan and metadata refresh tasks
+              </Text>
+            </Box>
+            <SwitchItem
+              configKey="komgaEnabled"
+              onUpdate={handleUpdate}
+              initialValue={settings.data.appConfig.komgaEnabled}
+            />
+          </Group>
+          <Group position="apart" className={classes.item} spacing="xl" noWrap>
+            <Box>
+              <Breadcrumbs
+                separator="/"
+                styles={{
+                  separator: {
+                    marginLeft: 4,
+                    marginRight: 4,
+                  },
+                  breadcrumb: {
+                    textTransform: 'capitalize',
+                    fontSize: 13,
+                    fontWeight: 500,
+                  },
+                  root: {
+                    marginBottom: 5,
+                  },
+                }}
+              >
+                Host
+              </Breadcrumbs>
+              <Text size="xs" color="dimmed">
+                Komga host or ip
+              </Text>
+            </Box>
+            <TextItem configKey="komgaHost" onUpdate={handleUpdate} initialValue={settings.data.appConfig.komgaHost} />
+          </Group>
+          <Group position="apart" className={classes.item} spacing="xl" noWrap>
+            <Box>
+              <Breadcrumbs
+                separator="/"
+                styles={{
+                  separator: {
+                    marginLeft: 4,
+                    marginRight: 4,
+                  },
+                  breadcrumb: {
+                    textTransform: 'capitalize',
+                    fontSize: 13,
+                    fontWeight: 500,
+                  },
+                  root: {
+                    marginBottom: 5,
+                  },
+                }}
+              >
+                Email
+              </Breadcrumbs>
+              <Text size="xs" color="dimmed">
+                Komga user
+              </Text>
+            </Box>
+            <TextItem configKey="komgaUser" onUpdate={handleUpdate} initialValue={settings.data.appConfig.komgaUser} />
+          </Group>
+          <Group position="apart" className={classes.item} spacing="xl" noWrap>
+            <Box>
+              <Breadcrumbs
+                separator="/"
+                styles={{
+                  separator: {
+                    marginLeft: 4,
+                    marginRight: 4,
+                  },
+                  breadcrumb: {
+                    textTransform: 'capitalize',
+                    fontSize: 13,
+                    fontWeight: 500,
+                  },
+                  root: {
+                    marginBottom: 5,
+                  },
+                }}
+              >
+                Password
+              </Breadcrumbs>
+              <Text size="xs" color="dimmed">
+                Komga user password
+              </Text>
+            </Box>
+            <TextItem
+              configKey="komgaPassword"
+              onUpdate={handleUpdate}
+              initialValue={settings.data.appConfig.komgaPassword}
+            />
+          </Group>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+}