Update scroll terminal

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--

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<string>("");
   const [focusTerminal, setFocusTerminal] = useState<boolean>(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
+            }
           />
         </Box>
         <Box>

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<DrawerProps> = ({
     }
   };
 
-  console.log("listPorts::", listPorts);
   return loading ? (
     <Box
       style={{
@@ -1208,7 +1206,10 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                         >
                           <Flex gap={"8px"} wrap={"nowrap"}>
                             {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<DrawerProps> = ({
                         >
                           <Flex gap={"8px"} wrap={"nowrap"}>
                             {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)
                               )

FRONTEND/src/components/TerminalXTerm.tsx

@@ -30,6 +30,7 @@ interface TerminalCLIProps {
   miniSize?: boolean;
   loadingContent?: boolean;
   focusTerminal?: boolean;
+  isSelected?: boolean;
 }
 
 const TerminalCLI: React.FC<TerminalCLIProps> = ({
@@ -48,6 +49,7 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
   onFocus,
   onBlur,
   focusTerminal,
+  isSelected,
 }) => {
   const xtermRef = useRef<HTMLDivElement>(null);
   const terminal = useRef<Terminal>(null);
@@ -204,9 +206,38 @@ const TerminalCLI: React.FC<TerminalCLIProps> = ({
     }
   }, [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 (
     <>
       <div
+        onClick={(event) => {
+          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<TerminalCLIProps> = ({
         }}
       >
         <div
-          onClick={(event) => {
-            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<TerminalCLIProps> = ({
             padding: customStyle.padding ?? "4px",
             paddingRight: 0,
           }}
-          onDoubleClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            onDoubleClick();
-          }}
+          // onDoubleClick={(event) => {
+          //   event.preventDefault();
+          //   event.stopPropagation();
+          //   onDoubleClick();
+          // }}
         />
       </div>
     </>