362 lines
15 KiB
PHP
362 lines
15 KiB
PHP
<?php
|
|
$pageTitle = "Registro de Salida de Producto";
|
|
require_once 'layout_header.php';
|
|
require_once 'db/config.php';
|
|
|
|
$error_page_load = '';
|
|
|
|
// Obtener sedes para el dropdown
|
|
$sedes = [];
|
|
try {
|
|
$pdo = db();
|
|
$sedes_stmt = $pdo->query("SELECT id, nombre FROM sedes ORDER BY nombre ASC");
|
|
$sedes = $sedes_stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
} catch (PDOException $e) {
|
|
$error_page_load = "Error al cargar datos: " . $e->getMessage();
|
|
}
|
|
?>
|
|
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
|
|
<!-- Contenedor para notificaciones (toasts) -->
|
|
<div id="notification-container" class="position-fixed top-0 end-0 p-3" style="z-index: 1100"></div>
|
|
|
|
<?php if (!empty($error_page_load)): ?>
|
|
<div class="alert alert-danger" role="alert">
|
|
<?php echo htmlspecialchars($error_page_load); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa fa-barcode"></i> Escanear Código de Barras
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="scan-form" onsubmit="return false;"> <!-- Evita el envío tradicional del formulario -->
|
|
<div class="mb-3">
|
|
<label for="movement_date" class="form-label">Fecha de Salida</label>
|
|
<input type="date" class="form-control" id="movement_date" name="movement_date" value="<?php echo date('Y-m-d'); ?>" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="sede" class="form-label">Sede de Origen</label>
|
|
<select class="form-select" id="sede" name="sede_id" required>
|
|
<option value="">Seleccione una sede</option>
|
|
<?php foreach ($sedes as $sede): ?>
|
|
<option value="<?php echo htmlspecialchars($sede['id']); ?>"<?php if (trim(strtolower($sede['nombre'])) === 'almacen principal') echo ' selected'; ?>><?php echo htmlspecialchars($sede['nombre']); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<hr>
|
|
<div class="mb-3">
|
|
<label for="barcode-input" class="form-label">Esperando código de barras...</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control form-control-lg" id="barcode-input" placeholder="Escanee el producto aquí" autofocus>
|
|
<button class="btn btn-outline-secondary" type="button" id="scan-camera-btn" data-bs-toggle="modal" data-bs-target="#camera-modal">
|
|
<i class="fa fa-camera"></i> Escanear con Cámara
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabla de productos escaneados -->
|
|
<div class="col-lg-6 mx-auto mt-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa fa-check-circle"></i> Productos Registrados
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Producto</th>
|
|
<th>SKU</th>
|
|
<th>Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="scanned-products-tbody">
|
|
<!-- Las filas se añadirán aquí dinámicamente -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
if (typeof bootstrap === 'undefined') {
|
|
console.error('Bootstrap no está cargado.');
|
|
return;
|
|
}
|
|
|
|
const barcodeInput = document.getElementById('barcode-input');
|
|
const sedeSelect = document.getElementById('sede');
|
|
const dateInput = document.getElementById('movement_date');
|
|
const tableBody = document.getElementById('scanned-products-tbody');
|
|
let audioContext;
|
|
let processing = false; // Flag para evitar escaneos múltiples
|
|
|
|
// --- Inicializar AudioContext ---
|
|
function initAudioContext() {
|
|
if (!audioContext) {
|
|
try {
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
console.log("AudioContext inicializado.");
|
|
} catch (e) {
|
|
console.error("Web Audio API no es soportada.", e);
|
|
}
|
|
}
|
|
}
|
|
document.body.addEventListener('click', initAudioContext, { once: true });
|
|
document.body.addEventListener('keydown', initAudioContext, { once: true });
|
|
|
|
// --- Funciones de ayuda ---
|
|
function showNotification(message, isSuccess) {
|
|
const container = document.getElementById('notification-container');
|
|
if (!container) return;
|
|
|
|
const toastId = 'toast-' + Date.now();
|
|
const toastHTML = `
|
|
<div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header ${isSuccess ? 'bg-success text-white' : 'bg-danger text-white'}">
|
|
<strong class="me-auto">${isSuccess ? 'Éxito' : 'Error'}</strong>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">${message}</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', toastHTML);
|
|
|
|
const toastElement = document.getElementById(toastId);
|
|
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
|
toast.show();
|
|
toastElement.addEventListener('hidden.bs.toast', () => toastElement.remove());
|
|
}
|
|
|
|
function playBeep(success = true) {
|
|
if (!audioContext) return;
|
|
try {
|
|
const oscillator = audioContext.createOscillator();
|
|
const gainNode = audioContext.createGain();
|
|
oscillator.connect(gainNode);
|
|
gainNode.connect(audioContext.destination);
|
|
oscillator.type = success ? 'sine' : 'square';
|
|
oscillator.frequency.setValueAtTime(success ? 880 : 440, audioContext.currentTime);
|
|
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
|
|
oscillator.start();
|
|
oscillator.stop(audioContext.currentTime + 0.1);
|
|
} catch (e) {
|
|
console.error("Error al reproducir sonido.", e);
|
|
}
|
|
}
|
|
|
|
// --- Lógica principal del escáner ---
|
|
barcodeInput.addEventListener('change', function() {
|
|
const barcodeValue = this.value.trim();
|
|
if (barcodeValue === '' || processing) {
|
|
return;
|
|
}
|
|
|
|
processing = true;
|
|
this.disabled = true;
|
|
|
|
const sede_id = sedeSelect.value;
|
|
const movement_date = dateInput.value;
|
|
|
|
if (!sede_id || !movement_date) {
|
|
showNotification("Por favor, seleccione una sede y una fecha antes de escanear.", false);
|
|
playBeep(false);
|
|
this.value = '';
|
|
this.disabled = false;
|
|
processing = false;
|
|
this.focus();
|
|
return;
|
|
}
|
|
|
|
const newRow = tableBody.insertRow(0);
|
|
const cellProduct = newRow.insertCell(0);
|
|
const cellSku = newRow.insertCell(1);
|
|
const cellStatus = newRow.insertCell(2);
|
|
|
|
cellProduct.textContent = 'Buscando...';
|
|
cellSku.textContent = barcodeValue;
|
|
cellStatus.innerHTML = '<span class="badge bg-warning text-dark">Procesando...</span>';
|
|
|
|
fetch(`get_product_details.php?codigo_barras=${encodeURIComponent(barcodeValue)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.product) {
|
|
cellProduct.textContent = data.product.nombre;
|
|
cellSku.textContent = data.product.sku;
|
|
cellStatus.innerHTML = `
|
|
<button class="btn btn-success btn-sm aceptar-salida-btn" data-product-id="${data.product.id}">Aceptar</button>
|
|
<button class="btn btn-danger btn-sm cancelar-salida-btn">Cancelar</button>
|
|
`;
|
|
playBeep(true);
|
|
} else {
|
|
throw new Error(data.message || 'Producto no encontrado.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error en el proceso de escaneo:', error);
|
|
showNotification(error.message, false);
|
|
playBeep(false);
|
|
cellProduct.textContent = 'Error de Búsqueda';
|
|
cellStatus.innerHTML = `<span class="badge bg-danger" title="${error.message}">Fallo</span>`;
|
|
})
|
|
.finally(() => {
|
|
this.value = '';
|
|
this.disabled = false;
|
|
processing = false;
|
|
this.focus();
|
|
});
|
|
});
|
|
|
|
// --- Lógica para Aceptar o Cancelar la salida ---
|
|
tableBody.addEventListener('click', function(event) {
|
|
const button = event.target;
|
|
|
|
// --- Botón Cancelar ---
|
|
if (button.classList.contains('cancelar-salida-btn')) {
|
|
button.closest('tr').remove();
|
|
return;
|
|
}
|
|
|
|
// --- Botón Aceptar ---
|
|
if (button.classList.contains('aceptar-salida-btn')) {
|
|
const productId = button.dataset.productId;
|
|
const sedeId = sedeSelect.value;
|
|
const movementDate = dateInput.value;
|
|
|
|
if (!productId || !sedeId || !movementDate) {
|
|
showNotification('Error interno: Faltan datos para registrar la salida.', false);
|
|
return;
|
|
}
|
|
|
|
// Deshabilitar ambos botones para evitar doble clic
|
|
button.parentElement.querySelectorAll('button').forEach(btn => btn.disabled = true);
|
|
button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Registrando...';
|
|
|
|
const formData = new FormData();
|
|
formData.append('product_id', productId);
|
|
formData.append('sede_id', sedeId);
|
|
formData.append('movement_date', movementDate);
|
|
|
|
fetch('registrar_salida_api.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
},
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification(data.message, true);
|
|
playBeep(true);
|
|
button.parentElement.innerHTML = '<span class="badge bg-success">Salida Registrada</span>';
|
|
} else {
|
|
throw new Error(data.message || 'Error al registrar la salida.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error en el registro:', error);
|
|
showNotification(error.message, false);
|
|
playBeep(false);
|
|
// Reactivar botones en caso de error
|
|
const originalButtons = `
|
|
<button class="btn btn-success btn-sm aceptar-salida-btn" data-product-id="${productId}">Aceptar</button>
|
|
<button class="btn btn-danger btn-sm cancelar-salida-btn">Cancelar</button>
|
|
`;
|
|
button.parentElement.innerHTML = originalButtons;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Asegurarse de que el campo de texto siempre tenga el foco
|
|
barcodeInput.focus();
|
|
document.body.addEventListener('click', (e) => {
|
|
if (!['INPUT', 'SELECT', 'BUTTON', 'A'].includes(e.target.tagName) && !e.target.closest('button')) {
|
|
barcodeInput.focus();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- Modal para la cámara -->
|
|
<div class="modal fade" id="camera-modal" tabindex="-1" aria-labelledby="camera-modal-label" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="camera-modal-label">Escanear Código de Barras</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="reader" width="100%"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
const cameraModal = document.getElementById('camera-modal');
|
|
const barcodeInput = document.getElementById('barcode-input');
|
|
let html5QrCode;
|
|
|
|
function onScanSuccess(decodedText, decodedResult) {
|
|
// `decodedText` es el SKU escaneado
|
|
console.log(`Código escaneado: ${decodedText}`);
|
|
|
|
// Poner el valor en el input
|
|
barcodeInput.value = decodedText;
|
|
|
|
// Disparar el evento change para que se procese como un escaneo manual
|
|
const changeEvent = new Event('change');
|
|
barcodeInput.dispatchEvent(changeEvent);
|
|
|
|
// Cerrar el modal
|
|
const modal = bootstrap.Modal.getInstance(cameraModal);
|
|
modal.hide();
|
|
}
|
|
|
|
function onScanFailure(error) {
|
|
// No hacer nada, simplemente seguir escaneando
|
|
}
|
|
|
|
cameraModal.addEventListener('shown.bs.modal', function () {
|
|
html5QrCode = new Html5Qrcode("reader");
|
|
const config = { fps: 10, qrbox: { width: 250, height: 250 } };
|
|
html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess, onScanFailure)
|
|
.catch(err => {
|
|
console.error("No se pudo iniciar la cámara.", err);
|
|
alert("Error al iniciar la cámara. Asegúrate de dar permisos y que no esté siendo usada por otra aplicación.");
|
|
});
|
|
});
|
|
|
|
cameraModal.addEventListener('hidden.bs.modal', function () {
|
|
if (html5QrCode) {
|
|
html5QrCode.stop().then(ignore => {
|
|
console.log("Cámara detenida.");
|
|
}).catch(err => {
|
|
console.error("No se pudo detener la cámara.", err);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php require_once 'layout_footer.php'; ?>
|