fix show thông tin item line > 8
This commit is contained in:
Truong Vo
parent
79322507a9
commit
30b0d25d3d
|
|
@ -53,6 +53,15 @@ import BottomToolBar from "./components/BottomToolBar";
|
||||||
|
|
||||||
const apiUrl = import.meta.env.VITE_BACKEND_URL;
|
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
|
* Main Component
|
||||||
*/
|
*/
|
||||||
|
|
@ -161,7 +170,7 @@ function App() {
|
||||||
socket.on("line_connected", (data) =>
|
socket.on("line_connected", (data) =>
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ status: data.status, connecting: false },
|
{ status: data.status },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -169,7 +178,7 @@ function App() {
|
||||||
socket.on("line_disconnected", (data) =>
|
socket.on("line_disconnected", (data) =>
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ status: data.status, connecting: false },
|
{ status: data.status },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -194,7 +203,7 @@ function App() {
|
||||||
socket?.on("line_error", (data) => {
|
socket?.on("line_error", (data) => {
|
||||||
updateValueLineStation(
|
updateValueLineStation(
|
||||||
data?.lineId,
|
data?.lineId,
|
||||||
{ netOutput: data.error, connecting: false },
|
{ netOutput: data.error },
|
||||||
data?.stationId
|
data?.stationId
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
@ -327,16 +336,6 @@ function App() {
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
socket?.on("line_connecting", (data) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
updateValueLineStation(
|
|
||||||
data?.lineId,
|
|
||||||
{ connecting: true },
|
|
||||||
data?.stationId
|
|
||||||
);
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
|
|
||||||
// ✅ cleanup on unmount or when socket changes
|
// ✅ cleanup on unmount or when socket changes
|
||||||
return () => {
|
return () => {
|
||||||
socket.off("init");
|
socket.off("init");
|
||||||
|
|
@ -506,41 +505,150 @@ function App() {
|
||||||
className={componentClasses.hideScrollBar}
|
className={componentClasses.hideScrollBar}
|
||||||
>
|
>
|
||||||
{station.lines.length > 0 ? (
|
{station.lines.length > 0 ? (
|
||||||
<Grid
|
station.lines.length < 9 ? (
|
||||||
gutter="md"
|
<Grid
|
||||||
style={{
|
gutter="md"
|
||||||
margin: 0,
|
style={{
|
||||||
width: "100%",
|
margin: 0,
|
||||||
// overflowX: "hidden",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{station.lines.map((line, i) => (
|
{station.lines.map((line, i) => (
|
||||||
<Grid.Col
|
<Grid.Col
|
||||||
key={i}
|
key={line.id ?? i}
|
||||||
span={3}
|
span={3}
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CardLine
|
<CardLine
|
||||||
socket={socket}
|
socket={socket}
|
||||||
stationItem={station}
|
stationItem={station}
|
||||||
line={line}
|
line={line}
|
||||||
selectedLines={selectedLines}
|
selectedLines={selectedLines}
|
||||||
setSelectedLines={setSelectedLines}
|
setSelectedLines={setSelectedLines}
|
||||||
openTerminal={openTerminal}
|
openTerminal={openTerminal}
|
||||||
loadTerminal={
|
loadTerminal={
|
||||||
loadingTerminal &&
|
loadingTerminal &&
|
||||||
Number(station.id) === Number(activeTab)
|
Number(station.id) === Number(activeTab)
|
||||||
}
|
}
|
||||||
scenarios={scenarios}
|
scenarios={scenarios}
|
||||||
/>
|
/>
|
||||||
</Grid.Col>
|
</Grid.Col>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</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">
|
<Text ta="center" c="dimmed" mt="lg">
|
||||||
No lines configured
|
No lines configured
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue