Dominic Gundel
9e22cebb81
Slice-Watch mit Ordnern/Filtern, Orca-Nachbearbeitung, Cockpit-Verlauf mit ED, Zeitzone im Browser. Tasten-Grenze und README-API angeglichen, toter Code entfernt, Requirements gepinnt.
127 lines
3.5 KiB
HTML
127 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ title }}</title>
|
|
<style>
|
|
:root { color-scheme: light; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font: 14px/1.35 "Segoe UI", system-ui, sans-serif;
|
|
color: #111;
|
|
background: #f3f3f3;
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
padding: 0.8rem 1rem;
|
|
background: #1a1a1a;
|
|
color: #eee;
|
|
}
|
|
.toolbar a, .toolbar button {
|
|
color: #111;
|
|
background: #f97316;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
padding: 0.4rem 0.85rem;
|
|
font: inherit;
|
|
font-weight: 650;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.toolbar a.ghost { background: transparent; color: #eee; border: 1px solid #555; }
|
|
.sheet {
|
|
width: 70mm;
|
|
min-height: 40mm;
|
|
margin: 1.2rem auto;
|
|
padding: 3.5mm;
|
|
background: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 20mm;
|
|
gap: 2.5mm;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
page-break-after: always;
|
|
}
|
|
.sheet:last-child { page-break-after: auto; }
|
|
.meta { min-width: 0; }
|
|
.meta h1 {
|
|
margin: 0 0 2mm;
|
|
font-size: 4.2mm;
|
|
letter-spacing: -0.02em;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.meta p { margin: 0 0 1.2mm; font-size: 3.1mm; color: #333; }
|
|
.meta .code { font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.qr-wrap {
|
|
width: 20mm;
|
|
height: 20mm;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.qr-wrap canvas,
|
|
.qr-wrap img {
|
|
display: block;
|
|
width: 20mm !important;
|
|
height: 20mm !important;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
@media print {
|
|
body { background: #fff; }
|
|
.toolbar { display: none; }
|
|
.sheet {
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
page-break-inside: avoid;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="toolbar">
|
|
<button type="button" onclick="window.print()">Drucken</button>
|
|
<a class="ghost" href="/protokoll/{{ run.id }}">Zurück</a>
|
|
</div>
|
|
{% for sheet in sheets %}
|
|
<div class="sheet">
|
|
<div class="meta">
|
|
<h1>{{ sheet.object_name or (run.filename.split('/')[-1] if run.filename else 'Druck') }}</h1>
|
|
<p class="code">{{ sheet.chargen_nr }}</p>
|
|
{% set soll = sheet.target_g if sheet.target_g is defined else target_g %}
|
|
{% if soll %}
|
|
<p>Soll {{ '%.0f'|format(soll) }} g</p>
|
|
{% endif %}
|
|
<p>{{ run.printer_name }} · {{ (run.ended_at or run.started_at or '')[:10] }}</p>
|
|
{% for spool in spools %}
|
|
<p>{% if spool.material_type %}{{ spool.material_type }}{% endif %}{% if spool.brand %} · {{ spool.brand }}{% endif %}{% if spool.name %} · {{ spool.name }}{% endif %}{% if spool.chargen_nr %} · {{ spool.chargen_nr }}{% endif %}{% if spool.hersteller_charge %} · H: {{ spool.hersteller_charge }}{% endif %}</p>
|
|
{% else %}
|
|
<p class="code" style="font-weight:500;color:#666">kein Material zugeordnet</p>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="qr-wrap">
|
|
<canvas class="qr" id="qr-{{ loop.index0 }}" width="80" height="80" data-url="{{ sheet.qr_url }}"></canvas>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<script src="{{ url_for('static', filename='qrcode.min.js') }}?v=1"></script>
|
|
<script>
|
|
document.querySelectorAll("canvas.qr").forEach((node) => {
|
|
QRCode.toCanvas(node, node.dataset.url, {
|
|
width: 80,
|
|
margin: 1,
|
|
color: { dark: "#111111", light: "#ffffff" }
|
|
}, () => {
|
|
node.style.width = "20mm";
|
|
node.style.height = "20mm";
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|