45 lines
2.0 KiB
TypeScript
45 lines
2.0 KiB
TypeScript
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
|
|
import type { DecodeReading } from "../../../../types/types";
|
|
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
|
|
|
|
const SightingEntryTable = () => {
|
|
const { state } = useCameraFeedContext();
|
|
const cameraFeedID = state.cameraFeedID;
|
|
const { entryQuery } = useSightingEntryAndExit(cameraFeedID);
|
|
|
|
const isLoading = entryQuery?.isFetching;
|
|
const readings = entryQuery?.data?.decodes;
|
|
|
|
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
|
|
return (
|
|
<div className="border border-gray-600 rounded-lg m-2">
|
|
<div className="overflow-y-auto ">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
|
|
<tr>
|
|
<th className="px-4 py-3 font-semibold">VRM</th>
|
|
<th className="px-4 py-3 font-semibold">Bay ID</th>
|
|
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
|
|
<th className="px-4 py-3 font-semibold">First Seen</th>
|
|
<th className="px-4 py-3 font-semibold">Last Seen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700">
|
|
{readings?.map((reading: DecodeReading) => (
|
|
<tr className="hover:bg-gray-800/30 transition-colors" key={reading?.id}>
|
|
<td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
|
|
<td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
|
|
<td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
|
|
<td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
|
|
<td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SightingEntryTable;
|