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>
|
||||
<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>
|
||||
|
||||
@@ -265,7 +265,7 @@ export default function ChargePage() {
|
||||
});
|
||||
|
||||
const selectedCp = chargePoints.find((cp) => cp.id === selectedCpId) ?? null;
|
||||
const myTags = idTags.filter((t) => t.status === "Accepted");
|
||||
const myTags = idTags?.filter((t) => t.status === "Accepted") ?? [];
|
||||
|
||||
const startMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
|
||||
Reference in New Issue
Block a user