generated from Dicken/dickendock
Commit 6: Adminbereich (TanStack Router, 8 Menüpunkte, Scan-Logs)
This commit is contained in:
218
apps/frontend/src/routes/admin/ServicesPage.tsx
Normal file
218
apps/frontend/src/routes/admin/ServicesPage.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Button } from "@launchpad/ui";
|
||||
import type { Service } from "@launchpad/shared";
|
||||
import { useServices } from "../../hooks/useServices.js";
|
||||
import { AdminPageHeader } from "./AdminPageHeader.js";
|
||||
|
||||
interface ServicePatch {
|
||||
displayName?: string;
|
||||
category?: string | null;
|
||||
alias?: string[];
|
||||
order?: number;
|
||||
favorite?: boolean;
|
||||
}
|
||||
|
||||
async function patchService(id: string, patch: ServicePatch): Promise<Service> {
|
||||
const res = await fetch(`/api/services/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(patch),
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`Dienst konnte nicht aktualisiert werden (HTTP ${res.status})`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function deleteServiceRequest(id: string) {
|
||||
const res = await fetch(`/api/services/${id}`, { method: "DELETE" });
|
||||
if (!res.ok && res.status !== 404) {
|
||||
throw new Error(`Dienst konnte nicht gelöscht werden (HTTP ${res.status})`);
|
||||
}
|
||||
}
|
||||
|
||||
function EditForm({ service, onDone }: { service: Service; onDone: () => void }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [displayName, setDisplayName] = useState(service.displayName);
|
||||
const [category, setCategory] = useState(service.category ?? "");
|
||||
const [alias, setAlias] = useState(service.alias.join(", "));
|
||||
const [order, setOrder] = useState(String(service.order));
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: () =>
|
||||
patchService(service.id, {
|
||||
displayName: displayName.trim(),
|
||||
category: category.trim() || null,
|
||||
alias: alias
|
||||
.split(",")
|
||||
.map((a) => a.trim())
|
||||
.filter(Boolean),
|
||||
order: Number(order) || 0,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["services"] });
|
||||
onDone();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<tr className="border-b border-black/5 bg-black/[0.02] last:border-0 dark:border-white/5 dark:bg-white/5">
|
||||
<td colSpan={6} className="px-4 py-3">
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Name</label>
|
||||
<input
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
|
||||
dark:border-white/10 dark:bg-white/10 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Kategorie</label>
|
||||
<input
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
|
||||
dark:border-white/10 dark:bg-white/10 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">
|
||||
Alias (kommagetrennt)
|
||||
</label>
|
||||
<input
|
||||
value={alias}
|
||||
onChange={(e) => setAlias(e.target.value)}
|
||||
className="w-48 rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
|
||||
dark:border-white/10 dark:bg-white/10 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs text-black/50 dark:text-white/50">Reihenfolge</label>
|
||||
<input
|
||||
value={order}
|
||||
onChange={(e) => setOrder(e.target.value)}
|
||||
type="number"
|
||||
className="w-20 rounded-lg border border-black/10 bg-white px-2 py-1 text-sm
|
||||
dark:border-white/10 dark:bg-white/10 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
<Button size="sm" variant="primary" onClick={() => mutation.mutate()} disabled={mutation.isPending}>
|
||||
Speichern
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={onDone}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceRow({ service }: { service: Service }) {
|
||||
const queryClient = useQueryClient();
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const favoriteMutation = useMutation({
|
||||
mutationFn: () => patchService(service.id, { favorite: !service.favorite }),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["services"] }),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => deleteServiceRequest(service.id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["services"] }),
|
||||
});
|
||||
|
||||
if (editing) {
|
||||
return <EditForm service={service} onDone={() => setEditing(false)} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="border-b border-black/5 last:border-0 dark:border-white/5">
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => favoriteMutation.mutate()}
|
||||
aria-label={service.favorite ? "Favorit entfernen" : "Als Favorit markieren"}
|
||||
className={`text-lg ${service.favorite ? "text-amber-500" : "text-black/15 hover:text-amber-400 dark:text-white/15"}`}
|
||||
>
|
||||
★
|
||||
</button>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium text-black dark:text-white">{service.displayName}</div>
|
||||
<div className="text-xs text-black/40 dark:text-white/40">{service.hostname}</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-black/60 dark:text-white/60">{service.category ?? "–"}</td>
|
||||
<td className="px-4 py-3 text-black/60 dark:text-white/60">
|
||||
{service.alias.length > 0 ? service.alias.join(", ") : "–"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<a
|
||||
href={service.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-black/60 underline decoration-black/20 hover:text-black dark:text-white/60 dark:decoration-white/20 dark:hover:text-white"
|
||||
>
|
||||
öffnen
|
||||
</a>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Button size="sm" onClick={() => setEditing(true)}>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
<Button size="sm" variant="danger" onClick={() => deleteMutation.mutate()} disabled={deleteMutation.isPending}>
|
||||
Löschen
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServicesPage() {
|
||||
const { data: services, isLoading, isError } = useServices();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AdminPageHeader
|
||||
title="Dienste"
|
||||
description="Name, Kategorie, Alias und Reihenfolge bleiben bei erneuten Scans erhalten."
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-black/40 dark:text-white/40">Lade Dienste …</p>
|
||||
) : isError ? (
|
||||
<p className="text-sm text-red-500">Dienste konnten nicht geladen werden.</p>
|
||||
) : services && services.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" />
|
||||
<th className="px-4 py-2 font-medium">Dienst</th>
|
||||
<th className="px-4 py-2 font-medium">Kategorie</th>
|
||||
<th className="px-4 py-2 font-medium">Alias</th>
|
||||
<th className="px-4 py-2 font-medium">URL</th>
|
||||
<th className="px-4 py-2" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{services.map((service) => (
|
||||
<ServiceRow key={service.id} service={service} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-black/40 dark:text-white/40">
|
||||
Noch keine Dienste vorhanden. Scanne ein Gerät unter „Geräte“, um automatisch welche
|
||||
zu finden.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user