CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add config qr code to client page

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-23 19:23:31 -08:00
parent 03fb89dc8b
commit 85573f5791
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
3 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

4
package.json
View File

@ -25,6 +25,7 @@
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"@types/better-sqlite3": "^7.6.11", "@types/better-sqlite3": "^7.6.11",
"@types/eslint": "^9.6.0", "@types/eslint": "^9.6.0",
"@types/qrcode-svg": "^1.1.5",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"bits-ui": "^0.21.16", "bits-ui": "^0.21.16",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@ -52,6 +53,7 @@
"arctic": "^2.2.1", "arctic": "^2.2.1",
"drizzle-orm": "^0.38.2", "drizzle-orm": "^0.38.2",
"ip-address": "^10.0.1", "ip-address": "^10.0.1",
"lucide-svelte": "^0.454.0" "lucide-svelte": "^0.454.0",
"qrcode-svg": "^1.1.0"
} }
} }

37
src/routes/clients/[id]/+page.svelte
View File

@ -2,10 +2,15 @@
import type { PageData } from './$types'; import type { PageData } from './$types';
import { LucideClipboardCopy } from 'lucide-svelte'; import { LucideClipboardCopy } from 'lucide-svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import QRCode from 'qrcode-svg';
const { data }: { data: PageData } = $props(); const { data }: { data: PageData } = $props();
let tooltipText = $state('Copy to clipboard'); let tooltipText = $state('Copy to clipboard');
let qrCode = new QRCode({
content: data.config,
join: true,
});
async function copyToClipboard() { async function copyToClipboard() {
await navigator.clipboard.writeText(data.config); await navigator.clipboard.writeText(data.config);
@ -23,22 +28,28 @@
<h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1> <h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
<div class="relative bg-accent rounded-lg max-w-fit"> <div class="flex flex-wrap gap-4">
<div class="flex items-start p-2 overflow-x-auto"> <div class="relative bg-accent rounded-lg max-w-fit">
<pre><code>{data.config}</code></pre> <div class="flex items-start p-2 overflow-x-auto">
<pre><code>{data.config}</code></pre>
<!--Copy button for the configuration--> <!--Copy button for the configuration-->
<!--Flex reverse for peer hover to work properly--> <!--Flex reverse for peer hover to work properly-->
<div class="absolute group flex flex-row-reverse items-center gap-1 right-2"> <div class="absolute group flex flex-row-reverse items-center gap-1 right-2">
<Button class="peer size-10 p-2" <Button class="peer size-10 p-2"
onclick={copyToClipboard} onclick={copyToClipboard}
onmouseleave={onMouseLeave} onmouseleave={onMouseLeave}
> >
<LucideClipboardCopy /> <LucideClipboardCopy />
</Button> </Button>
<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2"> <span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
{tooltipText} {tooltipText}
</span> </span>
</div>
</div> </div>
</div> </div>
<div class="rounded-lg overflow-hidden">
{@html qrCode.svg()}
</div>
</div> </div>