243 lines
10 KiB
TypeScript
243 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { Plus, Pencil, Trash2, Search, Eye, ToggleLeft, ToggleRight, RefreshCw } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import { fetchSensors, updateSensor, deleteSensor, type SensorDevice, type DeviceType, type Protocol } from "@/lib/api";
|
|
|
|
const SITE_ID = "sg-01";
|
|
|
|
export const DEVICE_TYPE_LABELS: Record<string, string> = {
|
|
ups: "UPS",
|
|
generator: "Generator",
|
|
crac: "CRAC Unit",
|
|
chiller: "Chiller",
|
|
ats: "Transfer Switch",
|
|
rack: "Rack PDU",
|
|
network_switch: "Network Switch",
|
|
leak: "Leak Sensor",
|
|
fire_zone: "Fire / VESDA",
|
|
custom: "Custom",
|
|
};
|
|
|
|
export const PROTOCOL_LABELS: Record<string, string> = {
|
|
mqtt: "MQTT",
|
|
modbus_tcp: "Modbus TCP",
|
|
modbus_rtu: "Modbus RTU",
|
|
snmp: "SNMP",
|
|
bacnet: "BACnet",
|
|
http: "HTTP Poll",
|
|
};
|
|
|
|
const TYPE_COLORS: Record<string, string> = {
|
|
ups: "bg-blue-500/10 text-blue-400",
|
|
generator: "bg-amber-500/10 text-amber-400",
|
|
crac: "bg-cyan-500/10 text-cyan-400",
|
|
chiller: "bg-sky-500/10 text-sky-400",
|
|
ats: "bg-purple-500/10 text-purple-400",
|
|
rack: "bg-green-500/10 text-green-400",
|
|
network_switch: "bg-indigo-500/10 text-indigo-400",
|
|
leak: "bg-teal-500/10 text-teal-400",
|
|
fire_zone: "bg-red-500/10 text-red-400",
|
|
custom: "bg-muted text-muted-foreground",
|
|
};
|
|
|
|
const PROTOCOL_COLORS: Record<string, string> = {
|
|
mqtt: "bg-green-500/10 text-green-400",
|
|
modbus_tcp: "bg-orange-500/10 text-orange-400",
|
|
modbus_rtu: "bg-orange-500/10 text-orange-400",
|
|
snmp: "bg-violet-500/10 text-violet-400",
|
|
bacnet: "bg-pink-500/10 text-pink-400",
|
|
http: "bg-yellow-500/10 text-yellow-400",
|
|
};
|
|
|
|
interface Props {
|
|
onAdd: () => void;
|
|
onEdit: (s: SensorDevice) => void;
|
|
onDetail: (id: number) => void;
|
|
}
|
|
|
|
export function SensorTable({ onAdd, onEdit, onDetail }: Props) {
|
|
const [sensors, setSensors] = useState<SensorDevice[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState("");
|
|
const [typeFilter, setTypeFilter] = useState<string>("all");
|
|
const [confirmDel, setConfirmDel] = useState<number | null>(null);
|
|
const [toggling, setToggling] = useState<number | null>(null);
|
|
|
|
const load = useCallback(async () => {
|
|
try {
|
|
const data = await fetchSensors(SITE_ID);
|
|
setSensors(data);
|
|
} catch { /* keep stale */ }
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const handleToggle = async (s: SensorDevice) => {
|
|
setToggling(s.id);
|
|
try {
|
|
const updated = await updateSensor(s.id, { enabled: !s.enabled });
|
|
setSensors(prev => prev.map(x => x.id === s.id ? updated : x));
|
|
} catch { /* ignore */ }
|
|
finally { setToggling(null); }
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
await deleteSensor(id);
|
|
setSensors(prev => prev.filter(x => x.id !== id));
|
|
} catch { /* ignore */ }
|
|
finally { setConfirmDel(null); }
|
|
};
|
|
|
|
const filtered = sensors.filter(s => {
|
|
const matchType = typeFilter === "all" || s.device_type === typeFilter;
|
|
const q = search.toLowerCase();
|
|
const matchSearch = !q || s.device_id.toLowerCase().includes(q) || s.name.toLowerCase().includes(q) || (s.room_id ?? "").toLowerCase().includes(q);
|
|
return matchType && matchSearch;
|
|
});
|
|
|
|
const typeOptions = [...new Set(sensors.map(s => s.device_type))].sort();
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Toolbar */}
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<div className="relative flex-1 min-w-48">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
|
<input
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
placeholder="Search by name or ID..."
|
|
className="w-full pl-8 pr-3 py-1.5 text-sm bg-muted/30 border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={typeFilter}
|
|
onChange={e => setTypeFilter(e.target.value)}
|
|
className="text-sm bg-muted/30 border border-border rounded-md px-2 py-1.5 text-foreground focus:outline-none"
|
|
>
|
|
<option value="all">All types</option>
|
|
{typeOptions.map(t => (
|
|
<option key={t} value={t}>{DEVICE_TYPE_LABELS[t] ?? t}</option>
|
|
))}
|
|
</select>
|
|
<Button size="sm" variant="ghost" onClick={load} className="gap-1.5">
|
|
<RefreshCw className="w-3.5 h-3.5" /> Refresh
|
|
</Button>
|
|
<Button size="sm" onClick={onAdd} className="gap-1.5">
|
|
<Plus className="w-3.5 h-3.5" /> Add Sensor
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
{filtered.length} of {sensors.length} devices
|
|
</div>
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="h-10 rounded bg-muted/30 animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="text-center py-12 text-sm text-muted-foreground">
|
|
No sensors found{search ? ` matching "${search}"` : ""}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto rounded-lg border border-border/40">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border/30 bg-muted/10">
|
|
<th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Device ID</th>
|
|
<th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Name</th>
|
|
<th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Type</th>
|
|
<th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Room</th>
|
|
<th className="text-left px-3 py-2 text-xs font-medium text-muted-foreground">Protocol</th>
|
|
<th className="text-center px-3 py-2 text-xs font-medium text-muted-foreground">Enabled</th>
|
|
<th className="text-right px-3 py-2 text-xs font-medium text-muted-foreground">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filtered.map(s => (
|
|
<tr key={s.id} className="border-b border-border/10 hover:bg-muted/10 transition-colors">
|
|
<td className="px-3 py-2 font-mono text-xs text-muted-foreground">{s.device_id}</td>
|
|
<td className="px-3 py-2 font-medium">{s.name}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full", TYPE_COLORS[s.device_type] ?? "bg-muted text-muted-foreground")}>
|
|
{DEVICE_TYPE_LABELS[s.device_type] ?? s.device_type}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-xs text-muted-foreground">{s.room_id ?? "—"}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full", PROTOCOL_COLORS[s.protocol] ?? "bg-muted text-muted-foreground")}>
|
|
{PROTOCOL_LABELS[s.protocol] ?? s.protocol}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<button
|
|
onClick={() => handleToggle(s)}
|
|
disabled={toggling === s.id}
|
|
className={cn("transition-opacity", toggling === s.id && "opacity-50")}
|
|
>
|
|
{s.enabled
|
|
? <ToggleRight className="w-5 h-5 text-green-400" />
|
|
: <ToggleLeft className="w-5 h-5 text-muted-foreground" />
|
|
}
|
|
</button>
|
|
</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center justify-end gap-1">
|
|
<button
|
|
onClick={() => onDetail(s.id)}
|
|
className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
|
|
title="View details"
|
|
>
|
|
<Eye className="w-3.5 h-3.5" />
|
|
</button>
|
|
<button
|
|
onClick={() => onEdit(s)}
|
|
className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
|
|
title="Edit"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
</button>
|
|
{confirmDel === s.id ? (
|
|
<div className="flex items-center gap-1 ml-1">
|
|
<button
|
|
onClick={() => handleDelete(s.id)}
|
|
className="text-[10px] px-1.5 py-0.5 rounded bg-destructive/10 text-destructive hover:bg-destructive/20 font-medium"
|
|
>
|
|
Confirm
|
|
</button>
|
|
<button
|
|
onClick={() => setConfirmDel(null)}
|
|
className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground hover:bg-muted/80"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => setConfirmDel(s.id)}
|
|
className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-destructive"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|