mirror of
https://github.com/luckfox-eng29/kvm.git
synced 2026-06-15 23:30:17 +02:00
feat(extension): ATX/DC/Serial extension support
This commit is contained in:
Aveline
GitHub
171
ui/src/components/extensions/ATXPowerControl.tsx
Normal file
171
ui/src/components/extensions/ATXPowerControl.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { Button } from "@components/Button";
|
||||
import { LuHardDrive, LuPower, LuRotateCcw } from "react-icons/lu";
|
||||
import Card from "@components/Card";
|
||||
import { SectionHeader } from "@components/SectionHeader";
|
||||
import { useEffect, useState } from "react";
|
||||
import notifications from "@/notifications";
|
||||
import { useJsonRpc } from "../../hooks/useJsonRpc";
|
||||
import LoadingSpinner from "../LoadingSpinner";
|
||||
|
||||
const LONG_PRESS_DURATION = 3000; // 3 seconds for long press
|
||||
|
||||
interface ATXState {
|
||||
power: boolean;
|
||||
hdd: boolean;
|
||||
}
|
||||
|
||||
export function ATXPowerControl() {
|
||||
const [isPowerPressed, setIsPowerPressed] = useState(false);
|
||||
const [powerPressTimer, setPowerPressTimer] = useState<ReturnType<
|
||||
typeof setTimeout
|
||||
> | null>(null);
|
||||
const [atxState, setAtxState] = useState<ATXState | null>(null);
|
||||
|
||||
const [send] = useJsonRpc(function onRequest(resp) {
|
||||
if (resp.method === "atxState") {
|
||||
setAtxState(resp.params as ATXState);
|
||||
}
|
||||
});
|
||||
|
||||
// Request initial state
|
||||
useEffect(() => {
|
||||
send("getATXState", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to get ATX state: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
setAtxState(resp.result as ATXState);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handlePowerPress = (pressed: boolean) => {
|
||||
// Prevent phantom releases
|
||||
if (!pressed && !isPowerPressed) return;
|
||||
|
||||
setIsPowerPressed(pressed);
|
||||
|
||||
// Handle button press
|
||||
if (pressed) {
|
||||
// Start long press timer
|
||||
const timer = setTimeout(() => {
|
||||
// Send long press action
|
||||
console.log("Sending long press ATX power action");
|
||||
send("setATXPowerAction", { action: "power-long" }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to send ATX power action: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
}
|
||||
setIsPowerPressed(false);
|
||||
});
|
||||
}, LONG_PRESS_DURATION);
|
||||
|
||||
setPowerPressTimer(timer);
|
||||
}
|
||||
// Handle button release
|
||||
else {
|
||||
// If timer exists, was a short press
|
||||
if (powerPressTimer) {
|
||||
clearTimeout(powerPressTimer);
|
||||
setPowerPressTimer(null);
|
||||
|
||||
// Send short press action
|
||||
console.log("Sending short press ATX power action");
|
||||
send("setATXPowerAction", { action: "power-short" }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to send ATX power action: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (powerPressTimer) {
|
||||
clearTimeout(powerPressTimer);
|
||||
}
|
||||
};
|
||||
}, [powerPressTimer]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="ATX Power Control"
|
||||
description="Control your ATX power settings"
|
||||
/>
|
||||
|
||||
{atxState === null ? (
|
||||
<Card className="flex h-[120px] items-center justify-center p-3">
|
||||
<LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="h-[120px] animate-fadeIn opacity-0">
|
||||
<div className="p-3 space-y-4">
|
||||
{/* Control Buttons */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
LeadingIcon={LuPower}
|
||||
text="Power"
|
||||
onMouseDown={() => handlePowerPress(true)}
|
||||
onMouseUp={() => handlePowerPress(false)}
|
||||
onMouseLeave={() => handlePowerPress(false)}
|
||||
className={isPowerPressed ? "opacity-75" : ""}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
LeadingIcon={LuRotateCcw}
|
||||
text="Reset"
|
||||
onClick={() => {
|
||||
send("setATXPowerAction", { action: "reset" }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to send ATX power action: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-slate-700/30 dark:border-slate-600/30" />
|
||||
{/* Status Indicators */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-slate-600 dark:text-slate-400">
|
||||
<LuPower
|
||||
strokeWidth={3}
|
||||
className={`mr-1 inline ${
|
||||
atxState?.power ? "text-green-600" : "text-slate-300"
|
||||
}`}
|
||||
/>
|
||||
Power LED
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-slate-600 dark:text-slate-400">
|
||||
<LuHardDrive
|
||||
strokeWidth={3}
|
||||
className={`mr-1 inline ${
|
||||
atxState?.hdd ? "text-blue-400" : "text-slate-300"
|
||||
}`}
|
||||
/>
|
||||
HDD LED
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
ui/src/components/extensions/DCPowerControl.tsx
Normal file
114
ui/src/components/extensions/DCPowerControl.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Button } from "@components/Button";
|
||||
import { LuPower } from "react-icons/lu";
|
||||
import Card from "@components/Card";
|
||||
import { SectionHeader } from "@components/SectionHeader";
|
||||
import FieldLabel from "../FieldLabel";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import notifications from "@/notifications";
|
||||
import LoadingSpinner from "../LoadingSpinner";
|
||||
|
||||
interface DCPowerState {
|
||||
isOn: boolean;
|
||||
voltage: number;
|
||||
current: number;
|
||||
power: number;
|
||||
}
|
||||
|
||||
export function DCPowerControl() {
|
||||
const [send] = useJsonRpc();
|
||||
const [powerState, setPowerState] = useState<DCPowerState | null>(null);
|
||||
|
||||
const getDCPowerState = useCallback(() => {
|
||||
send("getDCPowerState", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to get DC power state: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
setPowerState(resp.result as DCPowerState);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handlePowerToggle = (enabled: boolean) => {
|
||||
send("setDCPowerState", { enabled }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set DC power state: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
getDCPowerState(); // Refresh state after change
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getDCPowerState();
|
||||
// Set up polling interval to update status
|
||||
const interval = setInterval(getDCPowerState, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [getDCPowerState]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="DC Power Control"
|
||||
description="Control your DC power settings"
|
||||
/>
|
||||
|
||||
{powerState === null ? (
|
||||
<Card className="flex h-[160px] justify-center p-3">
|
||||
<LoadingSpinner className="w-6 h-6 text-blue-500 dark:text-blue-400" />
|
||||
</Card>
|
||||
) : (
|
||||
<Card className="h-[160px] animate-fadeIn opacity-0">
|
||||
<div className="p-3 space-y-4">
|
||||
{/* Power Controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
LeadingIcon={LuPower}
|
||||
text="Power On"
|
||||
onClick={() => handlePowerToggle(true)}
|
||||
disabled={powerState.isOn}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
LeadingIcon={LuPower}
|
||||
text="Power Off"
|
||||
disabled={!powerState.isOn}
|
||||
onClick={() => handlePowerToggle(false)}
|
||||
/>
|
||||
</div>
|
||||
<hr className="border-slate-700/30 dark:border-slate-600/30" />
|
||||
|
||||
{/* Status Display */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="space-y-1">
|
||||
<FieldLabel label="Voltage" />
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{powerState.voltage.toFixed(1)}V
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<FieldLabel label="Current" />
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{powerState.current.toFixed(1)}A
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<FieldLabel label="Power" />
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">
|
||||
{powerState.power.toFixed(1)}W
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
130
ui/src/components/extensions/SerialConsole.tsx
Normal file
130
ui/src/components/extensions/SerialConsole.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { Button } from "@components/Button";
|
||||
import { LuTerminal } from "react-icons/lu";
|
||||
import Card from "@components/Card";
|
||||
import { SectionHeader } from "@components/SectionHeader";
|
||||
import { SelectMenuBasic } from "../SelectMenuBasic";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { useEffect, useState } from "react";
|
||||
import notifications from "@/notifications";
|
||||
import { useUiStore } from "@/hooks/stores";
|
||||
|
||||
interface SerialSettings {
|
||||
baudRate: string;
|
||||
dataBits: string;
|
||||
stopBits: string;
|
||||
parity: string;
|
||||
}
|
||||
|
||||
export function SerialConsole() {
|
||||
const [send] = useJsonRpc();
|
||||
const [settings, setSettings] = useState<SerialSettings>({
|
||||
baudRate: "9600",
|
||||
dataBits: "8",
|
||||
stopBits: "1",
|
||||
parity: "none",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
send("getSerialSettings", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to get serial settings: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
setSettings(resp.result as SerialSettings);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handleSettingChange = (setting: keyof SerialSettings, value: string) => {
|
||||
const newSettings = { ...settings, [setting]: value };
|
||||
send("setSerialSettings", { settings: newSettings }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update serial settings: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
setSettings(newSettings);
|
||||
});
|
||||
};
|
||||
const setTerminalType = useUiStore(state => state.setTerminalType);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="Serial Console"
|
||||
description="Configure your serial console settings"
|
||||
/>
|
||||
|
||||
<Card className="animate-fadeIn opacity-0">
|
||||
<div className="space-y-4 p-3">
|
||||
{/* Open Console Button */}
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
LeadingIcon={LuTerminal}
|
||||
text="Open Console"
|
||||
onClick={() => {
|
||||
setTerminalType("serial");
|
||||
console.log("Opening serial console with settings: ", settings);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<hr className="border-slate-700/30 dark:border-slate-600/30" />
|
||||
{/* Settings */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<SelectMenuBasic
|
||||
label="Baud Rate"
|
||||
options={[
|
||||
{ label: "1200", value: "1200" },
|
||||
{ label: "2400", value: "2400" },
|
||||
{ label: "4800", value: "4800" },
|
||||
{ label: "9600", value: "9600" },
|
||||
{ label: "19200", value: "19200" },
|
||||
{ label: "38400", value: "38400" },
|
||||
{ label: "57600", value: "57600" },
|
||||
{ label: "115200", value: "115200" },
|
||||
]}
|
||||
value={settings.baudRate}
|
||||
onChange={e => handleSettingChange("baudRate", e.target.value)}
|
||||
/>
|
||||
|
||||
<SelectMenuBasic
|
||||
label="Data Bits"
|
||||
options={[
|
||||
{ label: "8", value: "8" },
|
||||
{ label: "7", value: "7" },
|
||||
]}
|
||||
value={settings.dataBits}
|
||||
onChange={e => handleSettingChange("dataBits", e.target.value)}
|
||||
/>
|
||||
|
||||
<SelectMenuBasic
|
||||
label="Stop Bits"
|
||||
options={[
|
||||
{ label: "1", value: "1" },
|
||||
{ label: "1.5", value: "1.5" },
|
||||
{ label: "2", value: "2" },
|
||||
]}
|
||||
value={settings.stopBits}
|
||||
onChange={e => handleSettingChange("stopBits", e.target.value)}
|
||||
/>
|
||||
|
||||
<SelectMenuBasic
|
||||
label="Parity"
|
||||
options={[
|
||||
{ label: "None", value: "none" },
|
||||
{ label: "Even", value: "even" },
|
||||
{ label: "Odd", value: "odd" },
|
||||
]}
|
||||
value={settings.parity}
|
||||
onChange={e => handleSettingChange("parity", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user