Update script.js

script.js

@@ -1,171 +1,185 @@
-// Script para gestión de comandas en un bar
-
-const app = document.getElementById('app');
-
-// Estado global
-let mesas = [];
-
-// Generar UI
-function render() {
-    app.innerHTML = '';
-
-    const addButton = document.createElement('button');
-    addButton.className = 'add-button';
-    addButton.textContent = '+ Añadir Mesa';
-    addButton.onclick = () => {
-        let mesaNumero = 1;
-        const mesaInput = document.createElement('div');
-        mesaInput.className = 'mesa-input';
-        mesaInput.innerHTML = `
-            <div class="mesa-controls">
-                <button id="decreaseMesa" class="control-button">-</button>
-                <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
-                <button id="increaseMesa" class="control-button">+</button>
-            </div>
-            <button id="confirmMesa" class="confirm-button">Confirmar</button>
-        `;
-        app.innerHTML = '';
-        app.appendChild(mesaInput);
-
-        document.getElementById('decreaseMesa').onclick = () => {
-            if (mesaNumero > 1) mesaNumero--;
-            document.getElementById('mesaNumero').textContent = mesaNumero;
-        };
-
-        document.getElementById('increaseMesa').onclick = () => {
-            mesaNumero++;
-            document.getElementById('mesaNumero').textContent = mesaNumero;
-        };
-
-        document.getElementById('confirmMesa').onclick = () => {
-            mesas.push({ numero: mesaNumero, pedidos: [] });
-            render();
-        };
-    };
-    app.appendChild(addButton);
-
-    const mesasContainer = document.createElement('div');
-    mesasContainer.className = 'mesas-container';
-
-    mesas.forEach((mesa, index) => {
-        const mesaDiv = document.createElement('div');
-        mesaDiv.className = 'mesa-card';
-        mesaDiv.innerHTML = `
-            <div class="mesa-card-body">
-                <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
-            </div>
-        `;
-        mesaDiv.style.cursor = 'pointer';
-        mesaDiv.onclick = () => gestionarMesa(index);
-        mesasContainer.appendChild(mesaDiv);
-    });
-
-    app.appendChild(mesasContainer);
-}
-
-function gestionarMesa(index) {
-    const mesa = mesas[index];
-    app.innerHTML = '';
-
-    const titulo = document.createElement('h1');
-    titulo.textContent = `Mesa ${mesa.numero}`;
-    titulo.className = 'mesa-heading';
-    app.appendChild(titulo);
-
-    const pedidosContainer = document.createElement('div');
-    pedidosContainer.className = 'pedidos-container';
-    pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
-    app.appendChild(pedidosContainer);
-
-    const categorias = [
-        { nombre: 'Refresco', precio: 1.5, opciones: ['Cola', 'Cola 0', 'Fanta Limón/Naranja', 'Isotónica', 'Nestea'] },
-        { nombre: 'Cerveza', precio: 2.0, opciones: ['San Miguel', '0 Alcohol', 'Magna', 'Águila', 'Amstel'] },
-        { nombre: 'Vino', precio: 2.0, opciones: ['Tinto', 'Blanco', 'Moscatel', 'Vermuth'] },
-        { nombre: 'Copa', precio: 4.5, opciones: ['Larios', 'Whisky', 'Ron'] },
-        { nombre: 'Pescado Entero', precio: 7.0, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
-        { nombre: 'Pescado Media', precio: 4.5, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
-        { nombre: 'Otros', precio: 8.0, opciones: ['Queso', 'Gambas'] },
-    ];
-
-    categorias.forEach(categoria => {
-        const button = document.createElement('button');
-        button.className = 'category-button';
-        button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
-        button.onclick = () => {
-            const opcionesContainer = document.createElement('div');
-            opcionesContainer.className = 'opciones-container';
-
-            categoria.opciones.forEach(opcion => {
-                const opcionDiv = document.createElement('div');
-                opcionDiv.className = 'opcion-item';
-                opcionDiv.innerHTML = `
-                    <span>${opcion}</span>
-                    <div class="cantidad-controls" data-opcion="${opcion}">
-                        <button class="control-button decrease">-</button>
-                        <span class="cantidad">0</span>
-                        <button class="control-button increase">+</button>
-                        <button class="confirm-button confirm">✔</button>
-                    </div>
-                `;
-                opcionesContainer.appendChild(opcionDiv);
-            });
-
-            app.innerHTML = '';
-            app.appendChild(opcionesContainer);
-
-            // Delegar eventos en el contenedor principal
-            opcionesContainer.onclick = (event) => {
-                const target = event.target;
-                const cantidadSpan = target.closest('.cantidad-controls')?.querySelector('.cantidad');
-                const opcion = target.closest('.cantidad-controls')?.dataset.opcion;
-
-                if (target.classList.contains('increase')) {
-                    let cantidad = parseInt(cantidadSpan.textContent, 10);
-                    cantidad++;
-                    cantidadSpan.textContent = cantidad;
-                } else if (target.classList.contains('decrease')) {
-                    let cantidad = parseInt(cantidadSpan.textContent, 10);
-                    if (cantidad > 0) cantidad--;
-                    cantidadSpan.textContent = cantidad;
-                } else if (target.classList.contains('confirm')) {
-                    const cantidad = parseInt(cantidadSpan.textContent, 10);
-                    if (cantidad > 0) {
-                        mesa.pedidos.push({ item: categoria.nombre, opcion, cantidad, precio: categoria.precio });
-                        render();
-                        gestionarMesa(index);
-                    } else {
-                        alert('Selecciona una cantidad válida.');
-                    }
-                }
-            };
-
-            const volverButton = document.createElement('button');
-            volverButton.textContent = '← Volver';
-            volverButton.className = 'back-button';
-            volverButton.onclick = () => gestionarMesa(index);
-            app.appendChild(volverButton);
-        };
-        app.appendChild(button);
-    });
-
-    const atrasButton = document.createElement('button');
-    atrasButton.textContent = '← Atrás';
-    atrasButton.className = 'back-button';
-    atrasButton.onclick = () => render();
-    app.appendChild(atrasButton);
-
-    const finalizarButton = document.createElement('button');
-    finalizarButton.textContent = 'Finalizar';
-    finalizarButton.className = 'finalize-button';
-    finalizarButton.onclick = () => {
-        const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
-        alert(`Total de la cuenta: €${total.toFixed(2)}`);
-        console.log({ fecha: new Date().toISOString(), mesa: mesa.numero, pedidos: mesa.pedidos });
-        mesas.splice(index, 1);
-        render();
-    };
-    app.appendChild(finalizarButton);
-}
-
-// Inicializar la aplicación
-render();
+// Script para gestión de comandas en un bar
+
+const app = document.getElementById('app');
+let mesas = [];
+
+// Generar UI
+function render() {
+    app.innerHTML = '';
+
+    const addButton = document.createElement('button');
+    addButton.className = 'add-button';
+    addButton.textContent = '+ Añadir Mesa';
+    addButton.onclick = () => {
+        let mesaNumero = 1;
+        const mesaInput = document.createElement('div');
+        mesaInput.className = 'mesa-input';
+        mesaInput.innerHTML = `
+            <div class="mesa-controls">
+                <button id="decreaseMesa" class="control-button">-</button>
+                <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
+                <button id="increaseMesa" class="control-button">+</button>
+            </div>
+            <button id="confirmMesa" class="confirm-button">Confirmar</button>
+        `;
+        app.innerHTML = '';
+        app.appendChild(mesaInput);
+
+        document.getElementById('decreaseMesa').onclick = () => {
+            if (mesaNumero > 1) mesaNumero--;
+            document.getElementById('mesaNumero').textContent = mesaNumero;
+        };
+
+        document.getElementById('increaseMesa').onclick = () => {
+            mesaNumero++;
+            document.getElementById('mesaNumero').textContent = mesaNumero;
+        };
+
+        document.getElementById('confirmMesa').onclick = () => {
+            mesas.push({ numero: mesaNumero, pedidos: [] });
+            render();
+        };
+    };
+    app.appendChild(addButton);
+
+    const mesasContainer = document.createElement('div');
+    mesasContainer.className = 'mesas-container';
+
+    mesas.forEach((mesa, index) => {
+        const mesaDiv = document.createElement('div');
+        mesaDiv.className = 'mesa-card';
+        mesaDiv.innerHTML = `
+            <div class="mesa-card-body">
+                <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
+            </div>
+        `;
+        mesaDiv.style.cursor = 'pointer';
+        mesaDiv.onclick = () => gestionarMesa(index);
+        mesasContainer.appendChild(mesaDiv);
+    });
+
+    app.appendChild(mesasContainer);
+}
+
+function gestionarMesa(index) {
+    const mesa = mesas[index];
+    app.innerHTML = '';
+
+    const titulo = document.createElement('h1');
+    titulo.textContent = `Mesa ${mesa.numero}`;
+    titulo.className = 'mesa-heading';
+    app.appendChild(titulo);
+
+    const pedidosContainer = document.createElement('div');
+    pedidosContainer.className = 'pedidos-container';
+    pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
+    app.appendChild(pedidosContainer);
+
+    const categorias = [
+        { nombre: 'Refresco', precio: 1.5, opciones: ['Cola', 'Cola 0', 'Fanta Limón/Naranja', 'Isotónica', 'Nestea'] },
+        { nombre: 'Cerveza', precio: 2.0, opciones: ['San Miguel', '0 Alcohol', 'Magna', 'Águila', 'Amstel'] },
+        { nombre: 'Vino', precio: 2.0, opciones: ['Tinto', 'Blanco', 'Moscatel', 'Vermuth'] },
+        { nombre: 'Copa', precio: 4.5, opciones: ['Larios', 'Whisky', 'Ron'] },
+        { nombre: 'Pescado Entero', precio: 7.0, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
+        { nombre: 'Pescado Media', precio: 4.5, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
+        { nombre: 'Otros', precio: 8.0, opciones: ['Queso', 'Gambas'] },
+    ];
+
+    categorias.forEach(categoria => {
+        const button = document.createElement('button');
+        button.className = 'category-button';
+        button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
+        button.onclick = () => {
+            const opcionesContainer = document.createElement('div');
+            opcionesContainer.className = 'opciones-container';
+
+            categoria.opciones.forEach(opcion => {
+                const opcionDiv = document.createElement('div');
+                opcionDiv.className = 'opcion-item';
+                opcionDiv.innerHTML = `
+                    <span>${opcion}</span>
+                    <div class="cantidad-controls" data-opcion="${opcion}" data-categoria="${categoria.nombre}" data-precio="${categoria.precio}">
+                        <button class="control-button decrease">-</button>
+                        <span class="cantidad">0</span>
+                        <button class="control-button increase">+</button>
+                    </div>
+                `;
+                opcionesContainer.appendChild(opcionDiv);
+            });
+
+            const confirmarButton = document.createElement('button');
+            confirmarButton.textContent = '✔ Confirmar';
+            confirmarButton.className = 'confirm-button';
+            confirmarButton.onclick = () => {
+                const cantidadControls = document.querySelectorAll('.cantidad-controls');
+                cantidadControls.forEach(control => {
+                    const cantidad = parseInt(control.querySelector('.cantidad').textContent, 10);
+                    if (cantidad > 0) {
+                        const opcion = control.dataset.opcion;
+                        const categoria = control.dataset.categoria;
+                        const precio = parseFloat(control.dataset.precio);
+                        mesa.pedidos.push({ item: categoria, opcion, cantidad, precio });
+                    }
+                });
+                gestionarMesa(index);
+            };
+            opcionesContainer.appendChild(confirmarButton);
+
+            app.innerHTML = '';
+            app.appendChild(opcionesContainer);
+
+            const volverButton = document.createElement('button');
+            volverButton.textContent = '← Volver';
+            volverButton.className = 'back-button';
+            volverButton.onclick = () => gestionarMesa(index);
+            app.appendChild(volverButton);
+        };
+        app.appendChild(button);
+    });
+
+    const atrasButton = document.createElement('button');
+    atrasButton.textContent = '← Atrás';
+    atrasButton.className = 'back-button';
+    atrasButton.onclick = () => render();
+    app.appendChild(atrasButton);
+
+    const finalizarButton = document.createElement('button');
+    finalizarButton.textContent = 'Finalizar';
+    finalizarButton.className = 'finalize-button';
+    finalizarButton.onclick = () => {
+        const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
+        alert(`Total de la cuenta: €${total.toFixed(2)}`);
+        generarTicket(mesa, total);
+        mesas.splice(index, 1);
+        render();
+    };
+    app.appendChild(finalizarButton);
+}
+
+function generarTicket(mesa, total) {
+    const ticketContent = `
+        Mesa ${mesa.numero}\n
+        ${mesa.pedidos.map(p => `${p.item} (${p.opcion}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('\n')}
+        \nTotal: €${total.toFixed(2)}
+    `;
+
+    const qrCodeContainer = document.createElement('div');
+    qrCodeContainer.id = 'qrcode';
+    app.appendChild(qrCodeContainer);
+
+    const qrCode = new QRCode(qrCodeContainer, {
+        text: ticketContent,
+        width: 256,
+        height: 256,
+    });
+
+    const volverButton = document.createElement('button');
+    volverButton.textContent = '← Volver';
+    volverButton.className = 'back-button';
+    volverButton.onclick = () => render();
+    app.appendChild(volverButton);
+}
+
+// Inicializar la aplicación
+render();
+