Spaces:

maskaro
/

comanda

Running

App Files Files Community

maskaro commited on Dec 27, 2024

Commit

a3c2f5e

verified ·

1 Parent(s): ee5e1c7

Update index.html

Browse files

Files changed (1) hide show

index.html +275 -7

index.html CHANGED Viewed

@@ -3,17 +3,285 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gestión de Comandas</title>
     <style>
-        /* Aquí van tus estilos CSS */
     </style>
 </head>
 <body>
     <div id="app"></div>
-    <script src="script.js"></script>
-    <!-- Añadir el script QRCode.js justo antes del cierre de </body> -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gestión de Comandas en el Bar</title>
     <style>
+        /* Estilos básicos para la interfaz */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+            height: 100vh;
+        }
+        #app {
+            width: 100%;
+            max-width: 600px;
+            padding: 20px;
+            text-align: center;
+        }
+        button {
+            padding: 10px;
+            margin: 10px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        .add-button, .category-button, .confirm-button, .back-button, .finalize-button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+        }
+        .add-button:hover, .category-button:hover, .confirm-button:hover, .back-button:hover, .finalize-button:hover {
+            background-color: #45a049;
+        }
+        .mesa-card {
+            background-color: #f4f4f4;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 5px;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .mesa-card h5 {
+            margin: 0;
+        }
+        .pedidos-container {
+            text-align: left;
+            margin: 10px 0;
+        }
+        .cantidad-controls {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .cantidad {
+            width: 30px;
+            text-align: center;
+            margin: 0 10px;
+        }
+        #qrcode {
+            margin: 20px 0;
+        }
     </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 </head>
 <body>
     <div id="app"></div>
+    <script>
+        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);
+                        // Añadir los controladores de cantidad
+                        const cantidadControl = opcionDiv.querySelector('.cantidad-controls');
+                        const cantidadSpan = cantidadControl.querySelector('.cantidad');
+                        cantidadControl.querySelector('.increase').onclick = () => {
+                            let cantidad = parseInt(cantidadSpan.textContent, 10);
+                            cantidad++;
+                            cantidadSpan.textContent = cantidad;
+                        };
+                        cantidadControl.querySelector('.decrease').onclick = () => {
+                            let cantidad = parseInt(cantidadSpan.textContent, 10);
+                            if (cantidad > 0) {
+                                cantidad--;
+                                cantidadSpan.textContent = cantidad;
+                            }
+                        };
+                    });
+                    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);
+                app.innerHTML = `
+                    <h2>Total de la cuenta: €${total.toFixed(2)}</h2>
+                    <button onclick="generarTicket(${index}, ${total})">Generar Ticket</button>
+                `;
+            };
+            app.appendChild(finalizarButton);
+        }
+        function generarTicket(index, total) {
+            const mesa = mesas[index];
+            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);
+            // Eliminar la mesa después de generar el ticket
+            mesas.splice(index, 1);
+        }
+        // Inicializar la aplicación
+        render();
+    </script>
 </body>
+</html>