UserAgent Setting

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

@@ -0,0 +1,38 @@
+import IBackendSettings from "../../api/types/IBackendSettings";
+import {Accordion, AccordionDetails, AccordionSummary, CircularProgress, ColorPaletteProp, Input} from "@mui/joy";
+import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {UpdateUserAgent} from "../../api/BackendSettings.tsx";
+
+export default function UserAgent({backendSettings}: {backendSettings?: IBackendSettings}) {
+    const apiUri = useContext(ApiUriContext);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [value, setValue] = useState<string>("");
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+
+    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(e.key === "Enter") {
+            setLoading(true);
+            UpdateUserAgent(apiUri, value)
+                .then(() => setColor("success"))
+                .catch(() => setColor("danger"))
+                .finally(() => setLoading(false));
+        }
+    }, [apiUri])
+
+    return (
+        <Accordion>
+            <AccordionSummary>UserAgent</AccordionSummary>
+            <AccordionDetails>
+                <Input disabled={backendSettings === undefined || loading}
+                        placeholder={"UserAgent"}
+                        defaultValue={backendSettings?.userAgent}
+                        onKeyDown={keyDown}
+                        onChange={e => setValue(e.target.value)}
+                        color={color}
+                        endDecorator={(loading ? <CircularProgress color={"primary"} size={"sm"} /> : null)}
+                />
+            </AccordionDetails>
+        </Accordion>
+    );
+}

tranga-website/src/Settings.tsx

@@ -10,8 +10,11 @@ import {
 } from "@mui/joy";
 import './Settings.css';
 import * as React from "react";
-import {useContext, useEffect, useState} from "react";
+import {useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
+import IBackendSettings from "./api/types/IBackendSettings.ts";
+import { GetSettings } from './api/BackendSettings.tsx';
+import UserAgent from "./Components/Settings/UserAgent.tsx";
 
 const checkConnection  = async (apiUri: string): Promise<boolean> =>{
     return fetch(`${apiUri}/swagger/v2/swagger.json`,
@@ -62,6 +65,16 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
             .finally(() => setChecking(false));
     }
 
+    const [backendSettings, setBackendSettings] = useState<IBackendSettings>();
+
+    const getBackendSettings = useCallback(() => {
+        GetSettings(apiUri).then(setBackendSettings);
+    }, [apiUri]);
+
+    useEffect(() => {
+        getBackendSettings();
+    }, [checking]);
+
     return (
         <Drawer size={"md"} open={open} onClose={() => setOpen(false)}>
             <ModalClose />
@@ -87,6 +100,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
                                 endDecorator={(checking ? <CircularProgress color={apiUriColor} size={"sm"} /> : null)} />
                         </AccordionDetails>
                     </Accordion>
+                    <UserAgent backendSettings={backendSettings} />
                 </AccordionGroup>
             </DialogContent>
         </Drawer>