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;
|
||||
|
||||
// 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue