diff --git a/index.html b/index.html index 064f2f8..5739b5d 100644 --- a/index.html +++ b/index.html @@ -89,6 +89,7 @@ type="number" id="startNumber" x-model="startNumber" + @input="updateUrl()" required min="1" step="1" @@ -120,6 +121,7 @@ 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" @@ -147,6 +149,7 @@ type="number" id="leadingZeros" x-model="leadingZeros" + @input="updateUrl()" required value="5" min="0" @@ -160,6 +163,7 @@ 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" /> @@ -260,6 +264,34 @@ 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 @@ -283,6 +315,7 @@ window.print(); }, init() { + this.readUrlParams(); this.generateLabels(); }, };