From d5975192e8f8bdf93e253e6f131cdd689a5c6410 Mon Sep 17 00:00:00 2001 From: glax Date: Mon, 4 Aug 2025 10:57:27 +0200 Subject: [PATCH 1/7] Update packages, fix padding of manga-list --- tranga-website/package-lock.json | 100 ++++++++---------- .../src/Components/Mangas/MangaList.css | 2 +- 2 files changed, 45 insertions(+), 57 deletions(-) diff --git a/tranga-website/package-lock.json b/tranga-website/package-lock.json index d647d92..00c632c 100644 --- a/tranga-website/package-lock.json +++ b/tranga-website/package-lock.json @@ -980,9 +980,9 @@ } }, "node_modules/@eslint/config-array": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz", - "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz", + "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -995,9 +995,9 @@ } }, "node_modules/@eslint/config-helpers": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.0.tgz", - "integrity": "sha512-yJLLmLexii32mGrhW29qvU3QBVTu0GUmEf/J4XsBtVhp4JkIUFN/BjWqTF63yRvGApIDpZm5fa97LtYtINmfeQ==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz", + "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==", "dev": true, "license": "Apache-2.0", "engines": { @@ -1005,9 +1005,9 @@ } }, "node_modules/@eslint/core": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz", - "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==", + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz", + "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -1055,13 +1055,16 @@ } }, "node_modules/@eslint/js": { - "version": "9.23.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.23.0.tgz", - "integrity": "sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==", + "version": "9.32.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.32.0.tgz", + "integrity": "sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==", "dev": true, "license": "MIT", "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" } }, "node_modules/@eslint/object-schema": { @@ -1075,13 +1078,13 @@ } }, "node_modules/@eslint/plugin-kit": { - "version": "0.2.7", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz", - "integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==", + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz", + "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@eslint/core": "^0.12.0", + "@eslint/core": "^0.15.1", "levn": "^0.4.1" }, "engines": { @@ -2494,9 +2497,9 @@ } }, "node_modules/acorn": { - "version": "8.14.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", - "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", + "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", "bin": { @@ -3193,20 +3196,20 @@ } }, "node_modules/eslint": { - "version": "9.23.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.23.0.tgz", - "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==", + "version": "9.32.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.32.0.tgz", + "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", - "@eslint/config-array": "^0.19.2", - "@eslint/config-helpers": "^0.2.0", - "@eslint/core": "^0.12.0", + "@eslint/config-array": "^0.21.0", + "@eslint/config-helpers": "^0.3.0", + "@eslint/core": "^0.15.0", "@eslint/eslintrc": "^3.3.1", - "@eslint/js": "9.23.0", - "@eslint/plugin-kit": "^0.2.7", + "@eslint/js": "9.32.0", + "@eslint/plugin-kit": "^0.3.4", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", @@ -3217,9 +3220,9 @@ "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^8.3.0", - "eslint-visitor-keys": "^4.2.0", - "espree": "^10.3.0", + "eslint-scope": "^8.4.0", + "eslint-visitor-keys": "^4.2.1", + "espree": "^10.4.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -3277,9 +3280,9 @@ } }, "node_modules/eslint-scope": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz", - "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==", + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz", + "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -3294,9 +3297,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", - "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz", + "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==", "dev": true, "license": "Apache-2.0", "engines": { @@ -3307,15 +3310,15 @@ } }, "node_modules/espree": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz", - "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==", + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz", + "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==", "dev": true, "license": "BSD-2-Clause", "dependencies": { - "acorn": "^8.14.0", + "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", - "eslint-visitor-keys": "^4.2.0" + "eslint-visitor-keys": "^4.2.1" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -7140,21 +7143,6 @@ "dev": true, "license": "ISC" }, - "node_modules/yaml": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz", - "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/tranga-website/src/Components/Mangas/MangaList.css b/tranga-website/src/Components/Mangas/MangaList.css index 79616c9..f136043 100644 --- a/tranga-website/src/Components/Mangas/MangaList.css +++ b/tranga-website/src/Components/Mangas/MangaList.css @@ -1,3 +1,3 @@ .manga-list { - margin: 15px; + padding-top: calc(1em * var(--joy-lineHeight-md, 1.5) / 2);; } \ No newline at end of file From ee1b0536c7f7d60fe02d120511abb5b3522a2d55 Mon Sep 17 00:00:00 2001 From: glax Date: Mon, 4 Aug 2025 11:39:02 +0200 Subject: [PATCH 2/7] Reorganize Settings for faster access to individual settings (group them by category) --- .../Settings/AddNotificationConnector.tsx | 42 +++++++++++-------- .../Settings/ChapterNamingScheme.tsx | 11 ++--- .../src/Components/Settings/Download.tsx | 14 +++++++ .../Components/Settings/DownloadLanguage.tsx | 9 ++-- .../src/Components/Settings/FlareSolverr.tsx | 36 +++++++++------- .../Components/Settings/ImageCompression.tsx | 9 ++-- .../src/Components/Settings/Maintenance.tsx | 2 - .../Settings/NotificationConnectors.tsx | 16 ------- .../src/Components/Settings/Services.tsx | 15 +++++++ .../src/Components/Settings/Settings.tsx | 27 ++++++------ 10 files changed, 104 insertions(+), 77 deletions(-) create mode 100644 tranga-website/src/Components/Settings/Download.tsx delete mode 100644 tranga-website/src/Components/Settings/NotificationConnectors.tsx create mode 100644 tranga-website/src/Components/Settings/Services.tsx diff --git a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx b/tranga-website/src/Components/Settings/AddNotificationConnector.tsx index 46165db..5f14e25 100644 --- a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx +++ b/tranga-website/src/Components/Settings/AddNotificationConnector.tsx @@ -1,7 +1,7 @@ import {ReactNode, useContext, useState} from "react"; import { ApiContext } from "../../apiClient/ApiContext"; import { - Button, + Button, Card, Input, Modal, ModalDialog, @@ -9,30 +9,36 @@ import { Tab, TabList, TabPanel, - Tabs + Tabs, Typography } from "@mui/joy"; import ModalClose from "@mui/joy/ModalClose"; import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../apiClient/data-contracts.ts"; import {LoadingState, StateColor, StateIndicator} from "../Loading.tsx"; +import * as React from "react"; -export default function ({open, setOpen} : {open: boolean, setOpen: (open: boolean) => void}) { +export default function () { + const [notificationConnectorsOpen, setNotificationConnectorsOpen] = React.useState(false); return ( - setOpen(false)}> - - - - - Gotify - Ntfy - Pushover - - - - - - - + + Notification Connectors + + setNotificationConnectorsOpen(false)}> + + + + + Gotify + Ntfy + Pushover + + + + + + + + ); } diff --git a/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx b/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx index 2109c90..8e7c094 100644 --- a/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx +++ b/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx @@ -1,7 +1,7 @@ import {ReactNode, useContext, useState} from "react"; -import {SettingsContext, SettingsItem} from "./Settings.tsx"; +import {SettingsContext} from "./Settings.tsx"; import {ApiContext} from "../../apiClient/ApiContext.tsx"; -import {ColorPaletteProp, Input} from "@mui/joy"; +import {Card, ColorPaletteProp, Input, Typography} from "@mui/joy"; import * as React from "react"; import MarkdownPreview from "@uiw/react-markdown-preview"; @@ -27,9 +27,10 @@ export default function () : ReactNode { } return ( - - + + Chapter Naming Scheme - + + ); } \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/Download.tsx b/tranga-website/src/Components/Settings/Download.tsx new file mode 100644 index 0000000..4cbd799 --- /dev/null +++ b/tranga-website/src/Components/Settings/Download.tsx @@ -0,0 +1,14 @@ +import {SettingsItem} from "./Settings.tsx"; +import ImageCompression from "./ImageCompression.tsx"; +import DownloadLanguage from "./DownloadLanguage.tsx"; +import ChapterNamingScheme from "./ChapterNamingScheme.tsx"; + +export default function (){ + return ( + + + + + + ) +} \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/DownloadLanguage.tsx b/tranga-website/src/Components/Settings/DownloadLanguage.tsx index 1a81994..1581a27 100644 --- a/tranga-website/src/Components/Settings/DownloadLanguage.tsx +++ b/tranga-website/src/Components/Settings/DownloadLanguage.tsx @@ -1,7 +1,7 @@ import {ReactNode, useContext, useState} from "react"; -import {SettingsContext, SettingsItem} from "./Settings.tsx"; +import {SettingsContext} from "./Settings.tsx"; import {ApiContext} from "../../apiClient/ApiContext.tsx"; -import {ColorPaletteProp, Input} from "@mui/joy"; +import {Card, ColorPaletteProp, Input, Typography} from "@mui/joy"; import * as React from "react"; export default function () : ReactNode { @@ -26,8 +26,9 @@ export default function () : ReactNode { } return ( - + + Download Language - + ); } \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/FlareSolverr.tsx b/tranga-website/src/Components/Settings/FlareSolverr.tsx index 01392b7..bacb574 100644 --- a/tranga-website/src/Components/Settings/FlareSolverr.tsx +++ b/tranga-website/src/Components/Settings/FlareSolverr.tsx @@ -1,6 +1,6 @@ -import {ReactNode, useContext, useState} from "react"; -import {SettingsContext, SettingsItem} from "./Settings.tsx"; -import {ColorPaletteProp, Input} from "@mui/joy"; +import {ReactNode, useCallback, useContext, useState} from "react"; +import {SettingsContext} from "./Settings.tsx"; +import {Button, Card, ColorPaletteProp, Input, Typography} from "@mui/joy"; import * as React from "react"; import {ApiContext} from "../../apiClient/ApiContext.tsx"; @@ -8,26 +8,34 @@ export default function () : ReactNode { const settings = useContext(SettingsContext); const Api = useContext(ApiContext); + const [uriValue, setUriValue] = React.useState(settings?.flareSolverrUrl as string); const [uriColor, setUriColor] = useState("neutral"); const timerRef = React.useRef>(undefined); const uriChanged = (e : React.ChangeEvent) => { clearTimeout(timerRef.current); setUriColor("warning"); timerRef.current = setTimeout(() => { - Api.settingsFlareSolverrUrlCreate(e.target.value) - .then(response => { - if (response.ok) - setUriColor("success"); - else - setUriColor("danger"); - }) - .catch(() => setUriColor("danger")); + setUriValue(e.target.value); }, 1000); } + + const changeUri = useCallback(() => { + Api.settingsFlareSolverrUrlCreate(uriValue) + .then(response => { + if (response.ok) + setUriColor("success"); + else + setUriColor("danger"); + }) + .catch(() => setUriColor("danger")); + }, [uriValue]); return ( - - - + + FlareSolverr + Apply} + /> + ); } \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/ImageCompression.tsx b/tranga-website/src/Components/Settings/ImageCompression.tsx index 01e9d85..60f1504 100644 --- a/tranga-website/src/Components/Settings/ImageCompression.tsx +++ b/tranga-website/src/Components/Settings/ImageCompression.tsx @@ -1,13 +1,14 @@ import {ReactNode, useContext} from "react"; -import {SettingsContext, SettingsItem} from "./Settings.tsx"; -import {Slider} from "@mui/joy"; +import {SettingsContext} from "./Settings.tsx"; +import {Card, Slider, Typography} from "@mui/joy"; export default function () : ReactNode { const settings = useContext(SettingsContext); return ( - + + Image Compression - + ); } \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/Maintenance.tsx b/tranga-website/src/Components/Settings/Maintenance.tsx index 729dd2b..8b5032e 100644 --- a/tranga-website/src/Components/Settings/Maintenance.tsx +++ b/tranga-website/src/Components/Settings/Maintenance.tsx @@ -19,9 +19,7 @@ export default function () { }).catch(_ => setUnusedMangaState(LoadingState.failure)); } - return ( - - - - ); -} \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/Services.tsx b/tranga-website/src/Components/Settings/Services.tsx new file mode 100644 index 0000000..7f5a7a8 --- /dev/null +++ b/tranga-website/src/Components/Settings/Services.tsx @@ -0,0 +1,15 @@ +import {SettingsItem} from "./Settings.tsx"; +import NotificationConnectors from "./AddNotificationConnector.tsx"; +import FlareSolverr from "./FlareSolverr.tsx"; + +export default function(){ + + + + return ( + + + + + ); +} \ No newline at end of file diff --git a/tranga-website/src/Components/Settings/Settings.tsx b/tranga-website/src/Components/Settings/Settings.tsx index 2ee4ffa..ab4c288 100644 --- a/tranga-website/src/Components/Settings/Settings.tsx +++ b/tranga-website/src/Components/Settings/Settings.tsx @@ -6,20 +6,17 @@ import { AccordionSummary, Button, ColorPaletteProp, DialogContent, DialogTitle, Input, - Modal, ModalDialog + Modal, ModalDialog, Stack } from "@mui/joy"; import './Settings.css'; import * as React from "react"; import {createContext, Dispatch, ReactNode, useContext, useEffect, useState} from "react"; import {TrangaSettings} from "../../apiClient/data-contracts.ts"; import {ApiContext} from "../../apiClient/ApiContext.tsx"; -import NotificationConnectors from "./NotificationConnectors.tsx"; import {SxProps} from "@mui/joy/styles/types"; -import ImageCompression from "./ImageCompression.tsx"; -import FlareSolverr from "./FlareSolverr.tsx"; -import DownloadLanguage from "./DownloadLanguage.tsx"; -import ChapterNamingScheme from "./ChapterNamingScheme.tsx"; import Maintenance from "./Maintenance.tsx"; +import Services from "./Services.tsx"; +import Download from './Download.tsx'; export const SettingsContext = createContext(undefined); @@ -69,11 +66,8 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch - - - - - + + @@ -83,12 +77,17 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch + setExpanded(expanded)}> {title} - {children} + + {children} + ); From b98bd3a11d61ce03d17a05d1b2d8d5b839401534 Mon Sep 17 00:00:00 2001 From: glax Date: Mon, 4 Aug 2025 11:48:54 +0200 Subject: [PATCH 3/7] Implement ImageCompression API-Setting --- .../src/Components/Settings/FlareSolverr.tsx | 3 +- .../Components/Settings/ImageCompression.tsx | 33 +++++++++++++++++-- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/tranga-website/src/Components/Settings/FlareSolverr.tsx b/tranga-website/src/Components/Settings/FlareSolverr.tsx index bacb574..ec774a4 100644 --- a/tranga-website/src/Components/Settings/FlareSolverr.tsx +++ b/tranga-website/src/Components/Settings/FlareSolverr.tsx @@ -13,9 +13,10 @@ export default function () : ReactNode { const timerRef = React.useRef>(undefined); const uriChanged = (e : React.ChangeEvent) => { clearTimeout(timerRef.current); + setUriValue(e.target.value); setUriColor("warning"); timerRef.current = setTimeout(() => { - setUriValue(e.target.value); + changeUri(); }, 1000); } diff --git a/tranga-website/src/Components/Settings/ImageCompression.tsx b/tranga-website/src/Components/Settings/ImageCompression.tsx index 60f1504..dcd727f 100644 --- a/tranga-website/src/Components/Settings/ImageCompression.tsx +++ b/tranga-website/src/Components/Settings/ImageCompression.tsx @@ -1,14 +1,41 @@ -import {ReactNode, useContext} from "react"; +import {ReactNode, useCallback, useContext, useState} from "react"; import {SettingsContext} from "./Settings.tsx"; -import {Card, Slider, Typography} from "@mui/joy"; +import {Button, Card, ColorPaletteProp, Slider, Typography} from "@mui/joy"; +import * as React from "react"; +import {ApiContext} from "../../apiClient/ApiContext.tsx"; export default function () : ReactNode { const settings = useContext(SettingsContext); + const Api = useContext(ApiContext); + + const [value, setValue] = useState(settings?.imageCompression??100); + const [color, setColor] = useState("neutral"); + const timerRef = React.useRef>(undefined); + const valueChanged = (_: Event, val: number | number[]) => { + clearTimeout(timerRef.current); + setColor("warning"); + setValue(val as number); + timerRef.current = setTimeout(() => { + changeUri(); + }, 1000); + } + + const changeUri = useCallback(() => { + Api.settingsImageCompressionLevelPartialUpdate(value) + .then(response => { + if (response.ok) + setColor("success"); + else + setColor("danger"); + }) + .catch(() => setColor("danger")); + }, [value]); return ( Image Compression - + + ); } \ No newline at end of file From 1e2ef1d90c24526dab022ea6a2482e02a43c528e Mon Sep 17 00:00:00 2001 From: glax Date: Mon, 4 Aug 2025 12:21:14 +0200 Subject: [PATCH 4/7] Fix Api-Uri ending in "/" --- tranga-website/src/Components/Settings/Settings.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tranga-website/src/Components/Settings/Settings.tsx b/tranga-website/src/Components/Settings/Settings.tsx index ab4c288..e3172fd 100644 --- a/tranga-website/src/Components/Settings/Settings.tsx +++ b/tranga-website/src/Components/Settings/Settings.tsx @@ -38,8 +38,12 @@ export default function Settings({setApiUri} : {setApiUri: Dispatch) => { clearTimeout(timerRef.current); setApiUriColor("warning"); + + const val = e.target.value; + const value = val.endsWith("/") ? val.substring(0, val.length - 1) : val; + timerRef.current = setTimeout(() => { - setApiUri(e.target.value); + setApiUri(value); setApiUriColor("success"); }, 1000); } From 6ee200e482497c273393b13231f5d639004f9196 Mon Sep 17 00:00:00 2001 From: glax Date: Mon, 4 Aug 2025 12:21:27 +0200 Subject: [PATCH 5/7] Add list of NotificationConnectors --- .../Settings/AddNotificationConnector.tsx | 2 + .../Settings/ListNotificationConnector.tsx | 52 +++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 tranga-website/src/Components/Settings/ListNotificationConnector.tsx diff --git a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx b/tranga-website/src/Components/Settings/AddNotificationConnector.tsx index 5f14e25..6846c3b 100644 --- a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx +++ b/tranga-website/src/Components/Settings/AddNotificationConnector.tsx @@ -15,6 +15,7 @@ import ModalClose from "@mui/joy/ModalClose"; import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../apiClient/data-contracts.ts"; import {LoadingState, StateColor, StateIndicator} from "../Loading.tsx"; import * as React from "react"; +import ListNotificationConnector from "./ListNotificationConnector.tsx"; export default function () { const [notificationConnectorsOpen, setNotificationConnectorsOpen] = React.useState(false); @@ -23,6 +24,7 @@ export default function () { Notification Connectors + setNotificationConnectorsOpen(false)}> diff --git a/tranga-website/src/Components/Settings/ListNotificationConnector.tsx b/tranga-website/src/Components/Settings/ListNotificationConnector.tsx new file mode 100644 index 0000000..9e66f9b --- /dev/null +++ b/tranga-website/src/Components/Settings/ListNotificationConnector.tsx @@ -0,0 +1,52 @@ +import {ApiContext} from "../../apiClient/ApiContext.tsx"; +import {useContext, useEffect, useState} from "react"; +import { NotificationConnector } from "../../apiClient/data-contracts.ts"; +import {Card, Chip, Input, Stack, Table, Textarea, Typography} from "@mui/joy"; + +export default function (){ + const Api = useContext(ApiContext); + const [notificationConnectors, setNotificationConnectors] = useState([]); + + useEffect(() => { + getConnectors(); + }, []); + + const getConnectors = () => { + Api.notificationConnectorList().then(r => { + if(r.ok) + setNotificationConnectors(r.data); + }) + }; + + return ( + + {notificationConnectors.map(c => )} + + ); +} + +function NotificationConnectorItem({connector} : {connector: NotificationConnector}){ + return ( + + {connector.name} + {connector.httpMethod}} value={connector.url} /> + + + + + + + + + {Object.entries(connector.headers).map(x => + + + + + )} + +
HeaderValue
{x[0]}{[x[1]]}
+