Added Barcode view and download and print options to /Home/Assets detail view

2025-12-20 15:01:56 +00:00 · 2025-10-13 00:34:22 +02:00
parent 0466e22f6c
commit c7311f1042
2 changed files with 122 additions and 1 deletions
--- a/src/Views/Home/Assets.cshtml
+++ b/src/Views/Home/Assets.cshtml
@@ -676,7 +676,96 @@ document.addEventListener('DOMContentLoaded', () => {
 }
 </style>

+<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js" defer></script>
+
 <script>
+function downloadBarcode(svgId, filename = "barcode.png") {
+    const svg = document.getElementById(svgId);
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(svg);
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    // Optionally set canvas size
+    const bbox = svg.getBBox();
+    canvas.width = bbox.width + 20; // padding
+    canvas.height = bbox.height + 20;
+
+    const img = new Image();
+    const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(svgBlob);
+
+    img.onload = () => {
+        ctx.drawImage(img, 0, 0);
+        URL.revokeObjectURL(url);
+
+        const pngUrl = canvas.toDataURL("image/png");
+        const a = document.createElement("a");
+        a.href = pngUrl;
+        a.download = filename;
+        a.click();
+    };
+
+    img.src = url;
+}
+
+function printBarcode(svgId) {
+    const svg = document.getElementById(svgId);
+    if (!svg) return;
+
+    // Serialize the SVG
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(svg);
+
+    // Open a new window for printing
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(`
+        <html>
+            <head>
+                <title>Print Barcode</title>
+                <style>
+                    body { text-align: center; margin: 0; padding: 20px; }
+                    svg { width: 300px; height: auto; }
+                </style>
+            </head>
+            <body>
+                ${svgString}
+            </body>
+        </html>
+    `);
+    printWindow.document.close();
+    printWindow.focus();
+    printWindow.print();
+    printWindow.close();
+}
+
+function calculateEAN13CheckDigit(number12) {
+    if (number12.length !== 12) throw "Input must be 12 digits";
+    const digits = number12.split("").map(Number);
+
+    let sumOdd = 0;
+    let sumEven = 0;
+
+    for (let i = 0; i < 12; i++) {
+        if ((i + 1) % 2 === 0) {
+            sumEven += digits[i];
+        } else {
+            sumOdd += digits[i];
+        }
+    }
+
+    const total = sumOdd + sumEven * 3;
+    const checkDigit = (10 - (total % 10)) % 10;
+    return checkDigit;
+}
+
+function idToEAN13(id) {
+    const padded = id.toString().padStart(12, "0"); // 12 digits
+    const checkDigit = calculateEAN13CheckDigit(padded);
+    return padded + checkDigit; // full 13-digit number
+}
+
 document.addEventListener('DOMContentLoaded', () => {
    const rows = document.querySelectorAll('.asset-row');
    const viewModal = document.getElementById('viewAssetModal');
@@ -704,6 +793,16 @@ document.addEventListener('DOMContentLoaded', () => {
                }

                const html = `
+                    <div class="row g-3">
+                        <h6 class="fw-bold">@T["Barcode"]</h6>
+                        <div class="col-md-6">
+                            <svg id="ean13" class="form-control" name="Barcode" />
+                        </div>
+                        <div class="col-md-6">
+                            <button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
+                            <button id="printBtn" class="form-control my-2 btn btn-primary">@T["Print Barcode"]</button>
+                        </div>
+                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">@T["Name"]</label>
@@ -768,8 +867,21 @@ document.addEventListener('DOMContentLoaded', () => {
                                <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
                            </div>` : ''}
                </div>`;
-
                viewContent.innerHTML = html;
+                console.log(idToEAN13(asset.Cn));
+                JsBarcode("#ean13", idToEAN13(asset.Cn), {
+                    format: "EAN13",
+                    lineColor: "#000",
+                    width: 2,
+                    height: 80,
+                    displayValue: true
+                });
+                document.getElementById("downloadBtn").addEventListener("click", () => {
+                    downloadBarcode("ean13", idToEAN13(asset.Cn));                    
+                });
+                document.getElementById("printBtn").addEventListener("click", () => {
+                    printBarcode("ean13");                    
+                });
            } catch (err) {
                console.error(err);
                viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;