feat(web): add tooltip for charge point status with online/offline indication
This commit is contained in:
@@ -13,6 +13,7 @@ import {
|
||||
Spinner,
|
||||
Table,
|
||||
TextField,
|
||||
Tooltip,
|
||||
} from "@heroui/react";
|
||||
import {
|
||||
Plus,
|
||||
@@ -424,12 +425,33 @@ export default function ChargePointsPage() {
|
||||
{chargePoints.map((cp) => (
|
||||
<Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
|
||||
<Table.Cell>
|
||||
<Link
|
||||
href={`/dashboard/charge-points/${cp.id}`}
|
||||
className="font-medium text-accent"
|
||||
>
|
||||
{cp.chargePointIdentifier}
|
||||
</Link>
|
||||
<Tooltip delay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`size-2 shrink-0 rounded-full ${
|
||||
cp.lastHeartbeatAt &&
|
||||
dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
|
||||
? "bg-success"
|
||||
: "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
<Link
|
||||
href={`/dashboard/charge-points/${cp.id}`}
|
||||
className="font-medium text-accent"
|
||||
>
|
||||
{cp.chargePointIdentifier}
|
||||
</Link>
|
||||
</div>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content placement="start">
|
||||
{cp.lastHeartbeatAt
|
||||
? dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
|
||||
? "在线"
|
||||
: "离线"
|
||||
: "从未连接"}
|
||||
</Tooltip.Content>
|
||||
</Tooltip>
|
||||
</Table.Cell>
|
||||
{isAdmin && (
|
||||
<Table.Cell>
|
||||
|
||||
Reference in New Issue
Block a user