mirror of https://github.com/jetkvm/kvm.git
94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { useCallback, useEffect, useMemo } from "react";
|
|
|
|
import { useSettingsStore } from "@/hooks/stores";
|
|
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
|
import notifications from "@/notifications";
|
|
import { SettingsPageHeader } from "@components/SettingsPageheader";
|
|
import { keyboardOptions } from "@/keyboardLayouts";
|
|
import { Checkbox } from "@/components/Checkbox";
|
|
|
|
import { SelectMenuBasic } from "../components/SelectMenuBasic";
|
|
|
|
import { SettingsItem } from "./devices.$id.settings";
|
|
|
|
export default function SettingsKeyboardRoute() {
|
|
const { keyboardLayout, setKeyboardLayout } = useSettingsStore();
|
|
const { showPressedKeys, setShowPressedKeys } = useSettingsStore();
|
|
|
|
// this ensures we always get the en-US if it hasn't been set yet
|
|
// and if we get en_US from the backend, we convert it to en-US
|
|
const safeKeyboardLayout = useMemo(() => {
|
|
if (keyboardLayout && keyboardLayout.length > 0)
|
|
return keyboardLayout.replace("en_US", "en-US");
|
|
return "en-US";
|
|
}, [keyboardLayout]);
|
|
|
|
const layoutOptions = keyboardOptions();
|
|
|
|
const { send } = useJsonRpc();
|
|
|
|
useEffect(() => {
|
|
send("getKeyboardLayout", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setKeyboardLayout(resp.result as string);
|
|
});
|
|
}, [send, setKeyboardLayout]);
|
|
|
|
const onKeyboardLayoutChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const layout = e.target.value;
|
|
send("setKeyboardLayout", { layout }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set keyboard layout: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
}
|
|
notifications.success("Keyboard layout set successfully");
|
|
setKeyboardLayout(layout);
|
|
});
|
|
},
|
|
[send, setKeyboardLayout],
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<SettingsPageHeader
|
|
title="Keyboard"
|
|
description="Configure keyboard settings for your device"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
{ /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
|
|
<SettingsItem
|
|
title="Paste text"
|
|
description="Keyboard layout of target operating system"
|
|
>
|
|
<SelectMenuBasic
|
|
size="SM"
|
|
label=""
|
|
fullWidth
|
|
value={safeKeyboardLayout}
|
|
onChange={onKeyboardLayoutChange}
|
|
options={layoutOptions}
|
|
/>
|
|
</SettingsItem>
|
|
<p className="text-xs text-slate-600 dark:text-slate-400">
|
|
Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<SettingsItem
|
|
title="Show Pressed Keys"
|
|
description="Display currently pressed keys in the status bar"
|
|
>
|
|
<Checkbox
|
|
checked={showPressedKeys}
|
|
onChange={e => setShowPressedKeys(e.target.checked)}
|
|
/>
|
|
</SettingsItem>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|