From c7311f1042393a9a8054e2913ac2f3b1d65c48ba Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Mon, 13 Oct 2025 00:34:22 +0200
Subject: [PATCH] Added Barcode view and download and print options to
 /Home/Assets detail view

---
 src/Resources/Views.Home.Assets.de.resx |   9 ++
 src/Views/Home/Assets.cshtml            | 114 +++++++++++++++++++++++-
 2 files changed, 122 insertions(+), 1 deletion(-)
diff --git a/src/Resources/Views.Home.Assets.de.resx b/src/Resources/Views.Home.Assets.de.resx
index b0b7bf9..8efa087 100644
--- a/src/Resources/Views.Home.Assets.de.resx
+++ b/src/Resources/Views.Home.Assets.de.resx
@@ -148,4 +148,13 @@
     <data name="Close" xml:space="preserve">
         <value>Schließen</value>
     </data>
+    <data name="Barcode" xml:space="preserve">
+        <value>Barcode</value>
+    </data>
+    <data name="Download Barcode" xml:space="preserve">
+        <value>Barcode herunterladen</value>
+    </data>
+    <data name="Print Barcode" xml:space="preserve">
+        <value>Barcode ausdrucken</value>
+    </data>
 </root>
diff --git a/src/Views/Home/Assets.cshtml b/src/Views/Home/Assets.cshtml
index 3910bf8..0794628 100644
--- 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>`;
