221 lines
6 KiB
Svelte
221 lines
6 KiB
Svelte
<script lang="ts">
|
|
import { pb } from '$lib/pb';
|
|
import { onMount } from 'svelte';
|
|
import QRCode from 'qrcode';
|
|
|
|
const TYPE_LABEL: Record<string, string> = {
|
|
kuehlschrank: 'Kühlschrank',
|
|
tiefkuehl: 'Tiefkühl',
|
|
warmhalte: 'Warmhalte',
|
|
hygiene: 'Hygiene',
|
|
sonstiges: 'Sonstiges'
|
|
};
|
|
|
|
let stations = $state<any[]>([]);
|
|
let qrCodes = $state<Record<string, string>>({});
|
|
let loading = $state(true);
|
|
let tenantName = $state('');
|
|
|
|
onMount(async () => {
|
|
try {
|
|
const user = await pb.collection('users').getOne(pb.authStore.record!.id);
|
|
const tenantId = user.tenant;
|
|
const tenant = await pb.collection('tenants').getOne(tenantId);
|
|
tenantName = tenant.name;
|
|
|
|
const result = await pb.collection('stations').getFullList({
|
|
filter: `tenant = '${tenantId}' && active = true`,
|
|
sort: 'name'
|
|
});
|
|
stations = result;
|
|
|
|
// QR-Codes mit Logo generieren
|
|
const codes: Record<string, string> = {};
|
|
for (const s of result) {
|
|
codes[s.qr_id] = await generateQRWithLogo(qrUrl(s.qr_id));
|
|
}
|
|
qrCodes = codes;
|
|
} catch {
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
});
|
|
|
|
function qrUrl(qrId: string) {
|
|
return `https://checkflo.de/s/${qrId}`;
|
|
}
|
|
|
|
async function generateQRWithLogo(url: string): Promise<string> {
|
|
const size = 400;
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
|
|
await QRCode.toCanvas(canvas, url, {
|
|
width: size,
|
|
margin: 1,
|
|
errorCorrectionLevel: 'H',
|
|
color: { dark: '#0B1023', light: '#ffffff' }
|
|
});
|
|
|
|
const ctx = canvas.getContext('2d')!;
|
|
const logoSize = Math.round(size * 0.22);
|
|
const x = (size - logoSize) / 2;
|
|
const y = (size - logoSize) / 2;
|
|
const pad = 6;
|
|
const r = 10;
|
|
|
|
// Weißer abgerundeter Hintergrund
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.beginPath();
|
|
ctx.roundRect(x - pad, y - pad, logoSize + pad * 2, logoSize + pad * 2, r);
|
|
ctx.fill();
|
|
|
|
// Logo laden und zeichnen
|
|
const img = new Image();
|
|
img.src = '/favicon.svg';
|
|
await new Promise<void>(resolve => { img.onload = () => resolve(); });
|
|
ctx.drawImage(img, x, y, logoSize, logoSize);
|
|
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
function printAll() {
|
|
window.print();
|
|
}
|
|
</script>
|
|
|
|
<svelte:head><title>Stationen — checkflo</title></svelte:head>
|
|
|
|
<div class="page no-print">
|
|
<div class="header-row">
|
|
<div>
|
|
<h1>Stationen</h1>
|
|
<p class="hint-text">QR-Codes ausdrucken und an den Stationen befestigen.</p>
|
|
</div>
|
|
{#if stations.length > 0}
|
|
<button class="btn-print" onclick={printAll}>🖨 Alle drucken</button>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if loading}
|
|
<p class="hint">Lädt…</p>
|
|
{:else}
|
|
<div class="list">
|
|
{#each stations as s}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card-info">
|
|
<div class="station-name">{s.name}</div>
|
|
<div class="station-type">{TYPE_LABEL[s.type] ?? s.type}
|
|
{#if s.target_temp_min || s.target_temp_max}
|
|
· {s.target_temp_min}° bis {s.target_temp_max}°C
|
|
{/if}
|
|
</div>
|
|
<code class="qr-url">{qrUrl(s.qr_id)}</code>
|
|
</div>
|
|
{#if qrCodes[s.qr_id]}
|
|
<img src={qrCodes[s.qr_id]} alt="QR {s.name}" class="qr-img" />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Druckansicht -->
|
|
{#if !loading}
|
|
<div class="print-sheet">
|
|
{#each stations as s}
|
|
<div class="print-card">
|
|
<div class="print-tenant">{tenantName}</div>
|
|
<div class="print-name">{s.name}</div>
|
|
<div class="print-type">{TYPE_LABEL[s.type] ?? s.type}
|
|
{#if s.target_temp_min || s.target_temp_max}
|
|
· Zielbereich {s.target_temp_min}° bis {s.target_temp_max}°C
|
|
{/if}
|
|
</div>
|
|
{#if qrCodes[s.qr_id]}
|
|
<img src={qrCodes[s.qr_id]} alt="QR" class="print-qr" />
|
|
{/if}
|
|
<div class="print-url">{qrUrl(s.qr_id)}</div>
|
|
<div class="print-footer">Scan → Checkliste ausfüllen → fertig</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.page { max-width: 800px; }
|
|
.header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
|
|
h1 { font-size: 1.6rem; font-weight: 800; color: #0B1023; margin-bottom: 0.25rem; }
|
|
.hint-text { color: #666; font-size: 0.9rem; }
|
|
.hint { color: #aaa; }
|
|
|
|
.btn-print {
|
|
padding: 0.6rem 1.25rem;
|
|
background: #0B1023;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-print:hover { background: #1a2640; }
|
|
|
|
.list { display: flex; flex-direction: column; gap: 1rem; }
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 1.25rem 1.5rem;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
}
|
|
.card-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
|
|
.card-info { flex: 1; }
|
|
.station-name { font-weight: 700; font-size: 1.05rem; color: #0B1023; }
|
|
.station-type { font-size: 0.85rem; color: #888; margin: 0.2rem 0 0.75rem; }
|
|
.qr-url {
|
|
font-size: 0.75rem;
|
|
background: #F5F7FA;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: 5px;
|
|
color: #555;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 400px;
|
|
}
|
|
.qr-img { width: 100px; height: 100px; flex-shrink: 0; }
|
|
|
|
/* Druckansicht — nur beim Drucken sichtbar */
|
|
.print-sheet { display: none; }
|
|
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
|
|
.print-sheet {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0;
|
|
}
|
|
|
|
.print-card {
|
|
border: 1px solid #ddd;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.print-tenant { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; }
|
|
.print-name { font-size: 1.2rem; font-weight: 800; color: #0B1023; margin-bottom: 0.25rem; }
|
|
.print-type { font-size: 0.8rem; color: #666; margin-bottom: 1rem; }
|
|
.print-qr { width: 160px; height: 160px; margin: 0 auto 0.75rem; display: block; }
|
|
.print-url { font-size: 0.65rem; color: #888; margin-bottom: 0.5rem; word-break: break-all; }
|
|
.print-footer { font-size: 0.7rem; color: #F97316; font-weight: 600; }
|
|
}
|
|
</style>
|