✨ Add gridstack dashboard layout

2025-11-10 15:35:55 +01:00 · 2022-12-10 22:14:31 +01:00
parent b7bb1302e4
commit 001890d763
39 changed files with 2822 additions and 918 deletions
--- a/src/components/Dashboard/Tiles/IntegrationsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/IntegrationsEditModal.tsx
@@ -0,0 +1,124 @@
+import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
+import { ContextModalProps } from '@mantine/modals';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { useConfigContext } from '../../../config/provider';
+import { useConfigStore } from '../../../config/store';
+import { DashDotGraphType, IntegrationsType } from '../../../types/integration';
+
+export type IntegrationEditModalInnerProps<
+  TIntegrationKey extends keyof IntegrationsType = keyof IntegrationsType
+> = {
+  integration: TIntegrationKey;
+  options: IntegrationOptions<TIntegrationKey> | undefined;
+  labels: IntegrationOptionLabels<IntegrationOptions<TIntegrationKey>>;
+};
+
+export const IntegrationsEditModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<IntegrationEditModalInnerProps>) => {
+  const translationKey = integrationModuleTranslationsMap.get(innerProps.integration);
+  const { t } = useTranslation([translationKey ?? '', 'common']);
+  const [moduleProperties, setModuleProperties] = useState(innerProps.options);
+  const items = Object.entries(moduleProperties ?? {}) as [
+    keyof typeof innerProps.options,
+    IntegrationOptionsValueType
+  ][];
+
+  const { name: configName } = useConfigContext();
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+
+  if (!configName || !innerProps.options) return null;
+
+  const handleChange = (key: string, value: IntegrationOptionsValueType) => {
+    setModuleProperties((prev) => {
+      let copyOfPrev: any = { ...prev };
+      copyOfPrev[key] = value;
+      return copyOfPrev;
+    });
+  };
+
+  const handleSave = () => {
+    updateConfig(configName, (prev) => {
+      return {
+        ...prev,
+        integrations: {
+          ...prev.integrations,
+          [innerProps.integration]:
+            'properties' in (prev.integrations[innerProps.integration] ?? {})
+              ? {
+                  ...prev.integrations[innerProps.integration],
+                  properties: moduleProperties,
+                }
+              : prev.integrations[innerProps.integration],
+        },
+      };
+    });
+    context.closeModal(id);
+  };
+
+  return (
+    <Stack>
+      {items.map(([key, value]) => (
+        <>
+          {typeof value === 'boolean' ? (
+            <Switch
+              label={t(innerProps.labels[key as keyof typeof innerProps.labels])}
+              checked={value}
+              onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
+            />
+          ) : null}
+          {typeof value === 'string' ? (
+            <TextInput
+              label={t(innerProps.labels[key])}
+              value={value}
+              onChange={(ev) => handleChange(key, ev.currentTarget.value)}
+            />
+          ) : null}
+          {typeof value === 'object' && Array.isArray(value) ? (
+            <MultiSelect
+              data={['cpu', 'gpu', 'ram', 'storage', 'network']}
+              value={value}
+              onChange={(v) => handleChange(key, v as DashDotGraphType[])}
+            />
+          ) : null}
+        </>
+      ))}
+
+      <Group position="right">
+        <Button onClick={() => context.closeModal(id)} variant="light">
+          {t('common:actions.cancel')}
+        </Button>
+        <Button onClick={handleSave}>{t('common:actions.save')}</Button>
+      </Group>
+    </Stack>
+  );
+};
+
+type PropertiesOf<
+  TKey extends keyof IntegrationsType,
+  T extends IntegrationsType[TKey]
+> = T extends { properties: unknown } ? T['properties'] : {};
+
+export type IntegrationOptions<TKey extends keyof IntegrationsType> = PropertiesOf<
+  TKey,
+  IntegrationsType[TKey]
+>;
+
+export type IntegrationOptionLabels<TIntegrationOptions> = {
+  [key in keyof TIntegrationOptions]: string;
+};
+
+type IntegrationOptionsValueType = boolean | string | DashDotGraphType[];
+
+export const integrationModuleTranslationsMap = new Map<keyof IntegrationsType, string>([
+  ['calendar', 'modules/calendar'],
+  ['clock', 'modules/date'],
+  ['weather', 'modules/weather'],
+  ['dashDot', 'modules/dashdot'],
+  ['bitTorrent', 'modules/torrents-status'],
+  ['useNet', 'modules/usenet'],
+  ['torrentNetworkTraffic', 'modules/dlspeed'],
+]);