FlareSolverr Settings

tranga-website/src/Components/Settings/FlareSolverr.tsx

@@ -0,0 +1,72 @@
+import IBackendSettings from "../../api/types/IBackendSettings";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Button,
+    ColorPaletteProp,
+    Input, Stack
+} from "@mui/joy";
+import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {
+    ResetFlareSolverrUrl,
+    SetFlareSolverrUrl, TestFlareSolverrUrl,
+} from "../../api/BackendSettings.tsx";
+
+export default function FlareSolverr({backendSettings}: {backendSettings?: IBackendSettings}) {
+    const apiUri = useContext(ApiUriContext);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [value, setValue] = useState<string>(backendSettings?.flareSolverrUrl??"");
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+
+    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(value === undefined) return;
+        if(e.key === "Enter") {
+            setLoading(true);
+            SetFlareSolverrUrl(apiUri, value)
+                .then(() => setColor("success"))
+                .catch(() => setColor("danger"))
+                .finally(() => setLoading(false));
+        }
+    }, [apiUri, value])
+
+    const Reset = useCallback(() => {
+        setLoading(true);
+        ResetFlareSolverrUrl(apiUri)
+            .then(() => Test())
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+    
+    const Test = useCallback(() => {
+        setLoading(true);
+        TestFlareSolverrUrl(apiUri)
+            .then(() => setColor("success"))
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+
+    useEffect(() => {
+        setValue(backendSettings?.flareSolverrUrl??"");
+    }, [backendSettings]);
+
+    return (
+        <Accordion>
+            <AccordionSummary>FlareSolverr</AccordionSummary>
+            <AccordionDetails>
+                <Input disabled={backendSettings === undefined || loading}
+                       placeholder={"FlareSolverr URL"}
+                       value={value}
+                       onKeyDown={keyDown}
+                       onChange={e => setValue(e.target.value)}
+                       color={color}
+                       endDecorator={<Stack direction={"row"} spacing={1}>
+                           <Button onClick={Reset} loading={loading}>Reset</Button>
+                           <Button onClick={Test} loading={loading}>Test</Button>
+                       </Stack>}
+                />
+            </AccordionDetails>
+        </Accordion>
+    );
+}

tranga-website/src/Settings.tsx

@@ -19,6 +19,7 @@ import ImageProcessing from "./Components/Settings/ImageProcessing.tsx";
 import ChapterNamingScheme from "./Components/Settings/ChapterNamingScheme.tsx";
 import AprilFoolsMode from './Components/Settings/AprilFoolsMode.tsx';
 import RequestLimits from "./Components/Settings/RequestLimits.tsx";
+import FlareSolverr from "./Components/Settings/FlareSolverr.tsx";
 
 const checkConnection  = async (apiUri: string): Promise<boolean> =>{
     return fetch(`${apiUri}/swagger/v2/swagger.json`,
@@ -113,6 +114,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
                     <ChapterNamingScheme backendSettings={backendSettings} />
                     <AprilFoolsMode backendSettings={backendSettings} />
                     <RequestLimits backendSettings={backendSettings} />
+                    <FlareSolverr backendSettings={backendSettings} />
                 </AccordionGroup>
             </DialogContent>
         </Drawer>

tranga-website/src/api/BackendSettings.tsx

@@ -1,4 +1,4 @@
-import {deleteData, getData, patchData} from './fetchApi.tsx';
+import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
 import IBackendSettings from "./types/IBackendSettings.ts";
 import IRequestLimits from "./types/IRequestLimits.ts";
 import {RequestLimitType} from "./types/EnumRequestLimitType.ts";
@@ -77,4 +77,16 @@ export const GetChapterNamingScheme = async (apiUri: string) : Promise<string> =
 
 export const UpdateChapterNamingScheme = async (apiUri: string, value: string) => {
     return patchData(`${apiUri}/v2/Settings/ChapterNamingScheme`, value);
+}
+
+export const SetFlareSolverrUrl = async (apiUri: string, value: string) => {
+    return postData(`${apiUri}/v2/Settings/FlareSolverr/Url`, value);
+}
+
+export const ResetFlareSolverrUrl = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/FlareSolverr/Url`);
+}
+
+export const TestFlareSolverrUrl = async (apiUri: string) => {
+    return postData(`${apiUri}/v2/Settings/FlareSolverr/Test`);
 }

tranga-website/src/api/types/IBackendSettings.ts

@@ -15,4 +15,5 @@ export default interface IBackendSettings {
     bwImages: boolean;
     startNewJobTimeoutMs: number;
     chapterNamingScheme: string;
+    flareSolverrUrl: string;
 }