versin3 editing single label
This commit is contained in:
Flatlogic Bot
parent
5c94c3678b
commit
f4f4d49502
121
index.php
121
index.php
@ -4820,6 +4820,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
<label class="form-label small">Number of Labels</label>
|
||||
<input type="number" id="barcodeQty" class="form-control form-control-sm mx-auto" value="1" min="1" style="width: 80px;">
|
||||
</div>
|
||||
<div class="row mb-3 mx-auto" style="max-width: 200px;">
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Width (mm)</label>
|
||||
<input type="number" id="barcodeWidth" class="form-control form-control-sm" value="40" min="10">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label small">Height (mm)</label>
|
||||
<input type="number" id="barcodeHeight" class="form-control form-control-sm" value="25" min="10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
||||
@ -5091,27 +5101,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
.barcode-print-view {
|
||||
display: block !important;
|
||||
width: 40mm !important; /* Standard label size */
|
||||
padding: 5mm !important;
|
||||
margin: 0 !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
body.printing-barcode * {
|
||||
visibility: hidden;
|
||||
}
|
||||
body.printing-barcode #posPrintArea,
|
||||
body.printing-barcode #posPrintArea * {
|
||||
visibility: visible !important;
|
||||
}
|
||||
body.printing-barcode #posPrintArea {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: block !important;
|
||||
}
|
||||
.no-print, .sidebar, .topbar, .card, .btn, .modal-header, .modal-footer, .d-print-none, .table-responsive,
|
||||
table:not(.table-formal), .bg-light:not(.invoice-info-card):not(.p-3), .modal-backdrop { display: none !important; }
|
||||
body { background: white !important; margin: 0 !important; padding: 0 !important; }
|
||||
.main-content { margin: 0 !important; padding: 0 !important; background: white !important; }
|
||||
.modal { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; visibility: visible !important; background: white !important; }
|
||||
#viewInvoiceModal { display: block !important; background: white !important; }
|
||||
#viewInvoiceModal .modal-dialog { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
|
||||
#viewInvoiceModal .modal-content { border: none !important; box-shadow: none !important; background: white !important; }
|
||||
#viewInvoiceModal .modal-body { padding: 0 !important; margin: 0 !important; background: white !important; }
|
||||
.table-bordered th, .table-bordered td { border: 1px solid #dee2e6 !important; }
|
||||
.bg-light { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact; }
|
||||
.text-primary { color: #0d6efd !important; -webkit-print-color-adjust: exact; }
|
||||
.badge { border: 1px solid #000; color: #000 !important; }
|
||||
|
||||
/* Ensure the modal is the only thing visible */
|
||||
body > *:not(.main-content):not(.modal) { display: none !important; }
|
||||
.main-content > *:not(#viewInvoiceModal):not(.modal) { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5138,18 +5144,75 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
window.executeBarcodePrint = function() {
|
||||
const qty = parseInt(document.getElementById('barcodeQty').value) || 1;
|
||||
const content = document.getElementById('barcodeContainer').innerHTML;
|
||||
const printArea = document.getElementById('posPrintArea');
|
||||
const width = parseInt(document.getElementById('barcodeWidth').value) || 40;
|
||||
const height = parseInt(document.getElementById('barcodeHeight').value) || 25;
|
||||
|
||||
let printHtml = '';
|
||||
// Get content
|
||||
const name = document.getElementById('barcodeLabelName').innerText;
|
||||
const price = document.getElementById('barcodeLabelPrice').innerText;
|
||||
const svg = document.getElementById('barcodeSvg').outerHTML;
|
||||
|
||||
// Create a hidden iframe
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.style.position = 'absolute';
|
||||
iframe.style.width = '0px';
|
||||
iframe.style.height = '0px';
|
||||
iframe.style.border = 'none';
|
||||
document.body.appendChild(iframe);
|
||||
|
||||
const doc = iframe.contentWindow.document;
|
||||
|
||||
let labelsHtml = '';
|
||||
for (let i = 0; i < qty; i++) {
|
||||
printHtml += `<div class="barcode-print-view" style="page-break-after: always; text-align: center; margin-bottom: 20px;">${content}</div>`;
|
||||
labelsHtml += `
|
||||
<div class="label-container">
|
||||
<div class="label-name">${name}</div>
|
||||
${svg}
|
||||
<div class="label-price">${price}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
printArea.innerHTML = printHtml;
|
||||
document.body.classList.add('printing-barcode');
|
||||
window.print();
|
||||
document.body.classList.remove('printing-barcode');
|
||||
doc.open();
|
||||
doc.write(`
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
@page { size: ${width}mm ${height}mm; margin: 0; }
|
||||
body { margin: 0; padding: 0; font-family: sans-serif; }
|
||||
.label-container {
|
||||
width: ${width}mm;
|
||||
height: ${height}mm;
|
||||
page-break-after: always;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 1mm;
|
||||
}
|
||||
.label-container:last-child { page-break-after: avoid; }
|
||||
.label-name { font-size: 10px; font-weight: bold; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
||||
.label-price { font-size: 12px; font-weight: bold; margin-top: 2px; }
|
||||
svg { max-width: 100%; height: auto; max-height: 70%; display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${labelsHtml}
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
doc.close();
|
||||
|
||||
iframe.contentWindow.focus();
|
||||
setTimeout(() => {
|
||||
iframe.contentWindow.print();
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(iframe);
|
||||
}, 2000);
|
||||
}, 500);
|
||||
};
|
||||
|
||||
window.viewAndPrintA4Invoice = function(data, autoPrint = true) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user