Dicken/LaunchPad
1
0
Fork 0
generated from Dicken/dickendock
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hersteller-Auto-Erkennung ueber MAC (verifiziert), Geraete-Tabelle Hersteller/Modell-Spalten, Dropdown-Klick-Bug, Kategorie-Farbe als Hintergrund

Browse Source
This commit is contained in:
Dicken
2026-07-20 14:02:19 +02:00
parent cc4b285aea
commit 0580d46000
5 changed files with 129 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/frontend/src/routes/admin/DevicesPage.tsx
View File

@@ -86,7 +86,7 @@ function EditDeviceForm({ device, onDone }: { device: DeviceWithServices; 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">
<td colSpan={8} 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">Hostname</label>
@@ -246,6 +246,8 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
<td className="px-4 py-3 font-mono text-xs text-black/40 dark:text-white/40">
{device.mac ?? "–"}
</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">{device.manufacturer ?? "–"}</td>
<td className="px-4 py-3 text-black/60 dark:text-white/60">{device.model ?? "–"}</td>
<td className="px-4 py-3">
<span
className={`inline-flex items-center gap-1.5 text-xs ${
@@ -293,7 +295,7 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
{(scanMessage || staleServices.length > 0) && (
<tr className="border-b border-black/5 dark:border-white/5">
<td colSpan={6} className="px-4 pb-3">
<td colSpan={8} className="px-4 pb-3">
{scanMessage ? (
<p className="text-xs text-black/40 dark:text-white/40">{scanMessage}</p>
) : null}
@@ -306,7 +308,7 @@ function DeviceRow({ device }: { device: DeviceWithServices }) {
{expanded && (
<tr className="border-b border-black/5 bg-black/[0.015] dark:border-white/5 dark:bg-white/[0.02]">
<td colSpan={6} className="px-4 py-3">
<td colSpan={8} className="px-4 py-3">
{device.services.length === 0 ? (
<p className="text-xs text-black/40 dark:text-white/40">Keine Dienste auf diesem Gerät.</p>
) : (
@@ -393,7 +395,7 @@ function AddDeviceForm() {
);
}
type SortColumn = "hostname" | "ip" | "mac" | "online" | "services" | null;
type SortColumn = "hostname" | "ip" | "mac" | "manufacturer" | "model" | "online" | "services" | null;
function SortableHeader({
label,
@@ -444,6 +446,12 @@ export function DevicesPage() {
case "mac":
cmp = (a.mac ?? "").localeCompare(b.mac ?? "");
break;
case "manufacturer":
cmp = (a.manufacturer ?? "").localeCompare(b.manufacturer ?? "");
break;
case "model":
cmp = (a.model ?? "").localeCompare(b.model ?? "");
break;
case "online":
cmp = Number(a.online) - Number(b.online);
break;
@@ -483,13 +491,15 @@ export function DevicesPage() {
) : list.length > 0 ? (
<div className="overflow-hidden rounded-2xl border border-black/10 dark:border-white/10">
<div className="overflow-x-auto">
<table className="w-full min-w-[760px] text-sm">
<table className="w-full min-w-[980px] 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">
<SortableHeader label="Gerät" column="hostname" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="IP" column="ip" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="MAC" column="mac" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Hersteller" column="manufacturer" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Modell" column="model" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Status" column="online" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<SortableHeader label="Dienste" column="services" activeColumn={sortColumn} direction={sortDirection} onClick={handleHeaderClick} />
<th className="px-4 py-2" />