megaproxy/BMS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
mega 2026-03-19 11:32:17 +00:00
commit 4b98219bf7
144 changed files with 31561 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

243
frontend/components/settings/SensorTable.tsx Normal file
View file

@ -0,0 +1,243 @@
"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>
);
}