Fix ImageProcessing

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

@@ -23,7 +23,6 @@ export default function ImageProcessing({backendSettings}: {backendSettings?: IB
     const valueChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
         setColor("warning");
         clearTimeout(timerRef.current);
-        console.log(e);
         timerRef.current = setTimeout(() => {
             UpdateAprilFoolsMode(e.target.checked);
         }, 1000);
@@ -33,14 +32,14 @@ export default function ImageProcessing({backendSettings}: {backendSettings?: IB
         setValue(backendSettings?.aprilFoolsMode??false);
     }, [backendSettings]);
 
-    const UpdateAprilFoolsMode = useCallback((value: boolean) => {
-        UpdateAprilFoolsToggle(apiUri, value)
+    const UpdateAprilFoolsMode = useCallback((val: boolean) => {
+        UpdateAprilFoolsToggle(apiUri, val)
             .then(() => GetAprilFoolsToggle(apiUri))
             .then((val) => setValue(val))
             .then(() => setColor("success"))
             .catch(() => setColor("danger"))
             .finally(() => setLoading(false));
-    }, [apiUri, value]);
+    }, [apiUri]);
 
     return (
         <Accordion>

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

@@ -1,113 +1,101 @@
 import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {useCallback, useContext, useState} from "react";
+import {ChangeEvent, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {ApiUriContext} from "../../api/fetchApi.tsx";
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary,
-    ColorPaletteProp,
-    Input,
-    Switch,
-    Typography
+    AccordionSummary, ColorPaletteProp, Input, Stack, Switch, Typography,
 } from "@mui/joy";
-import * as React from "react";
-import {UpdateBWImageToggle, UpdateImageCompressionValue} from "../../api/BackendSettings.tsx";
+import {
+    GetBWImageToggle,
+    GetImageCompressionValue,
+    UpdateBWImageToggle,
+    UpdateImageCompressionValue
+} from "../../api/BackendSettings.tsx";
 
-export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
+export default function ImageProcessing ({backendSettings}: { backendSettings?: IBackendSettings }) {
     const apiUri = useContext(ApiUriContext);
 
-    const [loadingBw, setLoadingBw] = useState<boolean>(false);
-    const [bwInputColor, setBwInputcolor] = useState<ColorPaletteProp>("neutral");
+    useEffect(() => {
+        setBwImages(backendSettings?.bwImages??false);
+        setCompression(backendSettings?.compression??100);
+    }, [backendSettings]);
 
-    const timerRefBw = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const bwChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setBwInputcolor("warning");
-        clearTimeout(timerRefBw.current);
-        console.log(e);
-        timerRefBw.current = setTimeout(() => {
-            UpdateBw(e.target.checked);
+    const [bwImages, setBwImages] = useState<boolean>(backendSettings?.bwImages??false);
+    const [bwImagesLoading, setBwImagesLoading] = useState(false);
+    const [bwImagesColor, setBwImagesColor] = useState<ColorPaletteProp>("neutral");
+    const bwTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const bwValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setBwImages(e.target.checked);
+        setBwImagesColor("warning");
+        clearTimeout(bwTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateBwImages(e.target.checked);
         }, 1000);
     }
+    const UpdateBwImages = useCallback((val : boolean) => {
+        setBwImagesLoading(true);
+        UpdateBWImageToggle(apiUri, val)
+            .then(() => GetBWImageToggle(apiUri))
+            .then(setBwImages)
+            .then(() => setBwImagesColor("success"))
+            .catch(() => setBwImagesColor("danger"))
+            .finally(() => setBwImagesLoading(false));
+    },[apiUri]);
 
-    const UpdateBw = useCallback((value: boolean) => {
-        UpdateBWImageToggle(apiUri, value)
-            .then(() => setBwInputcolor("success"))
-            .catch(() => setBwInputcolor("danger"))
-            .finally(() => setLoadingBw(false));
-    }, [apiUri]);
-
-    const [loadingCompression, setLoadingCompression] = useState<boolean>(false);
-    const [compressionInputColor, setCompressionInputColor] = useState<ColorPaletteProp>("neutral");
-    const [compressionEnabled, setCompressionEnabled] = useState<boolean>((backendSettings?.compression??100) < 100);
-    const [compressionValue, setCompressionValue] = useState<number|undefined>(backendSettings?.compression);
-
-    const timerRefCompression = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const compressionLevelChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setCompressionInputColor("warning");
-        setCompressionValue(Number.parseInt(e.target.value));
-        clearTimeout(timerRefCompression.current);
-
-        console.log(e);
-        timerRefCompression.current = setTimeout(() => {
-            UpdateCompressionLevel(Number.parseInt(e.target.value));
+    const [compression, setCompression] = useState<number>(backendSettings?.compression??100);
+    const [compressionLoading, setCompressionLoading] = useState(false);
+    const [compressionColor, setCompressionColor] = useState<ColorPaletteProp>("neutral");
+    const compressionTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const compressionCheckedChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setCompressionColor("warning");
+        if(!e.target.checked)
+            setCompression(100);
+        else
+            setCompression(50);
+        clearTimeout(compressionTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateImageCompression(e.target.checked ? 50 : 100);
         }, 1000);
     }
-
-    const compressionEnableChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setCompressionInputColor("warning");
-        setCompressionEnabled(e.target.checked);
-        clearTimeout(timerRefCompression.current);
-        timerRefCompression.current = setTimeout(() => {
-            UpdateCompressionLevel(e.target.checked ? compressionValue! : 100);
+    const compressionValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setCompressionColor("warning");
+        setCompression(parseInt(e.target.value));
+        clearTimeout(compressionTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateImageCompression(parseInt(e.target.value));
         }, 1000);
     }
-
-    const UpdateCompressionLevel = useCallback((value: number)=> {
-        setLoadingCompression(true);
-        UpdateImageCompressionValue(apiUri, value)
-            .then(() => {
-                setCompressionInputColor("success");
-                setCompressionValue(value);
-            })
-            .catch(() => setCompressionInputColor("danger"))
-            .finally(() => setLoadingCompression(false));
-    }, [apiUri]);
+    const UpdateImageCompression = useCallback((val : number) => {
+        setCompressionLoading(true);
+        UpdateImageCompressionValue(apiUri, val)
+            .then(() => GetImageCompressionValue(apiUri))
+            .then(setCompression)
+            .then(() => setCompressionColor("success"))
+            .catch(() => setCompressionColor("danger"))
+            .finally(() => setCompressionLoading(false));
+    },[apiUri]);
 
     return (
         <Accordion>
             <AccordionSummary>Image Processing</AccordionSummary>
             <AccordionDetails>
-                <Typography endDecorator={
-                    <Switch disabled={backendSettings === undefined || loadingBw}
-                            onChange={bwChanged}
-                            color={bwInputColor}
-                            defaultChecked={backendSettings?.bwImages} />
-                }>
-                    Black and White Images
-                </Typography>
-                <Typography endDecorator={
-                    <Switch disabled={backendSettings === undefined || loadingCompression}
-                            onChange={compressionEnableChanged}
-                            color={compressionInputColor}
-                            defaultChecked={compressionEnabled} endDecorator={
-                        <Input
-                            defaultValue={backendSettings?.compression}
-                            disabled={!compressionEnabled || loadingCompression}
-                            onChange={compressionLevelChanged}
-                            color={compressionInputColor}
-                            onKeyDown={(e) => {
-                                if(e.key === "Enter") {
-                                    clearTimeout(timerRefCompression.current);
-                                    // @ts-ignore
-                                    UpdateCompressionLevel(Number.parseInt(e.target.value));
-                                }
-                            }}
-                            sx={{width:"70px"}}
-                        />
-                    } />
-                }>
-                    Image Compression
-                </Typography>
+                <Stack>
+                    <Typography endDecorator={
+                        <Switch disabled={backendSettings === undefined || bwImagesLoading}
+                                onChange={bwValueChanged}
+                                color={bwImagesColor}
+                                checked={bwImages} />
+                    }>B/W Images</Typography>
+                    <Typography endDecorator={
+                        <Input type={"number"} value={compression} onChange={compressionValueChanged} startDecorator={
+                            <Switch disabled={backendSettings === undefined || compressionLoading}
+                                    onChange={compressionCheckedChanged}
+                                    color={compressionColor}
+                                    checked={compression < 100} />
+                        } />
+                    }>Compression</Typography>
+                </Stack>
             </AccordionDetails>
         </Accordion>
     );

tranga-website/src/Settings.tsx

@@ -84,7 +84,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
     }, [checking]);
 
     return (
-        <Drawer size={"md"} open={open} onClose={() => setOpen(false)}>
+        <Drawer size={"lg"} open={open} onClose={() => setOpen(false)}>
             <ModalClose />
             <DialogTitle>Settings</DialogTitle>
             <DialogContent>