diff --git a/ui/src/components/JigglerSetting.tsx b/ui/src/components/JigglerSetting.tsx new file mode 100644 index 0000000..001c364 --- /dev/null +++ b/ui/src/components/JigglerSetting.tsx @@ -0,0 +1,93 @@ +import { useCallback } from "react"; +import { Button } from "@components/Button"; +import { InputFieldWithLabel } from "./InputField"; + +import { useEffect, useState } from "react"; +import { useJsonRpc } from "../hooks/useJsonRpc"; +import notifications from "../notifications"; + +export interface JigglerConfig { + active_after_seconds: number; + jitter_enabled: boolean; + jitter_percentage: number; + schedule_cron_tab: string; +} + +export function JigglerSetting() { + const [send] = useJsonRpc(); + const [loading, setLoading] = useState(false); + + const [jigglerConfigState, setJigglerConfigState] = useState({ + active_after_seconds: 0, + jitter_enabled: false, + jitter_percentage: 0.0, + schedule_cron_tab: "*/20 * * * * *" + }); + + useEffect(() => { + send("getJigglerConfig", {}, resp => { + if ("error" in resp) return; + setJigglerConfigState(resp.result as JigglerConfig); + }); + }, [send]); + + // const handleJigglerActiveAfterSecondsChange = (value: number) => { + // setJigglerConfig({ ...jigglerConfig, active_after_seconds: value }); + // }; + // + // const handleJigglerJitterEnabledChange = (value: boolean) => { + // setJigglerConfig({ ...jigglerConfig, jitter_enabled: value }); + // }; + // + // const handleJigglerJitterPercentageChange = (value: number) => { + // setJigglerConfig({ ...jigglerConfig, jitter_percentage: value }); + // }; + + const handleJigglerScheduleCronTabChange = (value: string) => { + setJigglerConfigState({ ...jigglerConfigState, schedule_cron_tab: value }); + }; + + const handleJigglerConfigChange = useCallback( + (jigglerConfig: JigglerConfig) => { + setLoading(true); + send("setJigglerConfig", { jigglerConfig }, async resp => { + if ("error" in resp) { + notifications.error( + `Failed to set jiggler config: ${resp.error.data || "Unknown error"}`, + ); + setLoading(false); + return; + } + + setLoading(false); + notifications.success( + `Jiggler Config successfully updated`, + ); + }); + }, + [send], + ); + + return ( +
+
+ handleJigglerScheduleCronTabChange(e.target.value)} + /> +
+
+
+
+ ); +} diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx index 41f78d2..e749b4a 100644 --- a/ui/src/routes/devices.$id.settings.mouse.tsx +++ b/ui/src/routes/devices.$id.settings.mouse.tsx @@ -12,17 +12,10 @@ import { FeatureFlag } from "../components/FeatureFlag"; import { SelectMenuBasic } from "../components/SelectMenuBasic"; import { useFeatureFlag } from "../hooks/useFeatureFlag"; import { SettingsItem } from "./devices.$id.settings"; -import {InputFieldWithLabel} from "@components/InputField"; +import {JigglerSetting} from "@components/JigglerSetting"; type ScrollSensitivity = "low" | "default" | "high"; -export interface JigglerConfig { - active_after_seconds: number; - jitter_enabled: boolean; - jitter_percentage: number; - schedule_cron_tab: string; -} - export default function SettingsKeyboardMouseRoute() { const hideCursor = useSettingsStore(state => state.isCursorHidden); const setHideCursor = useSettingsStore(state => state.setCursorVisibility); @@ -38,12 +31,6 @@ export default function SettingsKeyboardMouseRoute() { const { isEnabled: isScrollSensitivityEnabled } = useFeatureFlag("0.3.8"); const [jiggler, setJiggler] = useState(false); - const [jigglerConfig, setJigglerConfig] = useState({ - active_after_seconds: 0, - jitter_enabled: false, - jitter_percentage: 0.0, - schedule_cron_tab: "*/20 * * * * *" - }); const [send] = useJsonRpc(); @@ -78,23 +65,6 @@ export default function SettingsKeyboardMouseRoute() { }); }; - // const handleJigglerActiveAfterSecondsChange = (value: number) => { - // setJigglerConfig({ ...jigglerConfig, active_after_seconds: value }); - // }; - // - // const handleJigglerJitterEnabledChange = (value: boolean) => { - // setJigglerConfig({ ...jigglerConfig, jitter_enabled: value }); - // }; - // - // const handleJigglerJitterPercentageChange = (value: number) => { - // setJigglerConfig({ ...jigglerConfig, jitter_percentage: value }); - // }; - - const handleJigglerScheduleCronTabChange = (value: string) => { - setJigglerConfig({ ...jigglerConfig, schedule_cron_tab: value }); - }; - - const onScrollSensitivityChange = useCallback( (e: React.ChangeEvent) => { const sensitivity = e.target.value as ScrollSensitivity; @@ -161,16 +131,10 @@ export default function SettingsKeyboardMouseRoute() { /> - handleJigglerScheduleCronTabChange(e.target.value)} - /> +