Add voltage/frequency to labels, switch to JetBrains Mono font
Deploy to LXC / deploy (push) Successful in 20s

- All print labels (device, component, batch) now use JetBrains Mono
- Device labels show voltage and frequency below serial number
- Batch print labels include voltage/frequency from server data
- Font loaded from Google Fonts on print pages only

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-09 18:07:11 +07:00
parent 510eb719eb
commit f6f31341ea
4 changed files with 27 additions and 10 deletions
@@ -19,7 +19,9 @@ export const load: PageServerLoad = async ({ url }) => {
brand: devices.brand, brand: devices.brand,
model: devices.model, model: devices.model,
serialNumber: devices.serialNumber, serialNumber: devices.serialNumber,
category: devices.category category: devices.category,
voltage: devices.voltage,
frequency: devices.frequency
}) })
.from(devices) .from(devices)
.where(sql`${devices.id} IN ${ids}`); .where(sql`${devices.id} IN ${ids}`);
+10 -4
View File
@@ -12,6 +12,9 @@
<svelte:head> <svelte:head>
<title>Batch Print - {data.labels.length} Labels</title> <title>Batch Print - {data.labels.length} Labels</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
@@ -29,7 +32,7 @@
{#each data.labels as label} {#each data.labels as label}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;"> <div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
<div style="width: 22mm; height: 22mm; flex-shrink: 0;"> <div style="width: 22mm; height: 22mm; flex-shrink: 0;">
{@html label.qrSvg} {@html label.qrSvg}
</div> </div>
@@ -38,13 +41,16 @@
{label.title} {label.title}
</div> </div>
{#if label.brand || label.model} {#if label.brand || label.model}
<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> <div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{[label.brand, label.model].filter(Boolean).join(' ')} {[label.brand, label.model].filter(Boolean).join(' ')}
</div> </div>
{/if} {/if}
{#if label.serialNumber} {#if label.serialNumber}
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;"> <div style="font-size: 5pt; color: #666;">S/N: {label.serialNumber}</div>
S/N: {label.serialNumber} {/if}
{#if label.voltage || label.frequency}
<div style="font-size: 5pt; color: #666;">
{[label.voltage, label.frequency].filter(Boolean).join(' / ')}
</div> </div>
{/if} {/if}
<div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;"> <div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;">
@@ -13,6 +13,9 @@
<svelte:head> <svelte:head>
<title>Print - {data.component.title}</title> <title>Print - {data.component.title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
@@ -37,7 +40,7 @@
{#each Array(copies) as _} {#each Array(copies) as _}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;"> <div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
<div style="width: 22mm; height: 22mm; flex-shrink: 0;"> <div style="width: 22mm; height: 22mm; flex-shrink: 0;">
{@html data.qrSvg} {@html data.qrSvg}
</div> </div>
@@ -13,6 +13,9 @@
<svelte:head> <svelte:head>
<title>Print - {data.device.title}</title> <title>Print - {data.device.title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
</svelte:head> </svelte:head>
<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;"> <div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
@@ -37,7 +40,7 @@
{#each Array(copies) as _} {#each Array(copies) as _}
<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;"> <div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;"> <div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
<div style="width: 22mm; height: 22mm; flex-shrink: 0;"> <div style="width: 22mm; height: 22mm; flex-shrink: 0;">
{@html data.qrSvg} {@html data.qrSvg}
</div> </div>
@@ -46,13 +49,16 @@
{data.device.title} {data.device.title}
</div> </div>
{#if data.device.brand || data.device.model} {#if data.device.brand || data.device.model}
<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"> <div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{[data.device.brand, data.device.model].filter(Boolean).join(' ')} {[data.device.brand, data.device.model].filter(Boolean).join(' ')}
</div> </div>
{/if} {/if}
{#if data.device.serialNumber} {#if data.device.serialNumber}
<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;"> <div style="font-size: 5pt; color: #666;">S/N: {data.device.serialNumber}</div>
S/N: {data.device.serialNumber} {/if}
{#if data.device.voltage || data.device.frequency}
<div style="font-size: 5pt; color: #666;">
{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
</div> </div>
{/if} {/if}
<div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;"> <div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;">