64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import type { PotentialDevice } from "../types";
|
|
|
|
interface PotentialDeviceCardProps {
|
|
deviceId: string;
|
|
group: PotentialDevice[];
|
|
isExpanded: boolean;
|
|
onToggleExpand: (deviceId: string) => void;
|
|
}
|
|
|
|
export const PotentialDeviceCard = ({
|
|
deviceId,
|
|
group,
|
|
isExpanded,
|
|
onToggleExpand,
|
|
}: PotentialDeviceCardProps) => {
|
|
const latest = group.reduce((prev, current) =>
|
|
prev.last_seen > current.last_seen ? prev : current
|
|
);
|
|
|
|
return (
|
|
<div key={deviceId} className="card">
|
|
<div className="card-header">
|
|
<div>
|
|
<h3 className="device-name">
|
|
<span className="emoji">❓</span> {latest.class}
|
|
</h3>
|
|
<div className="device-meta">
|
|
<span className="badge badge-protocol">{latest.protocol}</span>{" "}
|
|
{latest.model}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card-content">
|
|
<div className="device-meta">ID: {deviceId}</div>
|
|
<div className="device-meta">
|
|
Last seen: {new Date(latest.last_seen * 1000).toLocaleString()}
|
|
</div>
|
|
<div className="device-meta">Events: {group.length}</div>
|
|
|
|
{isExpanded && (
|
|
<div className="events-list">
|
|
<h4>History</h4>
|
|
{group
|
|
.sort((a, b) => b.last_seen - a.last_seen)
|
|
.map((event, idx) => (
|
|
<div key={idx} className="event-item">
|
|
<div className="event-time">
|
|
{new Date(event.last_seen * 1000).toLocaleTimeString()}
|
|
</div>
|
|
<div className="event-data">{event.last_data}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="actions">
|
|
<button onClick={() => onToggleExpand(deviceId)}>
|
|
{isExpanded ? "Collapse" : "Expand"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|