860 lines
36 KiB
HTML
860 lines
36 KiB
HTML
{% extends "macros/base.html" %}
|
|
{% from 'macros/modals.html' import confirm_modal, scanner_modal %}
|
|
|
|
{% block title %}Caja{% endblock %}
|
|
|
|
{% block head %}
|
|
<!--HEAD-->
|
|
<style>
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% call confirm_modal('removeConfirmModal', 'Quitar Producto', 'btn-danger-discord', 'Quitar', 'executeRemoveItem()') %}
|
|
¿Estás seguro de que quieres quitar <strong id="removeItemName"></strong> del carrito?
|
|
{% endcall %}
|
|
{% call confirm_modal('clearCartModal', 'Vaciar Carrito', 'btn-danger-discord', 'Sí, vaciar', 'executeClearCart()') %}
|
|
<div class="text-center">
|
|
<i class="bi bi-cart-x text-danger" style="font-size: 3rem;"></i>
|
|
<p class="mt-3">¿Seguro que quieres eliminar todos los productos del carrito?</p>
|
|
</div>
|
|
{% endcall %}
|
|
<div class="modal fade"
|
|
id="customProductModal"
|
|
tabindex="-1"
|
|
data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Agregar Producto Manual</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label text-muted small mb-1">Descripción</label>
|
|
<input type="text"
|
|
id="custom-name"
|
|
class="form-control"
|
|
placeholder="Ej: Varios, Bolsa, etc."
|
|
onkeydown="if(event.key === 'Enter') document.getElementById('custom-price').focus()">
|
|
</div>
|
|
<div class="row g-2">
|
|
<div class="col-8">
|
|
<label class="form-label text-muted small mb-1">Precio Unitario</label>
|
|
<input type="number"
|
|
id="custom-price"
|
|
class="form-control"
|
|
placeholder="Ej: 1500"
|
|
onkeydown="if(event.key === 'Enter') addCustomProduct()">
|
|
</div>
|
|
<div class="col-4">
|
|
<label class="form-label text-muted small mb-1">Tipo</label>
|
|
<select id="custom-unit" class="form-select">
|
|
<option value="unit">Unidad</option>
|
|
<option value="kg">Kg</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer d-flex">
|
|
<button class="btn btn-secondary flex-grow-1" data-bs-dismiss="modal">Cancelar</button>
|
|
<button class="btn btn-accent flex-grow-1" onclick="addCustomProduct()">Agregar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="receipt-print-zone" class="d-none d-print-block">
|
|
<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 style="font-size: 11px; font-weight: bold;">
|
|
Ticket Nº <span id="receipt-ticket-id"></span>
|
|
</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="successModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-success">
|
|
<div class="modal-body text-center py-4">
|
|
<i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
|
|
<h4 class="mt-3">¡Venta Exitosa!</h4>
|
|
<p class="text-muted">El carrito se ha procesado correctamente.</p>
|
|
<button class="btn btn-accent px-5" data-bs-dismiss="modal">Listo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="paymentModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title w-100 text-center text-muted text-uppercase"
|
|
style="font-size: 0.8rem">
|
|
Total
|
|
a Pagar
|
|
</h5>
|
|
<button type="button"
|
|
class="btn-close position-absolute end-0 top-0 m-3"
|
|
data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body text-center pt-1 pb-4">
|
|
<h1 id="payment-modal-total"
|
|
class="mb-4"
|
|
style="color: var(--accent);
|
|
font-weight: 800;
|
|
font-size: 3rem">$0</h1>
|
|
<div class="d-grid gap-3 px-3">
|
|
<button class="btn btn-lg btn-success py-3" onclick="openVueltoModal()">
|
|
<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')">
|
|
<i class="bi bi-credit-card me-2"
|
|
style="font-size: 1.5rem;
|
|
vertical-align: middle"></i>
|
|
Tarjeta (Pronto)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="vueltoModal"
|
|
tabindex="-1"
|
|
data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title w-100 text-center text-muted text-uppercase"
|
|
style="font-size: 0.8rem">
|
|
Pago
|
|
en Efectivo
|
|
</h5>
|
|
<button type="button"
|
|
class="btn-close position-absolute end-0 top-0 m-3"
|
|
data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body text-center pt-1 pb-4">
|
|
<div class="mb-3">
|
|
<span class="text-muted small">Total a Pagar:</span>
|
|
<br>
|
|
<span id="vuelto-total-display"
|
|
class="fs-4 fw-bold"
|
|
style="color: var(--text-main)">$0</span>
|
|
</div>
|
|
<div class="mb-3 text-start">
|
|
<label class="text-muted small mb-1">Monto Recibido</label>
|
|
<input type="number"
|
|
id="monto-recibido"
|
|
class="form-control form-control-lg text-center fw-bold fs-4"
|
|
placeholder="$0"
|
|
onkeyup="calculateVuelto()"
|
|
onchange="calculateVuelto()"
|
|
onkeydown="if(event.key === 'Enter' && !document.getElementById('btn-confirm-vuelto').disabled) executeCheckout('efectivo')">
|
|
</div>
|
|
<div class="d-flex justify-content-center gap-2 mb-3"
|
|
id="vuelto-quick-buttons"></div>
|
|
<div class="p-3 mb-3"
|
|
style="background: var(--input-bg);
|
|
border-radius: 8px">
|
|
<span class="text-muted small text-uppercase fw-bold">Vuelto a Entregar</span>
|
|
<br>
|
|
<span id="vuelto-amount" class="fs-1 fw-bold text-muted">$0</span>
|
|
</div>
|
|
<button id="btn-confirm-vuelto"
|
|
class="btn btn-success w-100 py-3 fw-bold"
|
|
onclick="executeCheckout('efectivo')"
|
|
disabled>Confirmar Venta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="notFoundModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-warning">
|
|
<div class="modal-header border-0 pb-0">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body text-center pt-0 pb-4">
|
|
<i class="bi bi-question-circle text-warning mb-3"
|
|
style="font-size: 3rem"></i>
|
|
<h4 class="mb-2">Producto No Registrado</h4>
|
|
<p class="text-muted px-3 small">
|
|
El código <strong id="not-found-barcode" style="color: var(--text-main);"></strong> no existe en la base de datos.
|
|
</p>
|
|
<div class="d-flex flex-column gap-2 px-3 mt-4">
|
|
<button class="btn btn-accent w-100 py-2" onclick="goToInventory()">
|
|
<i class="bi bi-database-add me-2"></i>Registrar en Inventario
|
|
</button>
|
|
<button class="btn btn-outline-secondary w-100 py-2"
|
|
onclick="openTempProduct()">
|
|
<i class="bi bi-cart-plus me-2"></i>Venta Temporal (Solo por esta vez)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row g-3">
|
|
<div class="col-md-8">
|
|
<div class="discord-card p-3">
|
|
<h4>
|
|
<i class="bi bi-cart3"></i> Carrito
|
|
</h4>
|
|
<div class="position-relative mb-4">
|
|
<div class="input-group">
|
|
<span class="input-group-text border-0 position-absolute"
|
|
style="background: transparent;
|
|
z-index: 10">
|
|
<i class="bi bi-search text-muted"></i>
|
|
</span>
|
|
<input type="text"
|
|
id="manual-search"
|
|
class="form-control ps-5 py-2 rounded"
|
|
placeholder="Buscar producto por nombre o código..."
|
|
autocomplete="off"
|
|
onkeyup="filterSearch()">
|
|
<button class="btn btn-accent px-3"
|
|
type="button"
|
|
onclick="openCustomProductModal()"
|
|
title="Agregar manual">
|
|
<i class="bi bi-plus-lg"></i> <span class="d-none d-sm-inline ms-1">Manual</span>
|
|
</button>
|
|
</div>
|
|
<div id="search-results"
|
|
class="dropdown-menu w-100 shadow-sm mt-1"
|
|
style="display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 1000;
|
|
max-height: 300px;
|
|
overflow-y: auto"></div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table mt-3" id="cart-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Código</th>
|
|
<th>Producto</th>
|
|
<th>Precio/U</th>
|
|
<th>Cant/Peso</th>
|
|
<th>Subtotal</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="cart-items">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="discord-card p-3 mb-3 text-center shadow-sm">
|
|
<p class="mb-1 fw-semibold text-uppercase"
|
|
style="color:var(--text-muted);
|
|
font-size:0.7rem">
|
|
Último
|
|
Escaneado
|
|
</p>
|
|
<img id="display-img"
|
|
src="./static/placeholder.png"
|
|
class="mb-2"
|
|
alt="product">
|
|
<h6 id="display-name" class="mb-0 text-truncate">Esperando scan...</h6>
|
|
<small id="display-barcode"
|
|
class="text-muted font-monospace"
|
|
style="font-size: 0.7rem"></small>
|
|
<div class="total-banner text-center mb-3">
|
|
<div class="total-banner text-center mb-3">
|
|
<h2 class="mb-0">TOTAL</h2>
|
|
<h1 id="grand-total" style="font-size: 3.5rem; font-weight: 800;">$0</h1>
|
|
</div>
|
|
<button class="btn btn-success w-100 btn-lg mb-2" onclick="processSale()">
|
|
<i class="bi bi-cash-coin"></i> COBRAR
|
|
</button>
|
|
<button class="btn btn-danger w-100" onclick="clearCart()">Vaciar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="weightModal"
|
|
tabindex="-1"
|
|
data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5>Ingresar Peso (Gramos)</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="number"
|
|
id="weight-input"
|
|
class="form-control form-control-lg"
|
|
step="1"
|
|
placeholder="Ej: 500"
|
|
onkeydown="if(event.key === 'Enter') confirmWeight()">
|
|
</div>
|
|
<div class="modal-footer d-flex">
|
|
<button class="btn btn-secondary flex-grow-1" data-bs-dismiss="modal">Cancelar</button>
|
|
<button class="btn btn-accent flex-grow-1" onclick="confirmWeight()">Agregar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
let editingCartIndex = null;
|
|
let itemIndexToRemove = null;
|
|
let missingProductData = null;
|
|
let tempBarcode = null;
|
|
let cart = [];
|
|
let pendingProduct = null;
|
|
|
|
let socket = io();
|
|
|
|
const clp = new Intl.NumberFormat('es-CL', {
|
|
style: 'currency',
|
|
currency: 'CLP',
|
|
minimumFractionDigits: 0
|
|
});
|
|
|
|
socket.on('scan_error', (data) => {
|
|
missingProductData = data;
|
|
document.getElementById('not-found-barcode').innerText = data.barcode;
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('notFoundModal'));
|
|
modal.show();
|
|
});
|
|
|
|
socket.on('new_scan', (product) => {
|
|
handleProductScan(product);
|
|
});
|
|
|
|
function goToInventory() {
|
|
if (missingProductData) {
|
|
window.location.href = `/?barcode=${missingProductData.barcode}`;
|
|
}
|
|
}
|
|
|
|
function openTempProduct() {
|
|
bootstrap.Modal.getInstance(document.getElementById('notFoundModal')).hide();
|
|
|
|
// Save the actual scanned barcode so it prints on the receipt instead of "MANUAL-XXX"
|
|
tempBarcode = missingProductData.barcode;
|
|
|
|
// Pre-fill the name if the OpenFoodFacts API managed to find it
|
|
document.getElementById('custom-name').value = missingProductData.name || '';
|
|
document.getElementById('custom-price').value = '';
|
|
document.getElementById('custom-unit').value = 'unit';
|
|
|
|
const customModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
|
|
customModal.show();
|
|
|
|
// Auto-focus the price if we already have a name, otherwise focus the name
|
|
setTimeout(() => {
|
|
if (missingProductData.name) document.getElementById('custom-price').focus();
|
|
else document.getElementById('custom-name').focus();
|
|
}, 500);
|
|
}
|
|
|
|
function renderCart() {
|
|
const tbody = document.getElementById('cart-items');
|
|
tbody.innerHTML = '';
|
|
let total = 0;
|
|
|
|
cart.forEach((item, index) => {
|
|
total += item.subtotal;
|
|
const row = document.createElement('tr');
|
|
|
|
let qtyControls;
|
|
if (item.unit === 'kg') {
|
|
qtyControls = `
|
|
<button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="editWeight(${index})">
|
|
${item.qty.toFixed(3)} kg <i class="bi bi-pencil ms-1" style="font-size: 0.7rem;"></i>
|
|
</button>
|
|
`;
|
|
} else {
|
|
qtyControls = `
|
|
<div class="d-flex align-items-center gap-1">
|
|
<button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="updateQty(${index}, -1)">-</button>
|
|
<input type="number" class="form-control form-control-sm text-center p-0" style="width: 50px;" value="${item.qty}" onchange="manualQty(${index}, this.value)">
|
|
<button class="btn btn-sm btn-outline-secondary py-0 px-2" onclick="updateQty(${index}, 1)">+</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
row.innerHTML = `
|
|
<td class="font-monospace small text-muted">${item.barcode}</td>
|
|
<td>${item.name}</td>
|
|
<td>${clp.format(item.price)}</td>
|
|
<td>${qtyControls}</td>
|
|
<td>${clp.format(item.subtotal)}</td>
|
|
<td>
|
|
<button class="btn btn-danger-discord btn-sm" onclick="removeItem(${index})">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
|
|
document.getElementById('grand-total').innerText = clp.format(total);
|
|
|
|
// This will actually run now
|
|
saveCart();
|
|
}
|
|
|
|
function clearCart() {
|
|
if (cart.length === 0) return;
|
|
const modal = new bootstrap.Modal(document.getElementById('clearCartModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function executeRemoveItem() {
|
|
if (itemIndexToRemove !== null) {
|
|
cart.splice(itemIndexToRemove, 1);
|
|
renderCart();
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('removeConfirmModal'));
|
|
if (modal) modal.hide();
|
|
itemIndexToRemove = null;
|
|
}
|
|
}
|
|
|
|
function executeClearCart() {
|
|
cart = [];
|
|
renderCart();
|
|
bootstrap.Modal.getInstance(document.getElementById('clearCartModal')).hide();
|
|
}
|
|
|
|
function processSale() {
|
|
if (cart.length === 0) return;
|
|
|
|
// Calculate total and show the payment modal
|
|
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
|
|
document.getElementById('payment-modal-total').innerText = clp.format(total);
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('paymentModal'));
|
|
modal.show();
|
|
}
|
|
|
|
async function executeCheckout(method) {
|
|
if (cart.length === 0) return;
|
|
|
|
try {
|
|
const response = await fetch('/api/checkout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ cart: cart, payment_method: method })
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
|
|
// Safely hide whichever modal was open
|
|
const pModal = bootstrap.Modal.getInstance(document.getElementById('paymentModal'));
|
|
if (pModal) pModal.hide();
|
|
|
|
const vModal = bootstrap.Modal.getInstance(document.getElementById('vueltoModal'));
|
|
if (vModal) vModal.hide();
|
|
|
|
// Pass the new sale_id from the result to the printer
|
|
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
|
|
printReceipt(total, result.sale_id);
|
|
|
|
// Show the success checkmark
|
|
const successModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('successModal'));
|
|
successModal.show();
|
|
|
|
// Nuke the cart and auto-save the empty state
|
|
cart = [];
|
|
renderCart();
|
|
|
|
// Auto-hide the success modal after 2 seconds so you don't have to click it
|
|
setTimeout(() => successModal.hide(), 2000);
|
|
|
|
} else {
|
|
alert("Error en la venta: " + (result.error || "Error desconocido"));
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Error de conexión con el servidor.");
|
|
}
|
|
}
|
|
|
|
function confirmWeight() {
|
|
const weightInput = document.getElementById('weight-input');
|
|
const weightGrams = parseInt(weightInput.value, 10);
|
|
|
|
if (weightGrams > 0) {
|
|
const weightKg = weightGrams / 1000;
|
|
|
|
if (editingCartIndex !== null) {
|
|
// We are editing an existing row
|
|
cart[editingCartIndex].qty = weightKg;
|
|
cart[editingCartIndex].subtotal = calculateSubtotal(cart[editingCartIndex].price, weightKg);
|
|
renderCart();
|
|
} else {
|
|
// We are adding a new scan/search
|
|
addToCart(pendingProduct, weightKg);
|
|
}
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('weightModal')).hide();
|
|
weightInput.value = '';
|
|
editingCartIndex = null; // Clear the tracker
|
|
}
|
|
}
|
|
|
|
function addToCart(product, qty) {
|
|
// Check if product (unit-based only) already exists in cart
|
|
const existingIndex = cart.findIndex(item => item.barcode === product.barcode && item.unit !== 'kg');
|
|
|
|
if (existingIndex !== -1) {
|
|
cart[existingIndex].qty += qty;
|
|
cart[existingIndex].subtotal = calculateSubtotal(cart[existingIndex].price, cart[existingIndex].qty);
|
|
} else {
|
|
const subtotal = calculateSubtotal(product.price, qty);
|
|
cart.push({ ...product, qty, subtotal });
|
|
}
|
|
renderCart();
|
|
}
|
|
|
|
function updateQty(index, delta) {
|
|
if (cart[index].unit === 'kg') return; // Delta buttons disabled for weighted items
|
|
|
|
cart[index].qty += delta;
|
|
if (cart[index].qty <= 0) {
|
|
removeItem(index, cart[index].name);
|
|
} else {
|
|
cart[index].subtotal = cart[index].qty * cart[index].price;
|
|
renderCart();
|
|
}
|
|
}
|
|
|
|
function manualQty(index, val) {
|
|
const newQty = parseFloat(val);
|
|
if (isNaN(newQty) || newQty <= 0) return;
|
|
|
|
cart[index].qty = newQty;
|
|
cart[index].subtotal = cart[index].qty * cart[index].price;
|
|
renderCart();
|
|
// Don't re-render immediately to avoid losing input focus while typing
|
|
}
|
|
|
|
function editWeight(index) {
|
|
editingCartIndex = index;
|
|
const item = cart[index];
|
|
const weightInput = document.getElementById('weight-input');
|
|
|
|
// Convert current kg back to grams for the input
|
|
weightInput.value = Math.round(item.qty * 1000);
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
|
|
modal.show();
|
|
|
|
// Auto-focus and highlight the existing number so you can just type over it
|
|
setTimeout(() => {
|
|
weightInput.focus();
|
|
weightInput.select();
|
|
}, 500);
|
|
}
|
|
|
|
const allProducts = [
|
|
{% for p in products %}
|
|
{
|
|
barcode: {{ p[0] | tojson }},
|
|
name: {{ p[1] | tojson }},
|
|
price: {{ p[2] | int }},
|
|
image: {{ p[3] | tojson }},
|
|
stock: {{ p[4] | int }},
|
|
unit: {{ p[5] | tojson }}
|
|
},
|
|
{% endfor %}
|
|
];
|
|
|
|
// 2. Extracted this into a helper so both Scanner and Search can use it
|
|
function handleProductScan(product) {
|
|
document.getElementById('display-name').innerText = product.name;
|
|
document.getElementById('display-barcode').innerText = product.barcode;
|
|
document.getElementById('display-img').src = product.image || './static/placeholder.png';
|
|
|
|
// Standardize the unit key because Python sends 'unit_type' but the JS array uses 'unit'
|
|
const actualUnit = product.unit || product.unit_type;
|
|
|
|
if (actualUnit === 'kg') {
|
|
pendingProduct = product;
|
|
pendingProduct.unit = 'kg'; // Force it to match the cart's expected format
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
|
|
modal.show();
|
|
setTimeout(() => document.getElementById('weight-input').focus(), 500);
|
|
} else {
|
|
// Ensure unit products also get the standardized key
|
|
product.unit = 'unit';
|
|
addToCart(product, 1);
|
|
}
|
|
}
|
|
|
|
// 4. The Search Logic
|
|
function filterSearch() {
|
|
const query = document.getElementById('manual-search').value.toLowerCase().trim();
|
|
const resultsBox = document.getElementById('search-results');
|
|
|
|
if (query.length < 2) {
|
|
resultsBox.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
// Find matches by name or barcode
|
|
const matches = allProducts.filter(p =>
|
|
p.name.toLowerCase().includes(query) || p.barcode.includes(query)
|
|
).slice(0, 10); // Limit to 10 results so it doesn't lag out
|
|
|
|
if (matches.length === 0) {
|
|
resultsBox.innerHTML = '<div class="p-3 text-muted text-center">No se encontraron productos</div>';
|
|
} else {
|
|
resultsBox.innerHTML = matches.map(p => `
|
|
<a href="#" class="dropdown-item d-flex justify-content-between align-items-center py-2" onclick="selectSearchResult('${p.barcode}')">
|
|
<div>
|
|
<strong>${p.name}</strong><br>
|
|
<small class="text-muted font-monospace">${p.barcode}</small>
|
|
</div>
|
|
<div class="text-end">
|
|
<span style="color: var(--accent); font-weight: bold;">${clp.format(p.price)}</span><br>
|
|
<small class="text-muted">${p.unit === 'kg' ? 'Kg' : 'Unidad'}</small>
|
|
</div>
|
|
</a>
|
|
`).join('');
|
|
}
|
|
|
|
resultsBox.style.display = 'block';
|
|
}
|
|
|
|
function selectSearchResult(barcode) {
|
|
const product = allProducts.find(p => p.barcode === barcode);
|
|
if (product) {
|
|
handleProductScan(product);
|
|
}
|
|
|
|
// Clean up UI after selection
|
|
const searchInput = document.getElementById('manual-search');
|
|
searchInput.value = '';
|
|
document.getElementById('search-results').style.display = 'none';
|
|
searchInput.focus(); // Keep focus for fast back-to-back searching
|
|
}
|
|
|
|
// Close the search dropdown if user clicks outside of it
|
|
document.addEventListener('click', function (e) {
|
|
const searchArea = document.getElementById('manual-search');
|
|
const resultsBox = document.getElementById('search-results');
|
|
if (e.target !== searchArea && !resultsBox.contains(e.target)) {
|
|
resultsBox.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Make sure we clear the tracker if the user hits Cancel
|
|
document.getElementById('weightModal').addEventListener('hidden.bs.modal', function () {
|
|
document.getElementById('weight-input').value = '';
|
|
pendingProduct = null;
|
|
editingCartIndex = null;
|
|
});
|
|
|
|
function calculateSubtotal(price, qty) {
|
|
const rawTotal = price * qty;
|
|
// Ley del Redondeo: rounds to the nearest 10
|
|
return Math.round(rawTotal / 10) * 10;
|
|
}
|
|
|
|
function saveCart() {
|
|
localStorage.setItem('seki_cart', JSON.stringify(cart));
|
|
}
|
|
|
|
function loadCart() {
|
|
const saved = localStorage.getItem('seki_cart');
|
|
if (saved) {
|
|
try {
|
|
cart = JSON.parse(saved);
|
|
renderCart();
|
|
} catch (e) {
|
|
console.error("Error cargando el carrito", e);
|
|
cart = [];
|
|
}
|
|
}
|
|
}
|
|
|
|
function removeItem(idx) {
|
|
itemIndexToRemove = idx;
|
|
// Look up the name safely from the array
|
|
document.getElementById('removeItemName').innerText = cart[idx].name;
|
|
|
|
// getOrCreateInstance prevents UI-breaking ghost backdrops
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('removeConfirmModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function printReceipt(total, saleId) {
|
|
const tbody = document.getElementById('receipt-items-print');
|
|
tbody.innerHTML = '';
|
|
|
|
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>
|
|
`;
|
|
});
|
|
|
|
document.getElementById('receipt-ticket-id').innerText = saleId || "N/A";
|
|
document.getElementById('receipt-total-print').innerText = clp.format(total);
|
|
document.getElementById('receipt-date').innerText = new Date().toLocaleString('es-CL');
|
|
|
|
// No hacks, just print
|
|
window.print();
|
|
}
|
|
|
|
function openCustomProductModal() {
|
|
|
|
tempBarcode = null; // Clear any leftover scanned barcodes
|
|
|
|
// Scrub the inputs clean
|
|
document.getElementById('custom-name').value = '';
|
|
document.getElementById('custom-price').value = '';
|
|
document.getElementById('custom-unit').value = 'unit';
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('customProductModal'));
|
|
modal.show();
|
|
setTimeout(() => document.getElementById('custom-name').focus(), 500);
|
|
}
|
|
|
|
function addCustomProduct() {
|
|
const nameInput = document.getElementById('custom-name').value.trim();
|
|
const priceInput = parseInt(document.getElementById('custom-price').value, 10);
|
|
const unitInput = document.getElementById('custom-unit').value;
|
|
|
|
if (!nameInput || isNaN(priceInput) || priceInput <= 0) {
|
|
alert("Por favor ingresa un nombre y un precio válido.");
|
|
return;
|
|
}
|
|
|
|
// Use the scanned barcode if it exists, otherwise generate a fake one
|
|
const finalBarcode = tempBarcode ? tempBarcode : `MANUAL-${Date.now().toString().slice(-6)}`;
|
|
|
|
const customProduct = {
|
|
barcode: finalBarcode,
|
|
name: `* ${nameInput}`,
|
|
price: priceInput,
|
|
image: '',
|
|
stock: 0,
|
|
unit: unitInput
|
|
};
|
|
|
|
if (unitInput === 'kg') {
|
|
pendingProduct = customProduct;
|
|
bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
|
|
|
|
const weightModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('weightModal'));
|
|
weightModal.show();
|
|
setTimeout(() => document.getElementById('weight-input').focus(), 500);
|
|
} else {
|
|
addToCart(customProduct, 1);
|
|
bootstrap.Modal.getInstance(document.getElementById('customProductModal')).hide();
|
|
}
|
|
|
|
tempBarcode = null; // Reset it after adding
|
|
}
|
|
|
|
function openVueltoModal() {
|
|
// Hide the main payment selection modal
|
|
bootstrap.Modal.getInstance(document.getElementById('paymentModal')).hide();
|
|
|
|
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
|
|
document.getElementById('vuelto-total-display').innerText = clp.format(total);
|
|
|
|
const input = document.getElementById('monto-recibido');
|
|
input.value = '';
|
|
document.getElementById('vuelto-amount').innerText = '$0';
|
|
document.getElementById('vuelto-amount').className = "fs-1 fw-bold text-muted";
|
|
document.getElementById('btn-confirm-vuelto').disabled = true;
|
|
|
|
// Generate smart quick-buttons (Exacto, 5k, 10k, 20k)
|
|
const quickBox = document.getElementById('vuelto-quick-buttons');
|
|
quickBox.innerHTML = `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${total})">Exacto</button>`;
|
|
|
|
[5000, 10000, 20000].forEach(bill => {
|
|
if (bill > total && (bill - total) <= 20000) {
|
|
quickBox.innerHTML += `<button class="btn btn-sm btn-outline-secondary fw-bold" onclick="setMonto(${bill})">${clp.format(bill)}</button>`;
|
|
}
|
|
});
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('vueltoModal'));
|
|
modal.show();
|
|
|
|
// Auto-focus input so you can start typing immediately
|
|
setTimeout(() => input.focus(), 500);
|
|
}
|
|
|
|
function setMonto(amount) {
|
|
document.getElementById('monto-recibido').value = amount;
|
|
calculateVuelto();
|
|
}
|
|
|
|
function calculateVuelto() {
|
|
const total = cart.reduce((sum, item) => sum + item.subtotal, 0);
|
|
const recibido = parseInt(document.getElementById('monto-recibido').value, 10);
|
|
const vueltoDisplay = document.getElementById('vuelto-amount');
|
|
const confirmBtn = document.getElementById('btn-confirm-vuelto');
|
|
|
|
if (isNaN(recibido) || recibido < total) {
|
|
vueltoDisplay.innerText = "Falta Dinero";
|
|
vueltoDisplay.className = "fs-4 fw-bold text-danger mt-2 d-block";
|
|
confirmBtn.disabled = true;
|
|
} else {
|
|
const vuelto = recibido - total;
|
|
vueltoDisplay.innerText = clp.format(vuelto);
|
|
vueltoDisplay.className = "fs-1 fw-bold text-success";
|
|
confirmBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
loadCart();
|
|
</script>
|
|
{% endblock %}
|