feat(api): add create and update functionality for charge points with registration status
This commit is contained in:
@@ -1,21 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Button, Chip, Input, Label, Modal, Spinner, Table, TextField } from "@heroui/react";
|
||||
import { Pencil, TrashBin } from "@gravity-ui/icons";
|
||||
import { Button, Chip, Input, Label, ListBox, Modal, Select, Spinner, Table, TextField } from "@heroui/react";
|
||||
import { Plus, Pencil, PlugConnection, TrashBin } from "@gravity-ui/icons";
|
||||
import { api, type ChargePoint } from "@/lib/api";
|
||||
|
||||
const statusColorMap: Record<string, "success" | "danger" | "warning"> = {
|
||||
Available: "success",
|
||||
Charging: "success",
|
||||
Occupied: "warning",
|
||||
Reserved: "warning",
|
||||
Faulted: "danger",
|
||||
Unavailable: "danger",
|
||||
Preparing: "warning",
|
||||
Finishing: "warning",
|
||||
SuspendedEV: "warning",
|
||||
SuspendedEVSE: "warning",
|
||||
|
||||
const statusLabelMap: Record<string, string> = {
|
||||
Available: "空闲中",
|
||||
Charging: "充电中",
|
||||
Preparing: "准备中",
|
||||
Finishing: "结束中",
|
||||
SuspendedEV: "EV 暂停",
|
||||
SuspendedEVSE: "EVSE 暂停",
|
||||
Reserved: "已预约",
|
||||
Faulted: "故障",
|
||||
Unavailable: "不可用",
|
||||
Occupied: "占用",
|
||||
};
|
||||
|
||||
const statusDotClass: Record<string, string> = {
|
||||
Available: "bg-success",
|
||||
Charging: "bg-accent animate-pulse",
|
||||
Preparing: "bg-warning animate-pulse",
|
||||
Finishing: "bg-warning",
|
||||
SuspendedEV: "bg-warning",
|
||||
SuspendedEVSE: "bg-warning",
|
||||
Reserved: "bg-warning",
|
||||
Faulted: "bg-danger",
|
||||
Unavailable: "bg-danger",
|
||||
Occupied: "bg-warning",
|
||||
};
|
||||
|
||||
const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
|
||||
@@ -24,11 +38,28 @@ const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
|
||||
Rejected: "danger",
|
||||
};
|
||||
|
||||
type FormData = {
|
||||
chargePointIdentifier: string;
|
||||
chargePointVendor: string;
|
||||
chargePointModel: string;
|
||||
registrationStatus: "Accepted" | "Pending" | "Rejected";
|
||||
feePerKwh: string;
|
||||
};
|
||||
|
||||
const EMPTY_FORM: FormData = {
|
||||
chargePointIdentifier: "",
|
||||
chargePointVendor: "",
|
||||
chargePointModel: "",
|
||||
registrationStatus: "Pending",
|
||||
feePerKwh: "0",
|
||||
};
|
||||
|
||||
export default function ChargePointsPage() {
|
||||
const [chargePoints, setChargePoints] = useState<ChargePoint[]>([]);
|
||||
const [editTarget, setEditTarget] = useState<ChargePoint | null>(null);
|
||||
const [feeInput, setFeeInput] = useState("0");
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [formTarget, setFormTarget] = useState<ChargePoint | null>(null);
|
||||
const [formData, setFormData] = useState<FormData>(EMPTY_FORM);
|
||||
const [formBusy, setFormBusy] = useState(false);
|
||||
const [deleteTarget, setDeleteTarget] = useState<ChargePoint | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const hasFetched = useRef(false);
|
||||
@@ -45,22 +76,54 @@ export default function ChargePointsPage() {
|
||||
}
|
||||
}, [load]);
|
||||
|
||||
const openEdit = (cp: ChargePoint) => {
|
||||
setEditTarget(cp);
|
||||
setFeeInput(String(cp.feePerKwh));
|
||||
const openCreate = () => {
|
||||
setFormTarget(null);
|
||||
setFormData(EMPTY_FORM);
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editTarget) return;
|
||||
const fee = Math.max(0, Math.round(Number(feeInput) || 0));
|
||||
setSaving(true);
|
||||
const openEdit = (cp: ChargePoint) => {
|
||||
setFormTarget(cp);
|
||||
setFormData({
|
||||
chargePointIdentifier: cp.chargePointIdentifier,
|
||||
chargePointVendor: cp.chargePointVendor ?? "",
|
||||
chargePointModel: cp.chargePointModel ?? "",
|
||||
registrationStatus: cp.registrationStatus as FormData["registrationStatus"],
|
||||
feePerKwh: String(cp.feePerKwh),
|
||||
});
|
||||
setFormOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.chargePointIdentifier.trim()) return;
|
||||
setFormBusy(true);
|
||||
try {
|
||||
await api.chargePoints.update(String(editTarget.id), { feePerKwh: fee });
|
||||
setChargePoints((prev) =>
|
||||
prev.map((cp) => (cp.id === editTarget.id ? { ...cp, feePerKwh: fee } : cp)),
|
||||
);
|
||||
const fee = Math.max(0, Math.round(Number(formData.feePerKwh) || 0));
|
||||
if (formTarget) {
|
||||
// Edit
|
||||
const updated = await api.chargePoints.update(String(formTarget.id), {
|
||||
chargePointVendor: formData.chargePointVendor,
|
||||
chargePointModel: formData.chargePointModel,
|
||||
registrationStatus: formData.registrationStatus,
|
||||
feePerKwh: fee,
|
||||
});
|
||||
setChargePoints((prev) =>
|
||||
prev.map((cp) => (cp.id === formTarget.id ? { ...updated, connectors: cp.connectors } : cp)),
|
||||
);
|
||||
} else {
|
||||
// Create
|
||||
const created = await api.chargePoints.create({
|
||||
chargePointIdentifier: formData.chargePointIdentifier.trim(),
|
||||
chargePointVendor: formData.chargePointVendor.trim() || undefined,
|
||||
chargePointModel: formData.chargePointModel.trim() || undefined,
|
||||
registrationStatus: formData.registrationStatus,
|
||||
feePerKwh: fee,
|
||||
});
|
||||
setChargePoints((prev) => [created, ...prev]);
|
||||
}
|
||||
setFormOpen(false);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setFormBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -76,13 +139,112 @@ export default function ChargePointsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const isEdit = formTarget !== null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-foreground">充电桩管理</h1>
|
||||
<p className="mt-0.5 text-sm text-muted">共 {chargePoints.length} 台设备</p>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-foreground">充电桩管理</h1>
|
||||
<p className="mt-0.5 text-sm text-muted">共 {chargePoints.length} 台设备</p>
|
||||
</div>
|
||||
<Button size="sm" variant="secondary" onPress={openCreate}>
|
||||
<Plus className="size-4" />
|
||||
新建充电桩
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Create / Edit modal */}
|
||||
<Modal isOpen={formOpen} onOpenChange={(open) => { if (!formBusy) setFormOpen(open); }}>
|
||||
<Modal.Backdrop>
|
||||
<Modal.Container scroll="outside">
|
||||
<Modal.Dialog className="sm:max-w-md">
|
||||
<Modal.CloseTrigger />
|
||||
<Modal.Header>
|
||||
<Modal.Heading>{isEdit ? "编辑充电桩" : "新建充电桩"}</Modal.Heading>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="space-y-3">
|
||||
<TextField fullWidth isRequired isReadOnly={isEdit}>
|
||||
<Label className="text-sm font-medium">标识符</Label>
|
||||
<Input
|
||||
placeholder="CP001"
|
||||
value={formData.chargePointIdentifier}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, chargePointIdentifier: e.target.value }))}
|
||||
/>
|
||||
</TextField>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">品牌</Label>
|
||||
<Input
|
||||
placeholder="ABB"
|
||||
value={formData.chargePointVendor}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, chargePointVendor: e.target.value }))}
|
||||
/>
|
||||
</TextField>
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">型号</Label>
|
||||
<Input
|
||||
placeholder="Terra AC"
|
||||
value={formData.chargePointModel}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, chargePointModel: e.target.value }))}
|
||||
/>
|
||||
</TextField>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm font-medium">注册状态</Label>
|
||||
<Select
|
||||
fullWidth
|
||||
selectedKey={formData.registrationStatus}
|
||||
onSelectionChange={(key) =>
|
||||
setFormData((f) => ({ ...f, registrationStatus: String(key) as FormData["registrationStatus"] }))
|
||||
}
|
||||
>
|
||||
<Select.Trigger>
|
||||
<Select.Value />
|
||||
<Select.Indicator />
|
||||
</Select.Trigger>
|
||||
<Select.Popover>
|
||||
<ListBox>
|
||||
<ListBox.Item id="Accepted">Accepted</ListBox.Item>
|
||||
<ListBox.Item id="Pending">Pending</ListBox.Item>
|
||||
<ListBox.Item id="Rejected">Rejected</ListBox.Item>
|
||||
</ListBox>
|
||||
</Select.Popover>
|
||||
</Select>
|
||||
</div>
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">电价（分/kWh）</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
value={formData.feePerKwh}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, feePerKwh: e.target.value }))}
|
||||
/>
|
||||
</TextField>
|
||||
{!isEdit && (
|
||||
<p className="text-xs text-muted">
|
||||
手动创建的充电桩默认注册状态为 Pending，需手动改为 Accepted 后才可正常充电。
|
||||
</p>
|
||||
)}
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onPress={() => setFormOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
isDisabled={formBusy || !formData.chargePointIdentifier.trim()}
|
||||
onPress={handleSubmit}
|
||||
>
|
||||
{formBusy ? <Spinner size="sm" /> : isEdit ? "保存" : "创建"}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
|
||||
<Table>
|
||||
<Table.ScrollContainer>
|
||||
<Table.Content aria-label="充电桩列表" className="min-w-200">
|
||||
@@ -150,76 +312,38 @@ export default function ChargePointsPage() {
|
||||
)}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{cp.connectors.length === 0 ? (
|
||||
<span className="text-muted text-sm">—</span>
|
||||
) : (
|
||||
cp.connectors.map((conn) => (
|
||||
<Chip
|
||||
[...cp.connectors].sort((a, b) => a.connectorId - b.connectorId).map((conn) => (
|
||||
<div
|
||||
key={conn.id}
|
||||
color={statusColorMap[conn.status] ?? "warning"}
|
||||
size="sm"
|
||||
variant="soft"
|
||||
className="flex items-center gap-1.5 rounded-lg border border-border bg-surface-secondary px-2 py-1"
|
||||
>
|
||||
#{conn.connectorId} {conn.status}
|
||||
</Chip>
|
||||
<PlugConnection className="size-3 shrink-0 text-muted" />
|
||||
<span className="text-xs font-medium tabular-nums text-muted">
|
||||
#{conn.connectorId}
|
||||
</span>
|
||||
<span className="h-3 w-px bg-border" />
|
||||
<span
|
||||
className={`size-1.5 shrink-0 rounded-full ${
|
||||
statusDotClass[conn.status] ?? "bg-warning"
|
||||
}`}
|
||||
/>
|
||||
<span className="text-xs text-foreground">
|
||||
{statusLabelMap[conn.status] ?? conn.status}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div className="flex items-center gap-1">
|
||||
<Modal>
|
||||
<Button
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="tertiary"
|
||||
onPress={() => openEdit(cp)}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
</Button>
|
||||
<Modal.Backdrop>
|
||||
<Modal.Container scroll="outside">
|
||||
<Modal.Dialog className="sm:max-w-96">
|
||||
<Modal.CloseTrigger />
|
||||
<Modal.Header>
|
||||
<Modal.Heading>配置电价</Modal.Heading>
|
||||
</Modal.Header>
|
||||
<Modal.Body className="space-y-3">
|
||||
<p className="text-sm text-muted">
|
||||
充电桩：
|
||||
<span className="font-mono font-medium text-foreground">
|
||||
{cp.chargePointIdentifier}
|
||||
</span>
|
||||
</p>
|
||||
<TextField fullWidth>
|
||||
<Label className="text-sm font-medium">电价（分/kWh）</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
placeholder="0"
|
||||
value={feeInput}
|
||||
onChange={(e) => setFeeInput(e.target.value)}
|
||||
/>
|
||||
</TextField>
|
||||
<p className="text-xs text-muted">
|
||||
设为 0 则免费充电。当前：¥
|
||||
{((Number(feeInput) || 0) / 100).toFixed(2)}/kWh
|
||||
</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="flex justify-end gap-2">
|
||||
<Button slot="close" variant="ghost">
|
||||
取消
|
||||
</Button>
|
||||
<Button isDisabled={saving} slot="close" onPress={handleSave}>
|
||||
{saving ? <Spinner size="sm" /> : "保存"}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
<Button isIconOnly size="sm" variant="tertiary" onPress={() => openEdit(cp)}>
|
||||
<Pencil className="size-4" />
|
||||
</Button>
|
||||
<Modal>
|
||||
<Button
|
||||
isIconOnly
|
||||
@@ -273,3 +397,4 @@ export default function ChargePointsPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ import {
|
||||
useFilter,
|
||||
} from "@heroui/react";
|
||||
import { parseDate } from "@internationalized/date";
|
||||
import { Pencil, TrashBin } from "@gravity-ui/icons";
|
||||
import { Pencil, Plus, TrashBin } from "@gravity-ui/icons";
|
||||
import { api, type IdTag, type UserRow } from "@/lib/api";
|
||||
|
||||
const statusColorMap: Record<string, "success" | "danger" | "warning"> = {
|
||||
@@ -333,7 +333,8 @@ export default function IdTagsPage() {
|
||||
<p className="mt-0.5 text-sm text-muted">共 {tags.length} 张</p>
|
||||
</div>
|
||||
<Modal>
|
||||
<Button variant="secondary" onPress={openCreate}>
|
||||
<Button size="sm" variant="secondary" onPress={openCreate}>
|
||||
<Plus className="size-4" />
|
||||
新增储值卡
|
||||
</Button>
|
||||
<Modal.Backdrop>
|
||||
@@ -457,19 +458,52 @@ export default function IdTagsPage() {
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
{/* Delete button */}
|
||||
<Button
|
||||
isDisabled={deletingTag === tag.idTag}
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="danger-soft"
|
||||
onPress={() => handleDelete(tag.idTag)}
|
||||
>
|
||||
{deletingTag === tag.idTag ? (
|
||||
<Spinner size="sm" />
|
||||
) : (
|
||||
<TrashBin className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Modal>
|
||||
<Button
|
||||
isDisabled={deletingTag === tag.idTag}
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="danger-soft"
|
||||
>
|
||||
{deletingTag === tag.idTag ? (
|
||||
<Spinner size="sm" />
|
||||
) : (
|
||||
<TrashBin className="size-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Modal.Backdrop>
|
||||
<Modal.Container scroll="outside">
|
||||
<Modal.Dialog className="sm:max-w-96">
|
||||
<Modal.CloseTrigger />
|
||||
<Modal.Header>
|
||||
<Modal.Heading>确认删除储值卡</Modal.Heading>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<p className="text-sm text-muted">
|
||||
将永久删除储值卡{" "}
|
||||
<span className="font-mono font-medium text-foreground">
|
||||
{tag.idTag}
|
||||
</span>
|
||||
，此操作不可恢复。
|
||||
</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="flex justify-end gap-2">
|
||||
<Button slot="close" variant="ghost">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
slot="close"
|
||||
variant="danger"
|
||||
isDisabled={deletingTag === tag.idTag}
|
||||
onPress={() => handleDelete(tag.idTag)}
|
||||
>
|
||||
{deletingTag === tag.idTag ? <Spinner size="sm" /> : "确认删除"}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
Reference in New Issue
Block a user