Spaces:

maskaro
/

comanda

Running

App Files Files Community

maskaro commited on Dec 27, 2024

Commit

1875d78

verified ·

1 Parent(s): 903d11c

Upload 3 files

Browse files

Files changed (3) hide show

Comandero.html +31 -0
script.js +171 -0
style.css +51 -28

Comandero.html ADDED Viewed

	@@ -0,0 +1,31 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Gestión de Comandas</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        button {
+            margin: 5px;
+            padding: 10px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,171 @@

+// 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();

style.css CHANGED Viewed

@@ -1,28 +1,51 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+#app {
+    padding: 20px;
+}
+.add-button, .control-button, .confirm-button, .category-button, .opcion-button, .back-button, .finalize-button {
+    display: block;
+    margin: 10px auto;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+.mesa-input, .mesas-container, .mesa-controls, .pedidos-container, .opciones-container {
+    margin-bottom: 20px;
+    text-align: center;
+}
+.mesas-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+}
+.mesa-card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 15px;
+    background: #f9f9f9;
+}
+.mesa-title {
+    margin: 0;
+}
+.mesa-heading {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+.opciones-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}