From ac0dd18d8fffe34635d8cc2a14a0ce37f758726e Mon Sep 17 00:00:00 2001 From: grabowski Date: Thu, 9 Apr 2026 17:40:58 +0700 Subject: [PATCH] Replace barcode with QR code + large ID on printed labels - QR code on left encodes the short ID (not URL) - Text centred on right: title, brand/model, serial, large bold ID - ID displayed at 11pt bold with letter-spacing for readability - Removed barcode dependency from print pages Co-Authored-By: Claude Opus 4.6 (1M context) --- .../print/component/[id]/+page.server.ts | 6 +-- .../(print)/print/component/[id]/+page.svelte | 32 ++++++++------ .../(print)/print/device/[id]/+page.server.ts | 6 +-- .../(print)/print/device/[id]/+page.svelte | 42 +++++++++---------- 4 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/routes/(print)/print/component/[id]/+page.server.ts b/src/routes/(print)/print/component/[id]/+page.server.ts index 496ad3e..584a5f3 100644 --- a/src/routes/(print)/print/component/[id]/+page.server.ts +++ b/src/routes/(print)/print/component/[id]/+page.server.ts @@ -3,7 +3,7 @@ import { db } from '$lib/server/db/index.js'; import { components } from '$lib/server/db/schema.js'; import { eq } from 'drizzle-orm'; import { error } from '@sveltejs/kit'; -import { generateBarcodeSvg } from '$lib/server/barcode.js'; +import { generateQrSvg } from '$lib/server/qr.js'; export const load: PageServerLoad = async ({ params }) => { const [component] = await db @@ -20,7 +20,7 @@ export const load: PageServerLoad = async ({ params }) => { if (!component) error(404, 'Component not found'); const shortId = component.id.slice(0, 8).toUpperCase(); - const barcodeDataUrl = await generateBarcodeSvg(shortId); + const qrSvg = await generateQrSvg(shortId); - return { component, barcodeDataUrl, shortId }; + return { component, qrSvg, shortId }; }; diff --git a/src/routes/(print)/print/component/[id]/+page.svelte b/src/routes/(print)/print/component/[id]/+page.svelte index d650991..1681e1e 100644 --- a/src/routes/(print)/print/component/[id]/+page.svelte +++ b/src/routes/(print)/print/component/[id]/+page.svelte @@ -36,19 +36,27 @@ {#each Array(copies) as _} -
-
-
- {data.component.title} +
+
+
+ {@html data.qrSvg}
-
- {data.component.componentType} - {#if data.component.brand}· {data.component.brand}{/if} - {#if data.component.partNumber} · P/N: {data.component.partNumber}{/if} -
-
- {data.shortId} +
+
+ {data.component.title} +
+
+ {data.component.componentType} + {#if data.component.brand}· {data.component.brand}{/if} +
+ {#if data.component.partNumber} +
+ P/N: {data.component.partNumber} +
+ {/if} +
+ {data.shortId} +
diff --git a/src/routes/(print)/print/device/[id]/+page.server.ts b/src/routes/(print)/print/device/[id]/+page.server.ts index 04811c4..c2cdd23 100644 --- a/src/routes/(print)/print/device/[id]/+page.server.ts +++ b/src/routes/(print)/print/device/[id]/+page.server.ts @@ -3,7 +3,7 @@ import { db } from '$lib/server/db/index.js'; import { devices } from '$lib/server/db/schema.js'; import { eq } from 'drizzle-orm'; import { error } from '@sveltejs/kit'; -import { generateBarcodeSvg } from '$lib/server/barcode.js'; +import { generateQrSvg } from '$lib/server/qr.js'; export const load: PageServerLoad = async ({ params }) => { const [device] = await db @@ -23,7 +23,7 @@ export const load: PageServerLoad = async ({ params }) => { if (!device) error(404, 'Device not found'); const shortId = device.id.slice(0, 8).toUpperCase(); - const barcodeDataUrl = await generateBarcodeSvg(shortId); + const qrSvg = await generateQrSvg(shortId); - return { device, barcodeDataUrl, shortId }; + return { device, qrSvg, shortId }; }; diff --git a/src/routes/(print)/print/device/[id]/+page.svelte b/src/routes/(print)/print/device/[id]/+page.svelte index 378c8a8..7161170 100644 --- a/src/routes/(print)/print/device/[id]/+page.svelte +++ b/src/routes/(print)/print/device/[id]/+page.svelte @@ -36,31 +36,29 @@
{#each Array(copies) as _} -
-
-
- {data.device.title} +
+
+
+ {@html data.qrSvg}
- {#if data.device.brand || data.device.model} -
- {[data.device.brand, data.device.model].filter(Boolean).join(' ')} +
+
+ {data.device.title}
- {/if} - {#if data.device.serialNumber} -
- S/N: {data.device.serialNumber} - {#if data.device.voltage} · {data.device.voltage}{/if} - {#if data.device.frequency} · {data.device.frequency}{/if} -
- {:else if data.device.voltage || data.device.frequency} -
- {[data.device.voltage, data.device.frequency].filter(Boolean).join(' · ')} -
- {/if} -
- {data.shortId} + {#if data.device.brand || data.device.model} +
+ {[data.device.brand, data.device.model].filter(Boolean).join(' ')} +
+ {/if} + {#if data.device.serialNumber} +
+ S/N: {data.device.serialNumber} +
+ {/if} +
+ {data.shortId}
+
{/each}