From 92cb59cebc54a6b01caf34de773d13bf463facd8 Mon Sep 17 00:00:00 2001 From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com> Date: Fri, 12 Dec 2025 13:51:12 +0700 Subject: [PATCH] Update scroll terminal --- BACKEND/app/services/line_connection.ts | 4 +- FRONTEND/src/components/CardLine.tsx | 27 +++++---- .../src/components/Drawer/DrawerControl.tsx | 12 ++-- FRONTEND/src/components/TerminalXTerm.tsx | 57 ++++++++++++++----- 4 files changed, 69 insertions(+), 31 deletions(-) diff --git a/BACKEND/app/services/line_connection.ts b/BACKEND/app/services/line_connection.ts index 0715336..567a920 100644 --- a/BACKEND/app/services/line_connection.ts +++ b/BACKEND/app/services/line_connection.ts @@ -480,7 +480,7 @@ export default class LineConnection { return runStep(stepIndex) } - if (step.send) { + if (typeof step.send !== 'undefined') { this.outputScenario += `\n---send-command---"${(step?.send ?? '').toString().replace(/\r/g, '\\r').replace(/\n/g, '\\n')}"---${now}---\n` appendLog( `\n---send-command---"${(step?.send ?? '').toString().replace(/\r/g, '\\r').replace(/\n/g, '\\n')}"---${now}---\n`, @@ -489,7 +489,7 @@ export default class LineConnection { this.config.stationIp, this.config.lineNumber ) - this.writeCommand(step?.send + '\r\n') + this.writeCommand((step?.send || '') + '\r\n') } repeatCount-- diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx index 0e09833..7039141 100644 --- a/FRONTEND/src/components/CardLine.tsx +++ b/FRONTEND/src/components/CardLine.tsx @@ -3,7 +3,7 @@ import type { IScenario, TLine, TStation } from "../untils/types"; import classes from "./Component.module.css"; import TerminalCLI from "./TerminalXTerm"; import type { Socket } from "socket.io-client"; -import { memo, useEffect, useMemo, useState } from "react"; +import { memo, useMemo, useState } from "react"; import { convertTimestampToDate } from "../untils/helper"; import { ButtonDPELP, ButtonScenario } from "./ButtonAction"; import { notifications } from "@mantine/notifications"; @@ -41,16 +41,16 @@ const CardLine = ({ const [valueBaud, setValueBaud] = useState(""); const [focusTerminal, setFocusTerminal] = useState(false); - useEffect(() => { - if ( - typeof line?.userOpenCLI !== "undefined" && - typeof line?.userOpenCLI === "string" && - line?.userOpenCLI.length > 0 && - line?.userOpenCLI !== user?.userName - ) - setIsDisabled(true); - else setIsDisabled(false); - }, [line?.userOpenCLI]); + // useEffect(() => { + // if ( + // typeof line?.userOpenCLI !== "undefined" && + // typeof line?.userOpenCLI === "string" && + // line?.userOpenCLI.length > 0 && + // line?.userOpenCLI !== user?.userName + // ) + // setIsDisabled(true); + // else setIsDisabled(false); + // }, [line?.userOpenCLI]); const controlApc = (action: string) => { if (!line.outlet) { @@ -635,7 +635,7 @@ const CardLine = ({ // line?.userOpenCLI.length > 0 && // line?.userOpenCLI !== user?.userName // } - isDisabled={false} + isDisabled={line?.runningScenario ? true : false} line_status={line?.status || ""} fontSize={12} miniSize={true} @@ -664,6 +664,9 @@ const CardLine = ({ }); }} focusTerminal={focusTerminal} + isSelected={ + selectedLines.find((val) => val.id === line.id) ? true : false + } /> diff --git a/FRONTEND/src/components/Drawer/DrawerControl.tsx b/FRONTEND/src/components/Drawer/DrawerControl.tsx index b914a9b..b1961a4 100644 --- a/FRONTEND/src/components/Drawer/DrawerControl.tsx +++ b/FRONTEND/src/components/Drawer/DrawerControl.tsx @@ -14,7 +14,6 @@ import { useEffect, useState } from "react"; import classes from "../Component.module.css"; import type { APCProps, SwitchPortsProps, TStation } from "../../untils/types"; import type { Socket } from "socket.io-client"; -import { legend } from "motion/react-client"; interface DrawerProps { stationAPI: TStation; @@ -893,7 +892,6 @@ export const DrawerSwitchControl: React.FC = ({ } }; - console.log("listPorts::", listPorts); return loading ? ( = ({ > {sortedPorts(group) - .slice(0, Math.ceil(sortedPorts(group).length / 2)) + .slice( + 0, + Math.ceil(sortedPorts(group).length / 2) + ) .filter((el) => checkFilterPort(el.status, el.name) ) @@ -1370,7 +1371,10 @@ export const DrawerSwitchControl: React.FC = ({ > {sortedPorts(group) - .slice(0, Math.ceil(sortedPorts(group).length / 2)) + .slice( + 0, + Math.ceil(sortedPorts(group).length / 2) + ) .filter((el) => checkFilterPort(el.status, el.name) ) diff --git a/FRONTEND/src/components/TerminalXTerm.tsx b/FRONTEND/src/components/TerminalXTerm.tsx index 233fe60..177835d 100644 --- a/FRONTEND/src/components/TerminalXTerm.tsx +++ b/FRONTEND/src/components/TerminalXTerm.tsx @@ -30,6 +30,7 @@ interface TerminalCLIProps { miniSize?: boolean; loadingContent?: boolean; focusTerminal?: boolean; + isSelected?: boolean; } const TerminalCLI: React.FC = ({ @@ -48,6 +49,7 @@ const TerminalCLI: React.FC = ({ onFocus, onBlur, focusTerminal, + isSelected, }) => { const xtermRef = useRef(null); const terminal = useRef(null); @@ -204,9 +206,38 @@ const TerminalCLI: React.FC = ({ } }, [focusTerminal]); + useEffect(() => { + const el = xtermRef.current; + if (el) { + if (!isSelected) { + // tắt pointer events để terminal không bắt wheel/click nữa + el.style.pointerEvents = "none"; + } else { + el.style.pointerEvents = ""; + } + } + }, [isSelected]); + return ( <>
{ + event.preventDefault(); + event.stopPropagation(); + if (!isDisabled) { + terminal.current?.focus(); + setTimeout(() => { + terminal.current?.scrollToBottom(); + }, 10); + + if (onFocus) onFocus(); + } + }} + onDoubleClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + onDoubleClick(); + }} style={{ width: "100%", height: "100%", @@ -216,14 +247,14 @@ const TerminalCLI: React.FC = ({ }} >
{ - event.preventDefault(); - event.stopPropagation(); - if (!isDisabled) { - terminal.current?.focus(); - if (onFocus) onFocus(); - } - }} + // onClick={(event) => { + // event.preventDefault(); + // event.stopPropagation(); + // if (!isDisabled) { + // terminal.current?.focus(); + // if (onFocus) onFocus(); + // } + // }} onBlurCapture={() => { if (onBlur) onBlur(); }} @@ -239,11 +270,11 @@ const TerminalCLI: React.FC = ({ padding: customStyle.padding ?? "4px", paddingRight: 0, }} - onDoubleClick={(event) => { - event.preventDefault(); - event.stopPropagation(); - onDoubleClick(); - }} + // onDoubleClick={(event) => { + // event.preventDefault(); + // event.stopPropagation(); + // onDoubleClick(); + // }} />