generated from Dicken/dickendock
Commit 6: Adminbereich (TanStack Router, 8 Menüpunkte, Scan-Logs)
This commit is contained in:
220
apps/frontend/src/routes/admin/DevicesPage.tsx
Normal file
220
apps/frontend/src/routes/admin/DevicesPage.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Button } from "@launchpad/ui";
|
||||
import { useDevices, type DeviceWithServices } from "../../hooks/useDevices.js";
|
||||
import { AdminPageHeader } from "./AdminPageHeader.js";
|
||||
|
||||
async function createDevice(input: { hostname: string; ip: string }) {
|
||||
const res = await fetch("/api/devices", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? `Gerät konnte nicht angelegt werden (HTTP ${res.status})`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function deleteDevice(id: string) {
|
||||
const res = await fetch(`/api/devices/${id}`, { method: "DELETE" });
|
||||
if (!res.ok && res.status !== 404) {
|
||||
throw new Error(`Gerät konnte nicht gelöscht werden (HTTP ${res.status})`);
|
||||
}
|
||||
}
|
||||
|
||||
interface ScanResult {
|
||||
scannedPorts: number;
|
||||
created: number;
|
||||
updated: number;
|
||||
}
|
||||
|
||||
async function scanDevice(id: string): Promise<ScanResult> {
|
||||
const res = await fetch(`/api/scan/devices/${id}`, { method: "POST" });
|
||||
const body = await res.json();
|
||||
if (!res.ok) {
|
||||
throw new Error(body.detail ?? body.error ?? `Scan fehlgeschlagen (HTTP ${res.status})`);
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
function DeviceRow({ device }: { device: DeviceWithServices }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [scanMessage, setScanMessage] = useState<string | null>(null);
|
||||
|
||||
const scanMutation = useMutation({
|
||||
mutationFn: () => scanDevice(device.id),
|
||||
onSuccess: (result) => {
|
||||
setScanMessage(
|
||||
`${result.scannedPorts} Port(s) offen · ${result.created} neu · ${result.updated} aktualisiert`
|
||||
);
|
||||
queryClient.invalidateQueries({ queryKey: ["devices"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["services"] });
|
||||
},
|
||||
onError: (err: Error) => setScanMessage(err.message),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => deleteDevice(device.id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["devices"] }),
|
||||
});
|
||||
|
||||
return (
|
||||
<tr className="border-b border-black/5 last:border-0 dark:border-white/5">
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium text-black dark:text-white">{device.hostname}</div>
|
||||
<div className="text-xs text-black/40 dark:text-white/40">{device.ip}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 text-xs ${
|
||||
device.online ? "text-emerald-600 dark:text-emerald-400" : "text-black/40 dark:text-white/40"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`h-1.5 w-1.5 rounded-full ${device.online ? "bg-emerald-500" : "bg-black/20 dark:bg-white/20"}`}
|
||||
/>
|
||||
{device.online ? "Online" : "Offline"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-black/60 dark:text-white/60">{device.services.length}</td>
|
||||
<td className="px-4 py-3 text-xs text-black/40 dark:text-white/40">
|
||||
{device.lastScan ? new Date(device.lastScan).toLocaleString("de-DE") : "nie gescannt"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{scanMessage ? (
|
||||
<span className="max-w-[16rem] truncate text-xs text-black/40 dark:text-white/40" title={scanMessage}>
|
||||
{scanMessage}
|
||||
</span>
|
||||
) : null}
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setScanMessage(null);
|
||||
scanMutation.mutate();
|
||||
}}
|
||||
disabled={scanMutation.isPending}
|
||||
>
|
||||
{scanMutation.isPending ? "Scanne …" : "Jetzt scannen"}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
onClick={() => deleteMutation.mutate()}
|
||||
disabled={deleteMutation.isPending}
|
||||
>
|
||||
Löschen
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function AddDeviceForm() {
|
||||
const queryClient = useQueryClient();
|
||||
const [hostname, setHostname] = useState("");
|
||||
const [ip, setIp] = useState("");
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: createDevice,
|
||||
onSuccess: () => {
|
||||
setHostname("");
|
||||
setIp("");
|
||||
queryClient.invalidateQueries({ queryKey: ["devices"] });
|
||||
},
|
||||
});
|
||||
|
||||
function handleSubmit(e: FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!hostname.trim() || !ip.trim()) return;
|
||||
mutation.mutate({ hostname: hostname.trim(), ip: ip.trim() });
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="flex items-end gap-2">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-black/50 dark:text-white/50">
|
||||
Hostname
|
||||
</label>
|
||||
<input
|
||||
value={hostname}
|
||||
onChange={(e) => setHostname(e.target.value)}
|
||||
placeholder="z. B. synology"
|
||||
className="rounded-lg border border-black/10 bg-white px-3 py-1.5 text-sm
|
||||
text-black outline-none focus:border-black/30 dark:border-white/10
|
||||
dark:bg-white/5 dark:text-white dark:focus:border-white/30"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-black/50 dark:text-white/50">
|
||||
IP-Adresse
|
||||
</label>
|
||||
<input
|
||||
value={ip}
|
||||
onChange={(e) => setIp(e.target.value)}
|
||||
placeholder="192.168.1.10"
|
||||
className="rounded-lg border border-black/10 bg-white px-3 py-1.5 text-sm
|
||||
text-black outline-none focus:border-black/30 dark:border-white/10
|
||||
dark:bg-white/5 dark:text-white dark:focus:border-white/30"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="primary" disabled={mutation.isPending}>
|
||||
Gerät hinzufügen
|
||||
</Button>
|
||||
{mutation.isError ? (
|
||||
<span className="text-xs text-red-500">{(mutation.error as Error).message}</span>
|
||||
) : null}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function DevicesPage() {
|
||||
const { data: devices, isLoading, isError } = useDevices();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AdminPageHeader
|
||||
title="Geräte"
|
||||
description="Alle bekannten Geräte in deinem Netzwerk. Scans laufen nur auf Knopfdruck."
|
||||
/>
|
||||
|
||||
<div className="mb-6">
|
||||
<AddDeviceForm />
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-black/40 dark:text-white/40">Lade Geräte …</p>
|
||||
) : isError ? (
|
||||
<p className="text-sm text-red-500">Geräte konnten nicht geladen werden.</p>
|
||||
) : devices && devices.length > 0 ? (
|
||||
<div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-black/10 bg-black/[0.02] text-left text-xs
|
||||
uppercase tracking-wide text-black/40 dark:border-white/10 dark:bg-white/5 dark:text-white/40">
|
||||
<th className="px-4 py-2 font-medium">Gerät</th>
|
||||
<th className="px-4 py-2 font-medium">Status</th>
|
||||
<th className="px-4 py-2 font-medium">Dienste</th>
|
||||
<th className="px-4 py-2 font-medium">Letzter Scan</th>
|
||||
<th className="px-4 py-2" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{devices.map((device) => (
|
||||
<DeviceRow key={device.id} device={device} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-black/40 dark:text-white/40">
|
||||
Noch keine Geräte angelegt. Füge oben ein Gerät hinzu oder nutze den FritzBox-Scan
|
||||
unter „Scanner“.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user