84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import { Component, createResource, For, Show } from 'solid-js';
|
|
import { commandsApi } from '../api/client';
|
|
|
|
const CommandQueue: Component = () => {
|
|
const [commands, { refetch }] = createResource(commandsApi.list);
|
|
|
|
const updateCommandStatus = async (id: number, status: string) => {
|
|
try {
|
|
await commandsApi.updateStatus(id, { status });
|
|
refetch();
|
|
} catch (err) {
|
|
console.error('Failed to update command:', err);
|
|
alert(`Error: ${err}`);
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleString();
|
|
};
|
|
|
|
return (
|
|
<div class="space-y-4">
|
|
<h2 class="text-2xl font-semibold">Command Queue</h2>
|
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden">
|
|
<Show when={!commands.loading} fallback={<div class="p-4">Loading...</div>}>
|
|
<For each={commands()} fallback={
|
|
<div class="p-8 text-center text-gray-500">
|
|
No commands in queue
|
|
</div>
|
|
}>
|
|
{(cmd) => (
|
|
<div class="border-b p-4 hover:bg-gray-50">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class={`px-2 py-1 rounded-full text-xs font-semibold ${
|
|
cmd.status === 'verified' ? 'bg-green-100 text-green-800' :
|
|
cmd.status === 'rejected' ? 'bg-red-100 text-red-800' :
|
|
'bg-yellow-100 text-yellow-800'
|
|
}`}>
|
|
{cmd.status}
|
|
</span>
|
|
<span class="text-sm text-gray-500">
|
|
{formatDate(cmd.received_at)}
|
|
</span>
|
|
</div>
|
|
<pre class="text-sm bg-gray-100 p-3 rounded overflow-x-auto">
|
|
{JSON.stringify(cmd.command, null, 2)}
|
|
</pre>
|
|
<Show when={cmd.notes}>
|
|
<div class="mt-2 text-sm text-gray-600">
|
|
<strong>Notes:</strong> {cmd.notes}
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
<Show when={cmd.status === 'unverified'}>
|
|
<div class="ml-4 flex flex-col gap-2">
|
|
<button
|
|
onClick={() => updateCommandStatus(cmd.id, 'verified')}
|
|
class="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700"
|
|
>
|
|
Verify
|
|
</button>
|
|
<button
|
|
onClick={() => updateCommandStatus(cmd.id, 'rejected')}
|
|
class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommandQueue;
|