Merge pull request 'Add connecting state for line connection process' (#17) from that into main

Reviewed-on: #17

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,

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(

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");

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>

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>

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

FRONTEND/src/untils/types.ts

@@ -100,6 +100,7 @@ export type TLine = {
   interface?: string;
   baud?: number;
   tickets?: TDataTicket[];
+  connecting?: boolean;
 };
 
 export type TUser = {