HAM/Berufsschule_HAM
1
0
Fork 1
mirror of https://github.com/LD-Reborn/Berufsschule_HAM.git synced 2025-12-20 06:51:55 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Merge pull request #130 from LD-Reborn/129-feature-create-bar-code-download-and-print

Browse Source 
Added Barcode view and download and print options to /Home/Assets det…
This commit is contained in:
LD50
2025-10-13 00:34:45 +02:00
committed by GitHub
parent 0466e22f6c c7311f1042
commit 44c1228ff0
2 changed files with 122 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Resources/Views.Home.Assets.de.resx
View File

@@ -148,4 +148,13 @@
<data name="Close" xml:space="preserve"> <data name="Close" xml:space="preserve">
<value>Schließen</value> <value>Schließen</value>
</data> </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> </root>

114
src/Views/Home/Assets.cshtml
View File

@@ -676,7 +676,96 @@ document.addEventListener('DOMContentLoaded', () => {
} }
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js" defer></script>
<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', () => { document.addEventListener('DOMContentLoaded', () => {
const rows = document.querySelectorAll('.asset-row'); const rows = document.querySelectorAll('.asset-row');
const viewModal = document.getElementById('viewAssetModal'); const viewModal = document.getElementById('viewAssetModal');
@@ -704,6 +793,16 @@ document.addEventListener('DOMContentLoaded', () => {
} }
const html = ` 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="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Name"]</label> <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 /> <input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
</div>` : ''} </div>` : ''}
</div>`; </div>`;
viewContent.innerHTML = html; 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) { } catch (err) {
console.error(err); console.error(err);
viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`; viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;