94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { Monitor, DoorOpen } from "lucide-react";
|
||
import { ComputerCard } from "../cards/computer-card";
|
||
import { useMachineNumber } from "../../hooks/useMachineNumber";
|
||
import type { ClientFolderStatus } from "@/types/folder";
|
||
|
||
export function DeviceGrid({
|
||
devices,
|
||
folderStatuses,
|
||
isCheckingFolder,
|
||
}: {
|
||
devices: any[];
|
||
folderStatuses?: Map<string, ClientFolderStatus>;
|
||
isCheckingFolder?: boolean;
|
||
}) {
|
||
const getMachineNumber = useMachineNumber();
|
||
const deviceMap = new Map<number, any>();
|
||
|
||
devices.forEach((device) => {
|
||
const number = getMachineNumber(device.id || "");
|
||
if (number > 0 && number <= 40) deviceMap.set(number, device);
|
||
});
|
||
|
||
const totalRows = 5;
|
||
|
||
const renderRow = (rowIndex: number) => {
|
||
// Đảo ngược: 21-40 sang trái, 1-20 sang phải
|
||
const leftStart = 21 + (totalRows - 1 - rowIndex) * 4;
|
||
const rightStart = (totalRows - 1 - rowIndex) * 4 + 1;
|
||
|
||
return (
|
||
<div key={rowIndex} className="flex items-center justify-center gap-3">
|
||
{/* Bên trái (21–40) */}
|
||
{Array.from({ length: 4 }).map((_, i) => {
|
||
const pos = leftStart + (3 - i);
|
||
const device = deviceMap.get(pos);
|
||
const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
|
||
const folderStatus = folderStatuses?.get(macAddress);
|
||
|
||
return (
|
||
<ComputerCard
|
||
key={pos}
|
||
device={device}
|
||
position={pos}
|
||
folderStatus={folderStatus}
|
||
isCheckingFolder={isCheckingFolder}
|
||
/>
|
||
);
|
||
})}
|
||
|
||
{/* Đường chia giữa */}
|
||
<div className="w-32 flex items-center justify-center">
|
||
<div className="h-px w-full bg-border border-t-2 border-dashed" />
|
||
</div>
|
||
|
||
{/* Bên phải (1–20) */}
|
||
{Array.from({ length: 4 }).map((_, i) => {
|
||
const pos = rightStart + (3 - i);
|
||
const device = deviceMap.get(pos);
|
||
const macAddress = device?.networkInfos?.[0]?.macAddress || device?.id;
|
||
const folderStatus = folderStatuses?.get(macAddress);
|
||
|
||
return (
|
||
<ComputerCard
|
||
key={pos}
|
||
device={device}
|
||
position={pos}
|
||
folderStatus={folderStatus}
|
||
isCheckingFolder={isCheckingFolder}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="px-0.5 py-8 space-y-6">
|
||
<div className="space-y-4">
|
||
{Array.from({ length: totalRows }).map((_, i) => renderRow(i))}
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 pb-6 border-b-2 border-dashed">
|
||
<div className="flex items-center gap-3 px-6 py-4 bg-muted rounded-lg border-2 border-border">
|
||
<DoorOpen className="h-6 w-6 text-muted-foreground" />
|
||
<span className="font-semibold text-lg">Cửa Ra Vào</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 px-6 py-4 bg-primary/10 rounded-lg border-2 border-primary/20">
|
||
<Monitor className="h-6 w-6 text-primary" />
|
||
<span className="font-semibold text-lg">Bàn Giảng Viên</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|