95 lines
3.1 KiB
Svelte
95 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import * as Table from '$lib/components/ui/table';
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import { Badge } from '$lib/components/ui/badge';
|
|
import { Button, buttonVariants } from '$lib/components/ui/button';
|
|
import { Input } from '$lib/components/ui/input';
|
|
import { LucidePlus } from 'lucide-svelte';
|
|
import type { PageData } from './$types';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import { page } from '$app/state';
|
|
|
|
const { data }: { data: PageData } = $props();
|
|
|
|
let dialogOpen = $state(page.url.searchParams.has('add'));
|
|
let dialogVal = $state(page.url.searchParams.get('add') ?? '');
|
|
|
|
$effect(() => {
|
|
if (dialogOpen) page.url.searchParams.set('add', dialogVal);
|
|
else page.url.searchParams.delete('add');
|
|
|
|
window.history.replaceState(history.state, '', page.url);
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Clients</title>
|
|
</svelte:head>
|
|
|
|
<Table.Root class="divide-y-2 divide-background overflow-hidden rounded-lg bg-accent">
|
|
<Table.Header>
|
|
<Table.Row>
|
|
<Table.Head scope="col">Name</Table.Head>
|
|
<Table.Head scope="col">Public Key</Table.Head>
|
|
<!-- <Table.Head scope="col">Private Key</Table.Head>-->
|
|
<!-- <Table.Head scope="col">Pre-Shared Key</Table.Head>-->
|
|
<Table.Head scope="col">IP Allocation</Table.Head>
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body class="divide-y-2 divide-background">
|
|
{#each data.clients as client}
|
|
<Table.Row class="group hover:bg-background hover:bg-opacity-40">
|
|
<Table.Head scope="row">
|
|
<a
|
|
href={`/clients/${client.id}`}
|
|
class="flex size-full items-center group-hover:underline"
|
|
>
|
|
{client.name}
|
|
</a>
|
|
</Table.Head>
|
|
<Table.Cell class="truncate">{client.publicKey}</Table.Cell>
|
|
<!-- <Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>-->
|
|
<!-- <Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>-->
|
|
<Table.Cell class="flex flex-wrap gap-1">
|
|
{#each client.ips as ip}
|
|
<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
|
|
{/each}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
|
|
<!--Floating action button for adding a new client-->
|
|
<!--Not sure if this is the best place for the input field, will think about it later-->
|
|
<div class="mt-auto flex self-end pt-4">
|
|
<Dialog.Root bind:open={dialogOpen}>
|
|
<Dialog.Trigger class={buttonVariants({ variant: "default" }) + "flex gap-4"}>
|
|
<LucidePlus />
|
|
Add Client
|
|
</Dialog.Trigger>
|
|
<Dialog.Content class="max-w-xs">
|
|
<form class="contents" method="post" action="?/create">
|
|
<Dialog.Header class="">
|
|
<Dialog.Title>Create a new client</Dialog.Title>
|
|
</Dialog.Header>
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<Label for="name">Name</Label>
|
|
<Input
|
|
bind:value={dialogVal}
|
|
required
|
|
pattern=".*[^\s]+.*"
|
|
type="text"
|
|
name="name"
|
|
placeholder="New Client"
|
|
class="max-w-[20ch]"
|
|
/>
|
|
</div>
|
|
<Dialog.Footer>
|
|
<Button type="submit">Create</Button>
|
|
</Dialog.Footer>
|
|
</form>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|
|
</div>
|