Phase 5 Complete by Claude Code
This commit is contained in:
@@ -1 +1,350 @@
|
||||
// TODO: Send commands to devices
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import api from "../api/client";
|
||||
|
||||
const QUICK_ACTIONS = [
|
||||
{ label: "Ping", cmd: "ping", contents: {} },
|
||||
{ label: "Report Status", cmd: "system_info", contents: { action: "report_status" } },
|
||||
{ label: "Get Settings", cmd: "system_info", contents: { action: "get_full_settings" } },
|
||||
{ label: "Network Info", cmd: "system_info", contents: { action: "network_info" } },
|
||||
{ label: "Device Time", cmd: "system_info", contents: { action: "get_device_time" } },
|
||||
{ label: "Clock Time", cmd: "system_info", contents: { action: "get_clock_time" } },
|
||||
{ label: "Firmware Status", cmd: "system_info", contents: { action: "get_firmware_status" } },
|
||||
{ label: "List Melodies", cmd: "file_manager", contents: { action: "list_melodies" } },
|
||||
{ label: "Restart", cmd: "system", contents: { action: "restart" }, danger: true },
|
||||
];
|
||||
|
||||
const STATUS_STYLES = {
|
||||
success: { bg: "var(--success-bg)", color: "var(--success-text)" },
|
||||
error: { bg: "var(--danger-bg)", color: "var(--danger-text)" },
|
||||
pending: { bg: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" },
|
||||
timeout: { bg: "var(--danger-bg)", color: "var(--danger-text)" },
|
||||
};
|
||||
|
||||
export default function CommandPanel() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState(searchParams.get("device") || "");
|
||||
const [customCmd, setCustomCmd] = useState("");
|
||||
const [customContents, setCustomContents] = useState("{}");
|
||||
const [commands, setCommands] = useState([]);
|
||||
const [commandsTotal, setCommandsTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [lastResponse, setLastResponse] = useState(null);
|
||||
const [expandedCmd, setExpandedCmd] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get("/devices").then((data) => {
|
||||
setDevices(data.devices || []);
|
||||
if (!selectedDevice && data.devices?.length > 0) {
|
||||
setSelectedDevice(data.devices[0].device_id || "");
|
||||
}
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDevice) fetchCommands();
|
||||
}, [selectedDevice]);
|
||||
|
||||
const fetchCommands = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await api.get(`/mqtt/commands/${selectedDevice}?limit=50`);
|
||||
setCommands(data.commands || []);
|
||||
setCommandsTotal(data.total || 0);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sendCommand = async (cmd, contents) => {
|
||||
if (!selectedDevice) {
|
||||
setError("Select a device first");
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError("");
|
||||
setLastResponse(null);
|
||||
try {
|
||||
const result = await api.post(`/mqtt/command/${selectedDevice}`, { cmd, contents });
|
||||
setLastResponse(result);
|
||||
// Wait briefly then refresh commands to see response
|
||||
setTimeout(fetchCommands, 2000);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sendCustomCommand = () => {
|
||||
if (!customCmd.trim()) {
|
||||
setError("Enter a command name");
|
||||
return;
|
||||
}
|
||||
let parsed;
|
||||
try {
|
||||
parsed = JSON.parse(customContents);
|
||||
} catch {
|
||||
setError("Invalid JSON in contents");
|
||||
return;
|
||||
}
|
||||
sendCommand(customCmd.trim(), parsed);
|
||||
};
|
||||
|
||||
const formatPayload = (jsonStr) => {
|
||||
if (!jsonStr) return null;
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(jsonStr), null, 2);
|
||||
} catch {
|
||||
return jsonStr;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6" style={{ color: "var(--text-heading)" }}>
|
||||
Command Panel
|
||||
</h1>
|
||||
|
||||
{/* Device Selector */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm mb-2" style={{ color: "var(--text-secondary)" }}>
|
||||
Target Device
|
||||
</label>
|
||||
<select
|
||||
value={selectedDevice}
|
||||
onChange={(e) => setSelectedDevice(e.target.value)}
|
||||
className="w-full max-w-md px-3 py-2 rounded-md text-sm border"
|
||||
style={{ backgroundColor: "var(--bg-card)", color: "var(--text-primary)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<option value="">Select a device...</option>
|
||||
{devices.map((d) => (
|
||||
<option key={d.id} value={d.device_id}>
|
||||
{d.device_name || d.device_id} ({d.device_id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="text-sm rounded-md p-3 mb-4 border"
|
||||
style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div
|
||||
className="rounded-lg border p-4 mb-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-sm font-medium mb-3" style={{ color: "var(--text-heading)" }}>
|
||||
Quick Actions
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{QUICK_ACTIONS.map((action) => (
|
||||
<button
|
||||
key={action.label}
|
||||
onClick={() => sendCommand(action.cmd, action.contents)}
|
||||
disabled={sending || !selectedDevice}
|
||||
className="px-3 py-1.5 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
backgroundColor: action.danger ? "var(--danger-btn)" : "var(--btn-primary)",
|
||||
color: "var(--text-white)",
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom Command */}
|
||||
<div
|
||||
className="rounded-lg border p-4 mb-6"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<h2 className="text-sm font-medium mb-3" style={{ color: "var(--text-heading)" }}>
|
||||
Custom Command
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>
|
||||
Command (cmd)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={customCmd}
|
||||
onChange={(e) => setCustomCmd(e.target.value)}
|
||||
placeholder="e.g. system_info"
|
||||
className="w-full max-w-md px-3 py-2 rounded-md text-sm border"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs mb-1" style={{ color: "var(--text-muted)" }}>
|
||||
Contents (JSON)
|
||||
</label>
|
||||
<textarea
|
||||
value={customContents}
|
||||
onChange={(e) => setCustomContents(e.target.value)}
|
||||
rows={4}
|
||||
className="w-full max-w-md px-3 py-2 rounded-md text-sm border font-mono"
|
||||
style={{ resize: "vertical" }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
onClick={sendCustomCommand}
|
||||
disabled={sending || !selectedDevice}
|
||||
className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||
>
|
||||
{sending ? "Sending..." : "Send Command"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last Response */}
|
||||
{lastResponse && (
|
||||
<div
|
||||
className="rounded-lg border p-4 mb-6"
|
||||
style={{
|
||||
backgroundColor: lastResponse.success ? "var(--success-bg)" : "var(--danger-bg)",
|
||||
borderColor: lastResponse.success ? "var(--success)" : "var(--danger)",
|
||||
}}
|
||||
>
|
||||
<p className="text-sm" style={{ color: lastResponse.success ? "var(--success-text)" : "var(--danger-text)" }}>
|
||||
{lastResponse.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Command History */}
|
||||
{selectedDevice && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
|
||||
Command History
|
||||
</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm" style={{ color: "var(--text-muted)" }}>
|
||||
{commandsTotal} commands
|
||||
</span>
|
||||
<button
|
||||
onClick={fetchCommands}
|
||||
className="text-sm hover:opacity-80 cursor-pointer"
|
||||
style={{ color: "var(--text-link)" }}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-4" style={{ color: "var(--text-muted)" }}>Loading...</div>
|
||||
) : commands.length === 0 ? (
|
||||
<div
|
||||
className="rounded-lg p-6 text-center text-sm border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", color: "var(--text-muted)" }}
|
||||
>
|
||||
No commands sent to this device yet.
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="rounded-lg overflow-hidden border"
|
||||
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
|
||||
>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "var(--bg-primary)", borderBottom: "1px solid var(--border-primary)" }}>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Time</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Command</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Status</th>
|
||||
<th className="px-4 py-3 text-left font-medium" style={{ color: "var(--text-secondary)" }}>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{commands.map((cmd, index) => {
|
||||
const style = STATUS_STYLES[cmd.status] || STATUS_STYLES.pending;
|
||||
const isExpanded = expandedCmd === cmd.id;
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
key={cmd.id}
|
||||
className="cursor-pointer"
|
||||
style={{
|
||||
borderBottom: (!isExpanded && index < commands.length - 1)
|
||||
? "1px solid var(--border-primary)" : "none",
|
||||
}}
|
||||
onClick={() => setExpandedCmd(isExpanded ? null : cmd.id)}
|
||||
>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{cmd.sent_at?.replace("T", " ").substring(0, 19)}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--text-heading)" }}>
|
||||
{cmd.command_name}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className="px-2 py-0.5 text-xs rounded-full"
|
||||
style={{ backgroundColor: style.bg, color: style.color }}
|
||||
>
|
||||
{cmd.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs" style={{ color: "var(--text-muted)" }}>
|
||||
{cmd.responded_at ? `Replied ${cmd.responded_at.replace("T", " ").substring(0, 19)}` : "Awaiting response..."}
|
||||
</td>
|
||||
</tr>
|
||||
{isExpanded && (
|
||||
<tr key={`${cmd.id}-detail`} style={{ borderBottom: index < commands.length - 1 ? "1px solid var(--border-primary)" : "none" }}>
|
||||
<td colSpan={4} className="px-4 py-3" style={{ backgroundColor: "var(--bg-primary)" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
|
||||
Sent Payload
|
||||
</p>
|
||||
<pre
|
||||
className="text-xs p-2 rounded overflow-auto max-h-48 font-mono"
|
||||
style={{ backgroundColor: "var(--bg-card)", color: "var(--text-primary)" }}
|
||||
>
|
||||
{formatPayload(cmd.command_payload) || "—"}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium mb-1" style={{ color: "var(--text-secondary)" }}>
|
||||
Response
|
||||
</p>
|
||||
<pre
|
||||
className="text-xs p-2 rounded overflow-auto max-h-48 font-mono"
|
||||
style={{ backgroundColor: "var(--bg-card)", color: "var(--text-primary)" }}
|
||||
>
|
||||
{formatPayload(cmd.response_payload) || "Waiting..."}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user