mirror of
https://github.com/tmaier/asn-qr-code-label-generator.git
synced 2026-03-14 16:43:31 +00:00
4a37cbc0c6
- Add @input handlers to text/number inputs (startNumber, prefix, leadingZeros) - Add @change handler to checkbox (borderToggle) - Remove updateUrl() call from generateLabels() since it's now handled by events The URL now stays in sync with the form state at all times, not just when clicking "Regenerate Labels".
325 lines
12 KiB
HTML
325 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>QR Code Label Generator for ASN in Paperless-ngx</title>
|
|
<link
|
|
rel="canonical"
|
|
href="https://tobiasmaier.info/asn-qr-code-label-generator/"
|
|
/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
|
defer
|
|
></script>
|
|
<style>
|
|
@media print {
|
|
/* See https://caniuse.com/css-paged-media */
|
|
@page {
|
|
/* Remove default margin set by the browser */
|
|
margin: 0mm;
|
|
size: A4;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="print:p-0" x-data="qrCodeApp()">
|
|
<div class="container mx-auto print:hidden">
|
|
<h1 class="mb-4 text-xl font-bold print:hidden">
|
|
QR Code Label Generator for
|
|
<abbr title="Archive Serial Number">ASN</abbr> in Paperless-ngx
|
|
</h1>
|
|
<div
|
|
class="prose prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 mb-4 print:hidden"
|
|
>
|
|
<p>
|
|
This tool generates QR code labels for the
|
|
<a
|
|
href="https://docs.paperless-ngx.com/advanced_usage/#archive-serial-number-assignment"
|
|
>Archive Serial Number (ASN)</a
|
|
>
|
|
feature in
|
|
<a href="https://docs.paperless-ngx.com/">Paperless-ngx</a>.
|
|
</p>
|
|
|
|
<p>
|
|
The <abbr title="Archive Serial Number">ASN</abbr> feature allows you
|
|
to assign a unique serial number to each document in your archive.
|
|
This is useful if you want to refer to a document in a paperless
|
|
workflow. For example, you can print the
|
|
<abbr title="Archive Serial Number">ASN</abbr>
|
|
on a document and then use it to search for the document in
|
|
Paperless-ngx.
|
|
</p>
|
|
|
|
<p>
|
|
This tool generates QR code labels for the
|
|
<abbr title="Archive Serial Number">ASN</abbr> feature. You can
|
|
generate labels for up to 189 documents at once. The labels are
|
|
formatted to <strong>fit on Avery L4731REV-25 labels</strong>.
|
|
</p>
|
|
|
|
<p>
|
|
To use this tool, enter the start number, prefix, and number of
|
|
leading zeros. Then click the "Regenerate Labels" button. The labels
|
|
will be generated and displayed below. You can then print the labels
|
|
by clicking the "Print Labels" button.
|
|
</p>
|
|
|
|
<p>
|
|
One <strong>known limitation of this tool</strong> is that it
|
|
<strong>only works on Google Chrome and possibly Firefox</strong>.
|
|
This is because it uses the
|
|
<a href="https://caniuse.com/css-paged-media"><code>@page</code></a>
|
|
CSS rule to control the page size, margin, and to turn off the default
|
|
header and footer of the browser.
|
|
</p>
|
|
</div>
|
|
<form @submit.prevent="generateLabels()" class="mb-8 print:hidden">
|
|
<!-- User Input Fields -->
|
|
<div class="mb-5 grid grid-cols-1 gap-5 md:grid-cols-2">
|
|
<div>
|
|
<label
|
|
for="startNumber"
|
|
class="mb-2 block text-sm font-medium text-gray-900"
|
|
>Start Number</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="startNumber"
|
|
x-model="startNumber"
|
|
@input="updateUrl()"
|
|
required
|
|
min="1"
|
|
step="1"
|
|
value="1"
|
|
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
<div class="mt-1">
|
|
<p
|
|
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
|
>
|
|
The number of labels generated will be 7 x 27 = 189. This means
|
|
the <strong>next batch</strong> of labels should
|
|
<strong
|
|
>start with
|
|
<span x-text="parseInt(startNumber, 10) + 189"
|
|
>190</span
|
|
></strong
|
|
>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="prefix"
|
|
class="mb-2 block text-sm font-medium text-gray-900"
|
|
>Prefix</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="prefix"
|
|
x-model="prefix"
|
|
@input="updateUrl()"
|
|
required
|
|
value="ASN"
|
|
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
<div class="mt-1">
|
|
<p
|
|
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
|
>
|
|
If you change this, <strong>update the prefix</strong> in
|
|
Paperless-ngx accordingly via
|
|
<a
|
|
href="https://docs.paperless-ngx.com/configuration/#PAPERLESS_CONSUMER_ASN_BARCODE_PREFIX"
|
|
><code>PAPERLESS_CONSUMER_ASN_BARCODE_PREFIX</code></a
|
|
>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="leadingZeros"
|
|
class="mb-2 block text-sm font-medium text-gray-900"
|
|
>Number of Leading Zeros</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="leadingZeros"
|
|
x-model="leadingZeros"
|
|
@input="updateUrl()"
|
|
required
|
|
value="5"
|
|
min="0"
|
|
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-start">
|
|
<div class="flex h-5 items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="borderToggle"
|
|
x-model="borderToggle"
|
|
@change="updateUrl()"
|
|
class="focus:ring-3 h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-blue-300"
|
|
/>
|
|
</div>
|
|
<label
|
|
for="borderToggle"
|
|
class="ms-2 text-sm font-medium text-gray-900"
|
|
>Show Border</label
|
|
>
|
|
</div>
|
|
<div class="mt-1">
|
|
<p
|
|
class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
|
|
>
|
|
This may be useful for debugging or to calibrate the print out.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
@click.prevent="generateLabels()"
|
|
class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 sm:w-auto"
|
|
>
|
|
Regenerate Labels
|
|
</button>
|
|
<button
|
|
@click.prevent="printLabels()"
|
|
class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 sm:w-auto"
|
|
>
|
|
Print Labels
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div
|
|
class="container mx-auto w-[210mm] border px-[8.6mm] py-[13.5mm] print:w-full print:max-w-full print:border-0"
|
|
>
|
|
<!-- Display QR Code Labels -->
|
|
<ol class="grid grid-cols-7 gap-x-[2.5mm]">
|
|
<template x-for="label in labels">
|
|
<li class="h-[10mm] w-[25.4mm]">
|
|
<div
|
|
class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
|
|
:class="{'even:border-transparent odd:border-transparent': !borderToggle}"
|
|
>
|
|
<img
|
|
:src="label.qrCodeUrl"
|
|
alt=""
|
|
width="100"
|
|
height="100"
|
|
class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<div
|
|
class="flex-grow"
|
|
:class="{
|
|
'text-[3.9mm]': label.text.length <= 6,
|
|
'text-[3.2mm]': label.text.length == 7,
|
|
'text-[2.7mm]': label.text.length == 8,
|
|
'text-[2.4mm]': label.text.length == 9,
|
|
'text-[2.1mm]': label.text.length >= 10,
|
|
}"
|
|
x-text="label.text"
|
|
></div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</ol>
|
|
</div>
|
|
|
|
<footer class="mt-8 bg-gray-200 py-4 text-center print:hidden">
|
|
<p>
|
|
© 2023
|
|
<a
|
|
href="https://tobiasmaier.info"
|
|
class="text-blue-600 underline hover:text-blue-700"
|
|
>Tobias L. Maier</a
|
|
>. All rights reserved. Licensed under the
|
|
<a
|
|
href="https://www.gnu.org/licenses/agpl-3.0.html"
|
|
title="GNU Affero General Public License"
|
|
class="text-blue-600 underline hover:text-blue-700"
|
|
>AGPL v3.0</a
|
|
>.
|
|
<a
|
|
href="https://github.com/tmaier/asn-qr-code-label-generator"
|
|
class="text-blue-600 underline hover:text-blue-700"
|
|
>Contribute via GitHub</a
|
|
>
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
function qrCodeApp() {
|
|
return {
|
|
startNumber: 1,
|
|
prefix: "ASN",
|
|
leadingZeros: 4,
|
|
borderToggle: false,
|
|
labels: [],
|
|
|
|
readUrlParams() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.has("startNumber")) {
|
|
const val = parseInt(params.get("startNumber"), 10);
|
|
if (!isNaN(val) && val >= 1) this.startNumber = val;
|
|
}
|
|
if (params.has("prefix")) {
|
|
this.prefix = params.get("prefix");
|
|
}
|
|
if (params.has("leadingZeros")) {
|
|
const val = parseInt(params.get("leadingZeros"), 10);
|
|
if (!isNaN(val) && val >= 0) this.leadingZeros = val;
|
|
}
|
|
if (params.has("borderToggle")) {
|
|
this.borderToggle = params.get("borderToggle") === "true";
|
|
}
|
|
},
|
|
|
|
updateUrl() {
|
|
const params = new URLSearchParams();
|
|
params.set("startNumber", this.startNumber);
|
|
params.set("prefix", this.prefix);
|
|
params.set("leadingZeros", this.leadingZeros);
|
|
params.set("borderToggle", this.borderToggle);
|
|
const newUrl = `${window.location.pathname}?${params.toString()}`;
|
|
window.history.replaceState({}, "", newUrl);
|
|
},
|
|
|
|
generateLabels() {
|
|
this.labels = [];
|
|
let totalLabels = 7 * 27; // 7 columns x 27 rows
|
|
let startNumberInt = parseInt(this.startNumber, 10); // Ensure startNumber is an integer
|
|
let leadingZerosInt = parseInt(this.leadingZeros, 10); // Ensure leadingZeros is an integer
|
|
for (let i = 0; i < totalLabels; i++) {
|
|
let number = startNumberInt + i;
|
|
let paddedNumber = number
|
|
.toString()
|
|
.padStart(leadingZerosInt + 1, "0");
|
|
let text = this.prefix + paddedNumber;
|
|
// See https://goqr.me/api/doc/create-qr-code/
|
|
let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
|
|
text
|
|
)}`;
|
|
|
|
this.labels.push({ qrCodeUrl, text });
|
|
}
|
|
},
|
|
printLabels() {
|
|
window.print();
|
|
},
|
|
init() {
|
|
this.readUrlParams();
|
|
this.generateLabels();
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|