From 30b0d25d3d9f6c4518d834eebc434ea25125c724 Mon Sep 17 00:00:00 2001
From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com>
Date: Thu, 27 Nov 2025 14:32:31 +0700
Subject: [PATCH] =?UTF-8?q?fix=20show=20th=C3=B4ng=20tin=20item=20line=20>?=
 =?UTF-8?q?=208?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FRONTEND/src/App.tsx | 204 +++++++++++++++++++++++++++++++++----------
 1 file changed, 156 insertions(+), 48 deletions(-)

diff --git a/FRONTEND/src/App.tsx b/FRONTEND/src/App.tsx
index b646d3d..e6b5b92 100644
--- a/FRONTEND/src/App.tsx
+++ b/FRONTEND/src/App.tsx
@@ -53,6 +53,15 @@ import BottomToolBar from "./components/BottomToolBar";
 
 const apiUrl = import.meta.env.VITE_BACKEND_URL;
 
+// Helper: chia mảng thành các chunk theo size
+const chunkArray = <T,>(array: T[], size: number): T[][] => {
+  const result: T[][] = [];
+  for (let i = 0; i < array.length; i += size) {
+    result.push(array.slice(i, i + size));
+  }
+  return result;
+};
+
 /**
  * Main Component
  */
@@ -161,7 +170,7 @@ function App() {
     socket.on("line_connected", (data) =>
       updateValueLineStation(
         data?.lineId,
-        { status: data.status, connecting: false },
+        { status: data.status },
         data?.stationId
       )
     );
@@ -169,7 +178,7 @@ function App() {
     socket.on("line_disconnected", (data) =>
       updateValueLineStation(
         data?.lineId,
-        { status: data.status, connecting: false },
+        { status: data.status },
         data?.stationId
       )
     );
@@ -194,7 +203,7 @@ function App() {
     socket?.on("line_error", (data) => {
       updateValueLineStation(
         data?.lineId,
-        { netOutput: data.error, connecting: false },
+        { netOutput: data.error },
         data?.stationId
       );
     });
@@ -327,16 +336,6 @@ 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");
@@ -506,41 +505,150 @@ function App() {
                     className={componentClasses.hideScrollBar}
                   >
                     {station.lines.length > 0 ? (
-                      <Grid
-                        gutter="md"
-                        style={{
-                          margin: 0,
-                          width: "100%",
-                          // overflowX: "hidden",
-                        }}
-                      >
-                        {station.lines.map((line, i) => (
-                          <Grid.Col
-                            key={i}
-                            span={3}
-                            style={{
-                              display: "flex",
-                              height: "100%",
-                              maxWidth: "100%",
-                              overflow: "hidden",
-                            }}
-                          >
-                            <CardLine
-                              socket={socket}
-                              stationItem={station}
-                              line={line}
-                              selectedLines={selectedLines}
-                              setSelectedLines={setSelectedLines}
-                              openTerminal={openTerminal}
-                              loadTerminal={
-                                loadingTerminal &&
-                                Number(station.id) === Number(activeTab)
-                              }
-                              scenarios={scenarios}
-                            />
-                          </Grid.Col>
-                        ))}
-                      </Grid>
+                      station.lines.length < 9 ? (
+                        <Grid
+                          gutter="md"
+                          style={{
+                            margin: 0,
+                            width: "100%",
+                          }}
+                        >
+                          {station.lines.map((line, i) => (
+                            <Grid.Col
+                              key={line.id ?? i}
+                              span={3}
+                              style={{
+                                display: "flex",
+                                height: "100%",
+                                maxWidth: "100%",
+                                overflow: "hidden",
+                              }}
+                            >
+                              <CardLine
+                                socket={socket}
+                                stationItem={station}
+                                line={line}
+                                selectedLines={selectedLines}
+                                setSelectedLines={setSelectedLines}
+                                openTerminal={openTerminal}
+                                loadTerminal={
+                                  loadingTerminal &&
+                                  Number(station.id) === Number(activeTab)
+                                }
+                                scenarios={scenarios}
+                              />
+                            </Grid.Col>
+                          ))}
+                        </Grid>
+                      ) : (
+                        // >= 9 lines: chia làm 2 cột, mỗi cột chứa 1/2 số line,
+                        // mỗi cột hiển thị 2 item trên một "hàng" như ví dụ yêu cầu
+                        (() => {
+                          const total = station.lines.length;
+                          const half = Math.ceil(total / 2);
+                          const leftLines = station.lines.slice(0, half);
+                          const rightLines = station.lines.slice(half);
+
+                          const leftChunks = chunkArray(leftLines, 2);
+                          const rightChunks = chunkArray(rightLines, 2);
+                          const numRows = Math.max(
+                            leftChunks.length,
+                            rightChunks.length
+                          );
+
+                          return (
+                            <>
+                              {Array.from({ length: numRows }).map(
+                                (_, rowIndex) => {
+                                  const leftRow = leftChunks[rowIndex] || [];
+                                  const rightRow = rightChunks[rowIndex] || [];
+
+                                  return (
+                                    <Grid
+                                      key={rowIndex}
+                                      gutter="md"
+                                      style={{
+                                        margin: 0,
+                                        width: "100%",
+                                      }}
+                                    >
+                                      {/* Cột A */}
+                                      <Grid.Col span={6}>
+                                        <Grid gutter="md">
+                                          {leftRow.map((line, i) => (
+                                            <Grid.Col
+                                              key={line.id ?? `L-${rowIndex}-${i}`}
+                                              span={6}
+                                              style={{
+                                                display: "flex",
+                                                height: "100%",
+                                                maxWidth: "100%",
+                                                overflow: "hidden",
+                                              }}
+                                            >
+                                              <CardLine
+                                                socket={socket}
+                                                stationItem={station}
+                                                line={line}
+                                                selectedLines={selectedLines}
+                                                setSelectedLines={
+                                                  setSelectedLines
+                                                }
+                                                openTerminal={openTerminal}
+                                                loadTerminal={
+                                                  loadingTerminal &&
+                                                  Number(station.id) ===
+                                                    Number(activeTab)
+                                                }
+                                                scenarios={scenarios}
+                                              />
+                                            </Grid.Col>
+                                          ))}
+                                        </Grid>
+                                      </Grid.Col>
+
+                                      {/* Cột B */}
+                                      <Grid.Col span={6}>
+                                        <Grid gutter="md">
+                                          {rightRow.map((line, i) => (
+                                            <Grid.Col
+                                              key={line.id ?? `R-${rowIndex}-${i}`}
+                                              span={6}
+                                              style={{
+                                                display: "flex",
+                                                height: "100%",
+                                                maxWidth: "100%",
+                                                overflow: "hidden",
+                                              }}
+                                            >
+                                              <CardLine
+                                                socket={socket}
+                                                stationItem={station}
+                                                line={line}
+                                                selectedLines={selectedLines}
+                                                setSelectedLines={
+                                                  setSelectedLines
+                                                }
+                                                openTerminal={openTerminal}
+                                                loadTerminal={
+                                                  loadingTerminal &&
+                                                  Number(station.id) ===
+                                                    Number(activeTab)
+                                                }
+                                                scenarios={scenarios}
+                                              />
+                                            </Grid.Col>
+                                          ))}
+                                        </Grid>
+                                      </Grid.Col>
+                                    </Grid>
+                                  );
+                                }
+                              )}
+                            </>
+                          );
+                        })()
+                      )
                     ) : (
                       <Text ta="center" c="dimmed" mt="lg">
                         No lines configured