Improve APC and switch control validation and logging

Added console logs for command and scenario execution in line_connection.ts for better traceability. Changed socket_io_provider.ts to save state every 10 seconds instead of 60. Updated DrawerControl.tsx to disable controls and show status messages when APC or switch IPs are unavailable or not connected, improving UI feedback and preventing invalid actions.

BACKEND/app/services/line_connection.ts

@@ -237,6 +237,10 @@ export default class LineConnection {
       return
     }
 
+    console.log(
+      `Write command "${cmd}" to line ${this.config.lineNumber} of ${this.config.stationName}`
+    )
+
     this.client.write(cmd)
     if (userName) {
       // appendLog(
@@ -286,6 +290,10 @@ export default class LineConnection {
       return
     }
 
+    console.log(
+      `Run scenario "${script?.title}" to line ${this.config.lineNumber} of ${this.config.stationName}`
+    )
+
     this.isRunningScript = true
     const now = Date.now()
     this.outputScenario += `\n\n---start-scenarios---${now}---${userName}---${script?.title}---\n---scenario---${script?.title}---${now}---\n`

BACKEND/providers/socket_io_provider.ts

@@ -537,8 +537,8 @@ export class WebSocketIo {
       console.log(`Socket server is running on port ${SOCKET_IO_PORT}`)
     })
 
-    // 🔹 Tự động lưu dữ liệu định kỳ mỗi 60 giây
+    // 🔹 Tự động lưu dữ liệu định kỳ mỗi 10 giây
-    setInterval(async () => await this.saveState(), 60000)
+    setInterval(async () => await this.saveState(), 10000)
 
     return io
   }

FRONTEND/src/components/DrawerControl.tsx

@@ -125,7 +125,7 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
       }
     });
 
-    if (result.length > 0) apc.outlets = result;
+    if (result.length > 0 && apc?.status === "CONNECTED") apc.outlets = result;
     else {
       Array.from({ length: 8 }).forEach((_, index) => {
         result.push({
@@ -245,12 +245,18 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
               <Text fw={700} c={"#514d4d"} fz={"xs"}>
                 APC 1
               </Text>
-              {RenderAPCStatus(dataStation?.apc1)}
+              {dataStation?.apc_1_ip ? (
+                RenderAPCStatus(dataStation?.apc1)
+              ) : (
+                <Text fw={800} c="red" fz={"12px"}>
+                  APC not available
+                </Text>
+              )}
               {dataStation?.apc1?.status !== "CONNECTED" ? (
                 <Button
                   style={{ height: "24px" }}
                   size="xs"
-                  disabled={isSubmit}
+                  disabled={isSubmit || !dataStation?.apc_1_ip}
                   variant="filled"
                   color="yellow"
                   onClick={() => {
@@ -273,7 +279,11 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
                 <div style={{ height: "24px" }}></div>
               )}
               <Button
-                disabled={isSubmit}
+                disabled={
+                  isSubmit ||
+                  !dataStation?.apc_1_ip ||
+                  dataStation?.apc1?.status !== "CONNECTED"
+                }
                 title={
                   listOutletSelected.filter((el) => el.apc === 1).length ===
                   listOutlet.length
@@ -419,7 +429,11 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
                     padding="xs"
                     radius="md"
                     withBorder
-                    className={`${isSubmit ? classes.isDisabled : ""}`}
+                    className={`${
+                      isSubmit || !dataStation?.apc_1_ip
+                        ? classes.isDisabled
+                        : ""
+                    }`}
                     style={{
                       paddingLeft: 0,
                       paddingRight: 0,
@@ -461,12 +475,18 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
               <Text fw={700} c={"#514d4d"} fz={"xs"}>
                 APC 2
               </Text>
-              {RenderAPCStatus(dataStation?.apc2)}
+              {dataStation?.apc_2_ip ? (
+                RenderAPCStatus(dataStation?.apc2)
+              ) : (
+                <Text fw={800} c="red" fz={"12px"}>
+                  APC not available
+                </Text>
+              )}
               {dataStation?.apc2?.status !== "CONNECTED" ? (
                 <Button
                   style={{ height: "24px" }}
                   size="xs"
-                  disabled={isSubmit}
+                  disabled={isSubmit || !dataStation?.apc_2_ip}
                   variant="filled"
                   color="yellow"
                   onClick={() => {
@@ -489,7 +509,11 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
                 <div style={{ height: "24px" }}></div>
               )}
               <Button
-                disabled={isSubmit}
+                disabled={
+                  isSubmit ||
+                  !dataStation?.apc_2_ip ||
+                  dataStation?.apc2?.status !== "CONNECTED"
+                }
                 title={
                   listOutletSelected.filter((el) => el.apc === 2).length ===
                   listOutlet.length
@@ -636,7 +660,11 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
                     padding="xs"
                     radius="md"
                     withBorder
-                    className={`${isSubmit ? classes.isDisabled : ""}`}
+                    className={`${
+                      isSubmit || !dataStation?.apc_2_ip
+                        ? classes.isDisabled
+                        : ""
+                    }`}
                     style={{
                       paddingLeft: 0,
                       paddingRight: 0,
@@ -859,15 +887,15 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
             {dataStation?.switch ? (
               RenderAPCStatus(dataStation?.switch)
             ) : (
-              <Text size="sm" fw={800} c="red">
+              <Text fw={800} c="red" fz={"12px"}>
-                DISCONNECTED
+                Switch not available
               </Text>
             )}
           </Box>
           {dataStation?.switch?.status !== "CONNECTED" ? (
             <Button
               size="xs"
-              disabled={isSubmit}
+              disabled={isSubmit || !dataStation?.switch_control_ip}
               variant="filled"
               color="yellow"
               onClick={() => {
@@ -890,7 +918,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
           )}
           <Button
             className={classes.buttonMenuTool}
-            disabled={isSubmit}
+            disabled={isSubmit || !dataStation?.switch_control_ip}
             title={
               listPortsSelected.length === listPorts.flat().length &&
               listPorts.flat().length > 0