msaldain
f483058c2c
En ./services/app/ Se sirvierons los HTML de la carpeta /pages. Se crearon los endpoints REST para crear y listar roles, usuarios, categorias, productos.
117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Cargar Comanda</title>
|
|
</head>
|
|
<body>
|
|
<h2>Formulario de Carga de Comanda</h2>
|
|
|
|
<form id="formComanda">
|
|
<label for="mesaSelect">Mesa:</label>
|
|
<select id="mesaSelect" name="mesa_id" required></select>
|
|
<br><br>
|
|
|
|
<label for="productoSelect">Producto:</label>
|
|
<select id="productosSelect"></select>
|
|
|
|
<label for="cantidadInput">Cantidad:</label>
|
|
<input type="number" id="cantidadInput" min="1" value="1">
|
|
<button type="button" onclick="agregarProducto()">Agregar</button>
|
|
|
|
<ul id="listaProductos"></ul>
|
|
|
|
<input type="hidden" name="productos" id="productosJSON">
|
|
|
|
<br>
|
|
<button type="submit">Guardar Comanda</button>
|
|
</form>
|
|
|
|
<script>
|
|
// Cargar categorías y mesas (productos se maneja distinto por el precio)
|
|
async function cargarSelect(endpoint, selectId, mostrar) {
|
|
const res = await fetch(endpoint);
|
|
const data = await res.json();
|
|
const select = document.getElementById(selectId);
|
|
data.forEach(item => {
|
|
const option = document.createElement('option');
|
|
option.value = item.id;
|
|
option.textContent = mostrar(item);
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
async function cargarProductosConPrecio() {
|
|
const res = await fetch('/api/obtenerProductos');
|
|
const productos = await res.json();
|
|
const select = document.getElementById('productosSelect');
|
|
productos.forEach(prod => {
|
|
const option = document.createElement('option');
|
|
option.value = prod.id;
|
|
option.textContent = `${prod.nombre} ($${prod.precio})`;
|
|
option.setAttribute('data-precio', prod.precio);
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
const listaProductos = [];
|
|
function agregarProducto() {
|
|
const select = document.getElementById('productosSelect');
|
|
const cantidad = parseInt(document.getElementById('cantidadInput').value);
|
|
const productoId = select.value;
|
|
const nombre = select.options[select.selectedIndex].textContent;
|
|
const precioUnitario = parseFloat(select.options[select.selectedIndex].dataset.precio);
|
|
|
|
if (!productoId || isNaN(cantidad) || cantidad <= 0) {
|
|
alert("Producto o cantidad inválida");
|
|
return;
|
|
}
|
|
|
|
listaProductos.push({
|
|
producto_id: productoId,
|
|
cantidad,
|
|
precio_unitario: precioUnitario
|
|
});
|
|
|
|
// Mostrar en lista visual
|
|
const li = document.createElement('li');
|
|
li.textContent = `${nombre} x${cantidad} - $${(precioUnitario * cantidad).toFixed(2)}`;
|
|
document.getElementById('listaProductos').appendChild(li);
|
|
|
|
// Actualizar JSON oculto
|
|
document.getElementById('productosJSON').value = JSON.stringify(listaProductos);
|
|
}
|
|
|
|
document.getElementById('formComanda').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const mesaId = document.getElementById('mesaSelect').value;
|
|
const productos = listaProductos;
|
|
|
|
if (!mesaId || productos.length === 0) {
|
|
alert('Selecciona una mesa y al menos un producto');
|
|
return;
|
|
}
|
|
|
|
const res = await fetch('/api/cargarComandas', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
mesa_id: mesaId,
|
|
productos: productos
|
|
})
|
|
});
|
|
|
|
const resultado = await res.json();
|
|
alert(resultado.mensaje || 'Comanda cargada correctamente');
|
|
location.reload();
|
|
});
|
|
|
|
window.onload = () => {
|
|
cargarSelect('/api/obtenerMesas', 'mesaSelect', mesa => `Mesa ${mesa.numero}`);
|
|
cargarProductosConPrecio();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|