Refactor table structure and styling in user and IP pages
- Updated the table layout in the user traffic and IP detail pages to enhance readability and organization. - Improved the display of active connections and server information, ensuring a consistent user experience across different views. - Added responsive styling for table headers and cells, optimizing the interface for various screen sizes.
This commit is contained in:
Denozordec
+42
-42
@@ -449,53 +449,53 @@
|
||||
<Card.Description>С GeoIP при включённой базе на шлюзе</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>IP со страной</Table.Head>
|
||||
<Table.Head>Клиент</Table.Head>
|
||||
<Table.Head>Серверы</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if (activeIpServerRows?.length ?? 0) === 0}
|
||||
<div class="overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Cell colspan="3" class="p-4 text-center text-muted-foreground">
|
||||
Нет активных подключений
|
||||
</Table.Cell>
|
||||
<Table.Head class="text-xs sm:text-sm">IP со страной</Table.Head>
|
||||
<Table.Head class="text-xs sm:text-sm">Клиент</Table.Head>
|
||||
<Table.Head class="text-xs sm:text-sm">Серверы</Table.Head>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each activeIpServerRows as r (r.username + '|' + r.ip)}
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if (activeIpServerRows?.length ?? 0) === 0}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-sm">
|
||||
{r.activeLabel}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<a
|
||||
href="/users/{encodeURIComponent(r.username)}"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{r.username}
|
||||
</a>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#each r.servers as srv, idx (srv)}
|
||||
<a
|
||||
href="/servers/{encodeURIComponent(srv)}"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{srv}
|
||||
</a>
|
||||
{#if idx < r.servers.length - 1}
|
||||
<span class="text-muted-foreground">, </span>
|
||||
{/if}
|
||||
{/each}
|
||||
<Table.Cell colspan="3" class="p-4 text-center text-muted-foreground">
|
||||
Нет активных подключений
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{:else}
|
||||
{#each activeIpServerRows as r (r.username + '|' + r.ip)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs sm:text-sm whitespace-normal break-all">
|
||||
{r.activeLabel}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-xs sm:text-sm">
|
||||
<a
|
||||
href="/users/{encodeURIComponent(r.username)}"
|
||||
class="text-primary hover:underline"
|
||||
>
|
||||
{r.username}
|
||||
</a>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-xs sm:text-sm whitespace-normal">
|
||||
<div class="flex flex-wrap items-center gap-1">
|
||||
{#each r.servers as srv (srv)}
|
||||
<a href="/servers/{encodeURIComponent(srv)}" class="inline-flex">
|
||||
<Badge variant="secondary" class="font-normal px-2 py-0.5">
|
||||
{srv}
|
||||
</Badge>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
|
||||
@@ -84,17 +84,29 @@
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Имя</Table.Head>
|
||||
<Table.Head>Ссылки</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell">Ссылки</Table.Head>
|
||||
<Table.Head class="text-right">Трафик</Table.Head>
|
||||
<Table.Head class="text-right">Активных IP</Table.Head>
|
||||
<Table.Head>Истекает</Table.Head>
|
||||
<Table.Head class="hidden sm:table-cell">Истекает</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each rows as row (row.username ?? '')}
|
||||
<Table.Row class="cursor-pointer" onclick={() => openUser(row.username)}>
|
||||
<Table.Row
|
||||
class="cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label={`Открыть пользователя ${row.username ?? ''}`}
|
||||
onclick={() => openUser(row.username)}
|
||||
onkeydown={(e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
openUser(row.username);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Table.Cell class="font-medium">{row.username}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Table.Cell class="hidden sm:table-cell">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#each row.links?.tls ?? [] as link (link)}
|
||||
<Button
|
||||
@@ -127,7 +139,7 @@
|
||||
<span class="text-muted-foreground"> / {row.max_unique_ips}</span>
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-sm text-muted-foreground">
|
||||
<Table.Cell class="hidden sm:table-cell text-sm text-muted-foreground">
|
||||
{row.expiration_rfc3339 ? new Date(row.expiration_rfc3339).toLocaleString() : '—'}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
@@ -167,26 +167,34 @@
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>IP</Table.Head>
|
||||
<Table.Head>Серверы</Table.Head>
|
||||
<Table.Head>Geo / ASN</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if ipsForUser.length === 0}
|
||||
<div class="overflow-x-auto">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Cell colspan="3" class="p-4 text-center text-muted-foreground">
|
||||
Нет активных IP
|
||||
</Table.Cell>
|
||||
<Table.Head class="text-xs sm:text-sm">IP</Table.Head>
|
||||
<Table.Head class="text-xs sm:text-sm">Серверы</Table.Head>
|
||||
<Table.Head class="text-xs sm:text-sm">Geo / ASN</Table.Head>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each ipsForUser as ip (ip.ip ?? '')}
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#if ipsForUser.length === 0}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-sm">{ip.ip}</Table.Cell>
|
||||
<Table.Cell class="text-sm text-muted-foreground">
|
||||
<Table.Cell
|
||||
colspan="3"
|
||||
class="p-4 text-center text-muted-foreground whitespace-normal"
|
||||
>
|
||||
Нет активных IP
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
{#each ipsForUser as ip (ip.ip ?? '')}
|
||||
<Table.Row>
|
||||
<Table.Cell
|
||||
class="font-mono text-xs sm:text-sm whitespace-normal break-all"
|
||||
>
|
||||
{ip.ip}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-xs sm:text-sm text-muted-foreground whitespace-normal">
|
||||
active: {((ip.active_on_servers ?? []).filter(Boolean) as string[]).join(', ') || '—'}
|
||||
{#if (ip.recent_on_servers?.length ?? 0) > 0}
|
||||
<br />
|
||||
@@ -196,31 +204,32 @@
|
||||
<br />
|
||||
primary: {ip.primary_server}
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-sm">
|
||||
<div class="space-y-1">
|
||||
<div>
|
||||
<span class="mr-1">{flagEmoji(ip.country_code ?? undefined)}</span>
|
||||
{ip.country_code ?? '—'}
|
||||
{#if ip.city_name}
|
||||
<span class="text-muted-foreground"> · {ip.city_name}</span>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-xs sm:text-sm whitespace-normal">
|
||||
<div class="space-y-1">
|
||||
<div>
|
||||
<span class="mr-1">{flagEmoji(ip.country_code ?? undefined)}</span>
|
||||
{ip.country_code ?? '—'}
|
||||
{#if ip.city_name}
|
||||
<span class="text-muted-foreground"> · {ip.city_name}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if ip.asn != null}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="outline">AS{ip.asn}</Badge>
|
||||
<span class="text-muted-foreground">{ip.as_organization ?? ''}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-muted-foreground">ASN: —</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if ip.asn != null}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="outline">AS{ip.asn}</Badge>
|
||||
<span class="text-muted-foreground">{ip.as_organization ?? ''}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-muted-foreground">ASN: —</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user