Update

BACKEND/app/services/line_connection.ts

@@ -521,7 +521,7 @@ export default class LineConnection {
     console.log('SPAM Break to line:', this.config.lineNumber)
     let count = 0
     const escInterval = setInterval(() => {
-      if (count >= 100) {
+      if (count >= 10) {
         clearInterval(escInterval)
         return
       }
@@ -540,5 +540,6 @@ export default class LineConnection {
     this.writeCommand('end\r\n')
     await sleep(500)
     this.writeCommand('write memory\r\n')
+    this.writeCommand('\r\n')
   }
 }

BACKEND/providers/socket_io_provider.ts

@@ -168,6 +168,7 @@ export class WebSocketIo {
       })
 
       socket.on('set_baud', async (data) => {
+        console.log('Set baud', data)
         const lineId = data.lineId
         const baud = data.baud
         const line = await Line.find(lineId)

FRONTEND/src/components/ButtonAction.tsx

@@ -14,14 +14,17 @@ export const ButtonDPELP = ({
   isDisable,
   onClick,
   selectedLines,
+  className = "",
 }: {
   socket: Socket | null;
   isDisable: boolean;
   onClick: () => void;
   selectedLines: TLine[];
+  className?: string;
 }) => {
   return (
     <Button
+      className={className ? className : ""}
       disabled={isDisable}
       miw={"100px"}
       // radius="lg"

FRONTEND/src/components/CardLine.tsx

@@ -8,6 +8,7 @@ import { convertTimestampToDate } from "../untils/helper";
 import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
 import { notifications } from "@mantine/notifications";
 import { listBaudDefault } from "../untils/constanst";
+import { IconCaretRight } from "@tabler/icons-react";
 
 const CardLine = ({
   line,
@@ -34,7 +35,6 @@ const CardLine = ({
       ? JSON.parse(localStorage.getItem("user") || "")
       : null;
   }, []);
-  const [showMenu, setShowMenu] = useState<boolean>(false);
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [valueBaud, setValueBaud] = useState<string>("");
 
@@ -140,7 +140,7 @@ const CardLine = ({
         e.stopPropagation();
         handleClick(true);
       }}
-      onMouseLeave={() => setTimeout(() => setShowMenu(false), 150)}
+      // onMouseLeave={() => setTimeout(() => setShowMenu(false), 150)}
     >
       <Flex
         justify={"space-between"}
@@ -152,17 +152,20 @@ const CardLine = ({
           shadow="md"
           position="right-start"
           transitionProps={{ transition: "pop-top-right" }}
-          opened={showMenu}
-          onChange={setShowMenu}
+          // opened={showMenu}
+          // onChange={setShowMenu}
+          trigger="hover"
           withArrow
           arrowSize={8}
+          closeOnItemClick={false}
+          closeOnClickOutside={false}
         >
           <Menu.Target>
             <Flex
               justify={"space-between"}
               direction={"column"}
               // className={classes.topBarLine}
-              onMouseEnter={() => setShowMenu(true)}
+              // onMouseEnter={() => setShowMenu(true)}
             >
               <Flex gap={"8px"}>
                 <Flex direction={"column"} justify={"center"} align={"center"}>
@@ -271,7 +274,7 @@ const CardLine = ({
               </Flex>
             </Flex>
           </Menu.Target>
-          <Menu.Dropdown style={{ width: "110px", backgroundColor: "#2d2d2d" }}>
+          <Menu.Dropdown style={{ width: "90px", backgroundColor: "#2d2d2d" }}>
             <Flex
               justify={"space-between"}
               direction={"column"}
@@ -282,6 +285,10 @@ const CardLine = ({
                 e.preventDefault();
                 e.stopPropagation();
               }}
+              onDoubleClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
               // onMouseEnter={() => setShowMenu(true)}
               // onMouseLeave={() => setTimeout(() => setShowMenu(false), 300)}
             >
@@ -289,7 +296,8 @@ const CardLine = ({
                 disabled={isDisabled}
                 variant="filled"
                 color="orange"
-                size="xs"
+                // size="xs"
+                className={classes.buttonMenuTool}
                 onClick={() => {
                   socket?.emit("write_command_line_from_web", {
                     lineIds: [line.id],
@@ -299,12 +307,13 @@ const CardLine = ({
                   setIsDisabled(true);
                   setTimeout(() => {
                     setIsDisabled(false);
-                  }, 5000);
+                  }, 2000);
                 }}
               >
                 Send Break
               </Button>
               <ButtonDPELP
+                className={classes.buttonMenuTool}
                 socket={socket}
                 selectedLines={[line]}
                 isDisable={isDisabled}
@@ -315,19 +324,25 @@ const CardLine = ({
                   }, 5000);
                 }}
               />
-              <Menu shadow="md" position="right">
+              <Menu
+                closeOnItemClick={false}
+                closeOnClickOutside={false}
+                trigger="hover"
+                shadow="md"
+                position="right"
+              >
                 <Menu.Target>
                   <Button
                     disabled={isDisabled}
                     variant="filled"
                     color="yellow"
-                    style={{ height: "30px", width: "100px" }}
+                    className={classes.buttonMenuTool}
                     onClick={() => {}}
                   >
-                    Scenario
+                    Scenario <IconCaretRight size={"14px"} />
                   </Button>
                 </Menu.Target>
-                <Menu.Dropdown style={{ width: "130px" }}>
+                <Menu.Dropdown style={{ width: "120px" }}>
                   <Flex
                     justify={"space-between"}
                     direction={"column"}
@@ -342,7 +357,6 @@ const CardLine = ({
                         selectedLines={[line]}
                         isDisable={isDisabled}
                         onClick={() => {
-                          setShowMenu(true);
                           setIsDisabled(true);
                           setTimeout(() => {
                             setIsDisabled(false);
@@ -354,18 +368,25 @@ const CardLine = ({
                   </Flex>
                 </Menu.Dropdown>
               </Menu>
-              <Menu shadow="md" position="right">
+              <Menu
+                closeOnItemClick={false}
+                closeOnClickOutside={false}
+                trigger="hover"
+                shadow="md"
+                position="right"
+              >
                 <Menu.Target>
                   <Button
+                    className={classes.buttonMenuTool}
                     disabled={isDisabled}
                     variant="filled"
                     size="xs"
                     onClick={() => {}}
                   >
-                    BAUD
+                    BAUD <IconCaretRight size={"14px"} />
                   </Button>
                 </Menu.Target>
-                <Menu.Dropdown style={{ width: "130px" }}>
+                <Menu.Dropdown style={{ width: "100px" }}>
                   <Flex
                     justify={"space-between"}
                     direction={"column"}
@@ -377,10 +398,12 @@ const CardLine = ({
                       <Button
                         key={i}
                         disabled={isDisabled}
+                        className={classes.buttonMenuTool}
                         variant="outline"
                         size="xs"
-                        onClick={() => {
-                          setShowMenu(true);
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
                           socket?.emit("set_baud", {
                             lineId: line.id,
                             baud: el,
@@ -423,6 +446,7 @@ const CardLine = ({
                   </Text>
                 </Box>
                 <Button
+                  className={classes.buttonMenuTool}
                   mt={"8px"}
                   disabled={isDisabled}
                   variant="outline"
@@ -435,6 +459,7 @@ const CardLine = ({
                   ON
                 </Button>
                 <Button
+                  className={classes.buttonMenuTool}
                   mt={"8px"}
                   disabled={isDisabled}
                   variant="outline"
@@ -447,6 +472,7 @@ const CardLine = ({
                   OFF
                 </Button>
                 <Button
+                  className={classes.buttonMenuTool}
                   mt={"8px"}
                   disabled={isDisabled}
                   variant="outline"

FRONTEND/src/components/Component.module.css

@@ -128,3 +128,12 @@
 .buttonCopy:hover {
   background-color: #ccc !important;
 }
+
+.buttonMenuTool {
+  font-size: 11px !important;
+  width: 80px !important;
+  min-width: 80px !important;
+  height: 30px !important;
+  padding-right: 4px !important;
+  padding-left: 4px !important;
+}