From 429ec2cd7a7a318f7fb7c85cdf5e642338b7b997 Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Thu, 27 Nov 2025 14:27:37 +0700
Subject: [PATCH] Add connecting state for line connection process

Introduces a 'connecting' state to lines during connection attempts, updating both backend and frontend to emit and handle a new 'line_connecting' event. UI now displays a connecting animation, and disables actions for longer durations to improve user feedback. Also adds a POE indicator for switch ports in DrawerControl.
---
 BACKEND/app/services/line_connection.ts   |  2 +-
 BACKEND/providers/socket_io_provider.ts   |  5 ++++-
 FRONTEND/src/App.tsx                      | 16 +++++++++++++---
 FRONTEND/src/components/CardLine.tsx      | 16 +++++++++++++++-
 FRONTEND/src/components/DrawerControl.tsx | 20 +++++++++++++++++---
 FRONTEND/src/components/ModalTerminal.tsx |  4 ++--
 FRONTEND/src/untils/types.ts              |  1 +
 7 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/BACKEND/app/services/line_connection.ts b/BACKEND/app/services/line_connection.ts
index 02d0a1f..1f1f781 100644
--- a/BACKEND/app/services/line_connection.ts
+++ b/BACKEND/app/services/line_connection.ts
@@ -199,7 +199,7 @@ export default class LineConnection {
       this.client.on('timeout', () => {
         if (resolvedOrRejected) return
         resolvedOrRejected = true
-        const message = 'Connection timeout!!\r\n'
+        const message = '\r\nConnection timeout!!\r\n'
         this.config.output += message
         this.socketIO.emit('line_output', {
           stationId,
diff --git a/BACKEND/providers/socket_io_provider.ts b/BACKEND/providers/socket_io_provider.ts
index 0ef6530..0198bc6 100644
--- a/BACKEND/providers/socket_io_provider.ts
+++ b/BACKEND/providers/socket_io_provider.ts
@@ -637,7 +637,10 @@ export class WebSocketIo {
 
           const linesData = await Line.findBy('id', lineId)
           const stationData = await Station.findBy('id', stationId)
-
+          io.emit('line_connecting', {
+            stationId,
+            lineId,
+          })
           if (linesData && stationData) {
             this.lineConnecting.push(lineId)
             await this.connectLine(
diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index 5bae57d..b646d3d 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -161,7 +161,7 @@ function App() {
     socket.on("line_connected", (data) =>
       updateValueLineStation(
         data?.lineId,
-        { status: data.status },
+        { status: data.status, connecting: false },
         data?.stationId
       )
     );
@@ -169,7 +169,7 @@ function App() {
     socket.on("line_disconnected", (data) =>
       updateValueLineStation(
         data?.lineId,
-        { status: data.status },
+        { status: data.status, connecting: false },
         data?.stationId
       )
     );
@@ -194,7 +194,7 @@ function App() {
     socket?.on("line_error", (data) => {
       updateValueLineStation(
         data?.lineId,
-        { netOutput: data.error },
+        { netOutput: data.error, connecting: false },
         data?.stationId
       );
     });
@@ -327,6 +327,16 @@ function App() {
       }, 100);
     });
 
+    socket?.on("line_connecting", (data) => {
+      setTimeout(() => {
+        updateValueLineStation(
+          data?.lineId,
+          { connecting: true },
+          data?.stationId
+        );
+      }, 100);
+    });
+
     // ✅ cleanup on unmount or when socket changes
     return () => {
       socket.off("init");
diff --git a/FRONTEND/src/components/CardLine.tsx b/FRONTEND/src/components/CardLine.tsx
index 1c211ae..37d7ef9 100644
--- a/FRONTEND/src/components/CardLine.tsx
+++ b/FRONTEND/src/components/CardLine.tsx
@@ -9,6 +9,7 @@ import { ButtonDPELP, ButtonScenario } from "./ButtonAction";
 import { notifications } from "@mantine/notifications";
 import { listBaudDefault } from "../untils/constanst";
 import { IconCaretRight } from "@tabler/icons-react";
+import { motion } from "motion/react";
 
 const CardLine = ({
   line,
@@ -251,7 +252,7 @@ const CardLine = ({
                         : ""}
                     </div>
                   </Flex>
-                  <Flex direction={"column"} gap={"4px"} w={"100%"}>
+                  <Flex justify={"space-between"} gap={"4px"} w={"100%"}>
                     <div className={classes.info_line}>
                       SN:{" "}
                       <Text
@@ -270,6 +271,19 @@ const CardLine = ({
                         {line?.inventory?.sn || ""}
                       </Text>
                     </div>
+                    {line?.connecting && (
+                      <motion.div
+                        style={{ fontSize: "11px", color: "red" }}
+                        animate={{ opacity: [0.2, 1, 0.2] }}
+                        transition={{
+                          duration: 1.2,
+                          repeat: Infinity,
+                          ease: "easeInOut",
+                        }}
+                      >
+                        connecting...
+                      </motion.div>
+                    )}
                   </Flex>
                   <Flex justify={"space-between"} w={"100%"} display={"none"}>
                     <Box>
diff --git a/FRONTEND/src/components/DrawerControl.tsx b/FRONTEND/src/components/DrawerControl.tsx
index e7921dd..48f554d 100644
--- a/FRONTEND/src/components/DrawerControl.tsx
+++ b/FRONTEND/src/components/DrawerControl.tsx
@@ -997,7 +997,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               setIsSubmit(true);
               setTimeout(() => {
                 setIsSubmit(false);
-              }, 5000);
+              }, 15000);
             }}
           >
             {listPortsSelected.length === 0 ||
@@ -1054,7 +1054,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               setIsSubmit(true);
               setTimeout(() => {
                 setIsSubmit(false);
-              }, 5000);
+              }, 10000);
             }}
           >
             {listPortsSelected.length === 0 ||
@@ -1111,7 +1111,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
               setIsSubmit(true);
               setTimeout(() => {
                 setIsSubmit(false);
-              }, 5000);
+              }, 10000);
             }}
           >
             {listPortsSelected.length === 0 ||
@@ -1224,6 +1224,20 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
                                       {normalizePortName(port.name)}
                                     </Text>
                                   </Box>
+                                  <Box
+                                    style={{
+                                      display:
+                                        port.poe === "ON" ? "block" : "none",
+                                      position: "absolute",
+                                      bottom: "2px",
+                                      right: "2px",
+                                      zIndex: 10,
+                                    }}
+                                  >
+                                    <Text size="10px" fs={"italic"}>
+                                      poe
+                                    </Text>
+                                  </Box>
                                 </Card>
                               ))}
                           </Flex>
diff --git a/FRONTEND/src/components/ModalTerminal.tsx b/FRONTEND/src/components/ModalTerminal.tsx
index 9c0177b..03e4a54 100644
--- a/FRONTEND/src/components/ModalTerminal.tsx
+++ b/FRONTEND/src/components/ModalTerminal.tsx
@@ -325,7 +325,7 @@ const ModalTerminal = ({
     setIsDisable(true);
     setTimeout(() => {
       setIsDisable(false);
-    }, 5000);
+    }, 10000);
   };
 
   const controlSwitch = (action: string) => {
@@ -346,7 +346,7 @@ const ModalTerminal = ({
     setIsDisable(true);
     setTimeout(() => {
       setIsDisable(false);
-    }, 10000);
+    }, 15000);
   };
 
   const findSwitchPort = (portName: string): SwitchPortsProps | null => {
diff --git a/FRONTEND/src/untils/types.ts b/FRONTEND/src/untils/types.ts
index 03ee99c..58885b0 100644
--- a/FRONTEND/src/untils/types.ts
+++ b/FRONTEND/src/untils/types.ts
@@ -100,6 +100,7 @@ export type TLine = {
   interface?: string;
   baud?: number;
   tickets?: TDataTicket[];
+  connecting?: boolean;
 };
 
 export type TUser = {