mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-12-14 08:06:22 +00:00
Update script-terminal-modal.tsx
This commit is contained in:
@@ -22,24 +22,27 @@ interface ScriptTerminalModalProps {
|
|||||||
open: boolean
|
open: boolean
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
scriptPath: string
|
scriptPath: string
|
||||||
scriptTitle: string
|
scriptName: string
|
||||||
params?: Record<string, string>
|
params?: Record<string, string>
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ScriptTerminalModal({
|
export function ScriptTerminalModal({
|
||||||
open: isOpen,
|
open: isOpen,
|
||||||
onClose,
|
onClose,
|
||||||
scriptPath,
|
scriptPath,
|
||||||
scriptTitle,
|
scriptName,
|
||||||
params = {},
|
params = {},
|
||||||
|
title,
|
||||||
|
description,
|
||||||
}: ScriptTerminalModalProps) {
|
}: ScriptTerminalModalProps) {
|
||||||
const termRef = useRef<any>(null)
|
const termRef = useRef<any>(null)
|
||||||
const wsRef = useRef<WebSocket | null>(null)
|
const wsRef = useRef<WebSocket | null>(null)
|
||||||
const fitAddonRef = useRef<any>(null)
|
const fitAddonRef = useRef<any>(null)
|
||||||
const sessionIdRef = useRef<string>(Math.random().toString(36).substring(2, 8))
|
const sessionIdRef = useRef<string>(Math.random().toString(36).substring(2, 8))
|
||||||
|
|
||||||
const [output, setOutput] = useState<string>("")
|
const [isConnected, setIsConnected] = useState(true)
|
||||||
const [connectionStatus, setConnectionStatus] = useState<"connecting" | "online" | "offline">("connecting")
|
|
||||||
const [isComplete, setIsComplete] = useState(false)
|
const [isComplete, setIsComplete] = useState(false)
|
||||||
const [exitCode, setExitCode] = useState<number | null>(null)
|
const [exitCode, setExitCode] = useState<number | null>(null)
|
||||||
const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
|
const [currentInteraction, setCurrentInteraction] = useState<WebInteraction | null>(null)
|
||||||
@@ -158,7 +161,7 @@ export function ScriptTerminalModal({
|
|||||||
wsRef.current = ws
|
wsRef.current = ws
|
||||||
|
|
||||||
ws.onopen = () => {
|
ws.onopen = () => {
|
||||||
setConnectionStatus("online")
|
setIsConnected(true)
|
||||||
|
|
||||||
const initMessage = {
|
const initMessage = {
|
||||||
script_path: scriptPath,
|
script_path: scriptPath,
|
||||||
@@ -229,12 +232,12 @@ export function ScriptTerminalModal({
|
|||||||
}
|
}
|
||||||
|
|
||||||
ws.onerror = (error) => {
|
ws.onerror = (error) => {
|
||||||
setConnectionStatus("offline")
|
setIsConnected(false)
|
||||||
term.writeln("\x1b[31mWebSocket error occurred\x1b[0m")
|
term.writeln("\x1b[31mWebSocket error occurred\x1b[0m")
|
||||||
}
|
}
|
||||||
|
|
||||||
ws.onclose = (event) => {
|
ws.onclose = (event) => {
|
||||||
setConnectionStatus("offline")
|
setIsConnected(false)
|
||||||
term.writeln("\x1b[33mConnection closed\x1b[0m")
|
term.writeln("\x1b[33mConnection closed\x1b[0m")
|
||||||
|
|
||||||
if (!isComplete) {
|
if (!isComplete) {
|
||||||
@@ -251,13 +254,7 @@ export function ScriptTerminalModal({
|
|||||||
|
|
||||||
checkConnectionInterval.current = setInterval(() => {
|
checkConnectionInterval.current = setInterval(() => {
|
||||||
if (ws) {
|
if (ws) {
|
||||||
if (ws.readyState === WebSocket.OPEN) {
|
setIsConnected(ws.readyState === WebSocket.OPEN)
|
||||||
setConnectionStatus("online")
|
|
||||||
} else if (ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
setConnectionStatus("connecting")
|
|
||||||
} else {
|
|
||||||
setConnectionStatus("offline")
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, 500)
|
}, 500)
|
||||||
|
|
||||||
@@ -336,7 +333,7 @@ export function ScriptTerminalModal({
|
|||||||
setInteractionInput("")
|
setInteractionInput("")
|
||||||
setCurrentInteraction(null)
|
setCurrentInteraction(null)
|
||||||
setIsWaitingNextInteraction(false)
|
setIsWaitingNextInteraction(false)
|
||||||
setConnectionStatus("connecting")
|
setIsConnected(false)
|
||||||
}
|
}
|
||||||
}, [isOpen])
|
}, [isOpen])
|
||||||
|
|
||||||
@@ -510,11 +507,12 @@ export function ScriptTerminalModal({
|
|||||||
onInteractOutside={(e) => e.preventDefault()}
|
onInteractOutside={(e) => e.preventDefault()}
|
||||||
onEscapeKeyDown={(e) => e.preventDefault()}
|
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||||
>
|
>
|
||||||
<DialogTitle className="sr-only">{scriptTitle}</DialogTitle>
|
<DialogTitle className="sr-only">{title}</DialogTitle>
|
||||||
|
|
||||||
<div className="flex items-center gap-2 p-4 border-b">
|
<div className="flex items-center gap-2 p-4 border-b">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold">{scriptTitle}</h2>
|
<h2 className="text-lg font-semibold">{title}</h2>
|
||||||
|
{description && <p className="text-sm text-muted-foreground">{description}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -619,28 +617,10 @@ export function ScriptTerminalModal({
|
|||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Activity className="h-5 w-5 text-blue-500" />
|
<Activity className="h-5 w-5 text-blue-500" />
|
||||||
<div
|
<div
|
||||||
className={`w-2 h-2 rounded-full ${
|
className={`w-2 h-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}`}
|
||||||
connectionStatus === "online"
|
title={isConnected ? "Connected" : "Disconnected"}
|
||||||
? "bg-green-500"
|
|
||||||
: connectionStatus === "connecting"
|
|
||||||
? "bg-blue-500"
|
|
||||||
: "bg-red-500"
|
|
||||||
}`}
|
|
||||||
title={
|
|
||||||
connectionStatus === "online"
|
|
||||||
? "Connected"
|
|
||||||
: connectionStatus === "connecting"
|
|
||||||
? "Connecting..."
|
|
||||||
: "Disconnected"
|
|
||||||
}
|
|
||||||
></div>
|
></div>
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">{isConnected ? "Online" : "Offline"}</span>
|
||||||
{connectionStatus === "online"
|
|
||||||
? "Online"
|
|
||||||
: connectionStatus === "connecting"
|
|
||||||
? "Connecting..."
|
|
||||||
: "Offline"}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user