SekiDesu01/SekiPOS
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Implemented receipt generation and printing

Browse Source
This commit is contained in:
SekiDesu0
2026-03-09 06:20:24 -03:00
parent c57e8ab6db
commit cae35a266f
1 changed files with 83 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
templates/checkout.html
View File

@@ -188,10 +188,64 @@
input[type=number] {
-moz-appearance: textfield;
}
/* ── Thermal Printer Styles (80mm) ── */
#receipt-print-zone { display: none; } /* Hidden on screen */
@media print {
body { background: #fff; margin: 0; padding: 0; }
.navbar, .container-fluid, .modal { display: none !important; } /* Hide the UI */
#receipt-print-zone {
display: block !important;
width: 80mm;
padding: 0;
margin: 0;
font-family: "Courier New", Courier, monospace;
color: #000;
font-size: 12px;
}
@page { margin: 0; } /* Kills the browser's default blank page margins */
.receipt-header { text-align: center; margin-bottom: 10px; }
.receipt-table { width: 100%; margin-bottom: 10px; }
.receipt-table th { text-align: left; border-bottom: 1px dashed #000; padding-bottom: 3px; }
.receipt-table td { padding: 3px 0; vertical-align: top; }
.receipt-total-row { border-top: 1px dashed #000; font-weight: bold; font-size: 14px; }
}
</style>
</head>
<body>
<div id="receipt-print-zone">
<div class="receipt-header">
<h3 style="margin: 0; font-weight: 800;">SekiPOS</h3>
<div style="font-size: 10px; margin-bottom: 5px;">Comprobante de Venta</div>
<div id="receipt-date" style="font-size: 11px;"></div>
</div>
<table class="receipt-table">
<thead>
<tr>
<th style="width: 15%;">Cant</th>
<th style="width: 60%; padding-left: 5px;">Desc</th>
<th style="width: 25%; text-align: right;">Total</th>
</tr>
</thead>
<tbody id="receipt-items-print">
</tbody>
</table>
<div class="receipt-total-row d-flex justify-content-between pt-2">
<span>TOTAL:</span>
<span id="receipt-total-print"></span>
</div>
<div style="text-align: center; margin-top: 20px; font-size: 10px;">
¡Gracias por su compra!
</div>
</div>
<div class="modal fade" id="removeConfirmModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
@@ -209,7 +263,6 @@
</div>
</div>
</div>
<div class="modal fade" id="clearCartModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
@@ -255,7 +308,7 @@
<button class="btn btn-lg btn-success py-3" onclick="executeCheckout('efectivo')">
<i class="bi bi-cash-coin me-2" style="font-size: 1.5rem; vertical-align: middle;"></i> Efectivo
</button>
<button class="btn btn-lg btn-secondary py-3" onclick="executeCheckout('tarjeta')" disabled>
<button class="btn btn-lg btn-secondary py-3" onclick="executeCheckout('tarjeta')">
<i class="bi bi-credit-card me-2" style="font-size: 1.5rem; vertical-align: middle;"></i> Tarjeta (Pronto)
</button>
</div>
@@ -494,6 +547,10 @@
// Hide the payment modal
bootstrap.Modal.getInstance(document.getElementById('paymentModal')).hide();
// Calculate total and print BEFORE wiping the cart
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
printReceipt(total);
// Show the success checkmark
const successModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal'));
successModal.show();
@@ -743,6 +800,30 @@
modal.show();
}
function printReceipt(total) {
const tbody = document.getElementById('receipt-items-print');
tbody.innerHTML = '';
// Populate the items
cart.forEach(item => {
const qtyStr = item.unit === 'kg' ? item.qty.toFixed(3) : item.qty;
tbody.innerHTML += `
<tr>
<td>${qtyStr}</td>
<td style="padding-left: 5px; padding-right: 5px; word-break: break-word;">${item.name}</td>
<td style="text-align: right;">${clp.format(item.subtotal)}</td>
</tr>
`;
});
// Set total and timestamp
document.getElementById('receipt-total-print').innerText = clp.format(total);
document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');
// Trigger the print dialog
window.print();
}
// Ensure the listener is intact
document.getElementById('btn-confirm-remove').addEventListener('click', () => {
if (itemIndexToRemove !== null) {