Hugging Face's logo

Spaces:
maskaro
/
comanda
Running

App Files Community
maskaro commited on
Commit
134dd29
·
verified ·
1 Parent(s): a3c2f5e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +3 -275
index.html CHANGED
@@ -4,284 +4,12 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gestión de Comandas en el Bar</title>
7
- <style>
8
- /* Estilos básicos para la interfaz */
9
- body {
10
- font-family: Arial, sans-serif;
11
- margin: 0;
12
- padding: 0;
13
- display: flex;
14
- flex-direction: column;
15
- align-items: center;
16
- justify-content: flex-start;
17
- height: 100vh;
18
- }
19
-
20
- #app {
21
- width: 100%;
22
- max-width: 600px;
23
- padding: 20px;
24
- text-align: center;
25
- }
26
-
27
- button {
28
- padding: 10px;
29
- margin: 10px;
30
- cursor: pointer;
31
- font-size: 16px;
32
- }
33
-
34
- .add-button, .category-button, .confirm-button, .back-button, .finalize-button {
35
- background-color: #4CAF50;
36
- color: white;
37
- border: none;
38
- border-radius: 5px;
39
- }
40
-
41
- .add-button:hover, .category-button:hover, .confirm-button:hover, .back-button:hover, .finalize-button:hover {
42
- background-color: #45a049;
43
- }
44
-
45
- .mesa-card {
46
- background-color: #f4f4f4;
47
- padding: 15px;
48
- margin: 10px 0;
49
- border-radius: 5px;
50
- cursor: pointer;
51
- box-shadow: 0 2px 5px rgba(0,0,0,0.1);
52
- }
53
-
54
- .mesa-card h5 {
55
- margin: 0;
56
- }
57
-
58
- .pedidos-container {
59
- text-align: left;
60
- margin: 10px 0;
61
- }
62
-
63
- .cantidad-controls {
64
- display: flex;
65
- align-items: center;
66
- justify-content: center;
67
- }
68
-
69
- .cantidad {
70
- width: 30px;
71
- text-align: center;
72
- margin: 0 10px;
73
- }
74
-
75
- #qrcode {
76
- margin: 20px 0;
77
- }
78
- </style>
79
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
80
  </head>
81
  <body>
82
  <div id="app"></div>
83
-
84
- <script>
85
- const app = document.getElementById('app');
86
- let mesas = [];
87
-
88
- // Generar UI
89
- function render() {
90
- app.innerHTML = '';
91
-
92
- const addButton = document.createElement('button');
93
- addButton.className = 'add-button';
94
- addButton.textContent = '+ Añadir Mesa';
95
- addButton.onclick = () => {
96
- let mesaNumero = 1;
97
- const mesaInput = document.createElement('div');
98
- mesaInput.className = 'mesa-input';
99
- mesaInput.innerHTML = `
100
- <div class="mesa-controls">
101
- <button id="decreaseMesa" class="control-button">-</button>
102
- <span id="mesaNumero" class="mesa-number">${mesaNumero}</span>
103
- <button id="increaseMesa" class="control-button">+</button>
104
- </div>
105
- <button id="confirmMesa" class="confirm-button">Confirmar</button>
106
- `;
107
- app.innerHTML = '';
108
- app.appendChild(mesaInput);
109
-
110
- document.getElementById('decreaseMesa').onclick = () => {
111
- if (mesaNumero > 1) mesaNumero--;
112
- document.getElementById('mesaNumero').textContent = mesaNumero;
113
- };
114
-
115
- document.getElementById('increaseMesa').onclick = () => {
116
- mesaNumero++;
117
- document.getElementById('mesaNumero').textContent = mesaNumero;
118
- };
119
-
120
- document.getElementById('confirmMesa').onclick = () => {
121
- mesas.push({ numero: mesaNumero, pedidos: [] });
122
- render();
123
- };
124
- };
125
- app.appendChild(addButton);
126
-
127
- const mesasContainer = document.createElement('div');
128
- mesasContainer.className = 'mesas-container';
129
-
130
- mesas.forEach((mesa, index) => {
131
- const mesaDiv = document.createElement('div');
132
- mesaDiv.className = 'mesa-card';
133
- mesaDiv.innerHTML = `
134
- <div class="mesa-card-body">
135
- <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
136
- </div>
137
- `;
138
- mesaDiv.style.cursor = 'pointer';
139
- mesaDiv.onclick = () => gestionarMesa(index);
140
- mesasContainer.appendChild(mesaDiv);
141
- });
142
-
143
- app.appendChild(mesasContainer);
144
- }
145
-
146
- function gestionarMesa(index) {
147
- const mesa = mesas[index];
148
- app.innerHTML = '';
149
-
150
- const titulo = document.createElement('h1');
151
- titulo.textContent = `Mesa ${mesa.numero}`;
152
- titulo.className = 'mesa-heading';
153
- app.appendChild(titulo);
154
-
155
- const pedidosContainer = document.createElement('div');
156
- pedidosContainer.className = 'pedidos-container';
157
- pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
158
- app.appendChild(pedidosContainer);
159
-
160
- const categorias = [
161
- { nombre: 'Refresco', precio: 1.5, opciones: ['Cola', 'Cola 0', 'Fanta Limón/Naranja', 'Isotónica', 'Nestea'] },
162
- { nombre: 'Cerveza', precio: 2.0, opciones: ['San Miguel', '0 Alcohol', 'Magna', 'Águila', 'Amstel'] },
163
- { nombre: 'Vino', precio: 2.0, opciones: ['Tinto', 'Blanco', 'Moscatel', 'Vermuth'] },
164
- { nombre: 'Copa', precio: 4.5, opciones: ['Larios', 'Whisky', 'Ron'] },
165
- { nombre: 'Pescado Entero', precio: 7.0, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
166
- { nombre: 'Pescado Media', precio: 4.5, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
167
- { nombre: 'Otros', precio: 8.0, opciones: ['Queso', 'Gambas'] },
168
- ];
169
-
170
- categorias.forEach(categoria => {
171
- const button = document.createElement('button');
172
- button.className = 'category-button';
173
- button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
174
- button.onclick = () => {
175
- const opcionesContainer = document.createElement('div');
176
- opcionesContainer.className = 'opciones-container';
177
-
178
- categoria.opciones.forEach(opcion => {
179
- const opcionDiv = document.createElement('div');
180
- opcionDiv.className = 'opcion-item';
181
- opcionDiv.innerHTML = `
182
- <span>${opcion}</span>
183
- <div class="cantidad-controls" data-opcion="${opcion}" data-categoria="${categoria.nombre}" data-precio="${categoria.precio}">
184
- <button class="control-button decrease">-</button>
185
- <span class="cantidad">0</span>
186
- <button class="control-button increase">+</button>
187
- </div>
188
- `;
189
- opcionesContainer.appendChild(opcionDiv);
190
-
191
- // Añadir los controladores de cantidad
192
- const cantidadControl = opcionDiv.querySelector('.cantidad-controls');
193
- const cantidadSpan = cantidadControl.querySelector('.cantidad');
194
-
195
- cantidadControl.querySelector('.increase').onclick = () => {
196
- let cantidad = parseInt(cantidadSpan.textContent, 10);
197
- cantidad++;
198
- cantidadSpan.textContent = cantidad;
199
- };
200
-
201
- cantidadControl.querySelector('.decrease').onclick = () => {
202
- let cantidad = parseInt(cantidadSpan.textContent, 10);
203
- if (cantidad > 0) {
204
- cantidad--;
205
- cantidadSpan.textContent = cantidad;
206
- }
207
- };
208
- });
209
-
210
- const confirmarButton = document.createElement('button');
211
- confirmarButton.textContent = '✔ Confirmar';
212
- confirmarButton.className = 'confirm-button';
213
- confirmarButton.onclick = () => {
214
- const cantidadControls = document.querySelectorAll('.cantidad-controls');
215
- cantidadControls.forEach(control => {
216
- const cantidad = parseInt(control.querySelector('.cantidad').textContent, 10);
217
- if (cantidad > 0) {
218
- const opcion = control.dataset.opcion;
219
- const categoria = control.dataset.categoria;
220
- const precio = parseFloat(control.dataset.precio);
221
- mesa.pedidos.push({ item: categoria, opcion, cantidad, precio });
222
- }
223
- });
224
- gestionarMesa(index);
225
- };
226
- opcionesContainer.appendChild(confirmarButton);
227
-
228
- app.innerHTML = '';
229
- app.appendChild(opcionesContainer);
230
-
231
- const volverButton = document.createElement('button');
232
- volverButton.textContent = '← Volver';
233
- volverButton.className = 'back-button';
234
- volverButton.onclick = () => gestionarMesa(index);
235
- app.appendChild(volverButton);
236
- };
237
- app.appendChild(button);
238
- });
239
-
240
- const atrasButton = document.createElement('button');
241
- atrasButton.textContent = '← Atrás';
242
- atrasButton.className = 'back-button';
243
- atrasButton.onclick = () => render();
244
- app.appendChild(atrasButton);
245
-
246
- const finalizarButton = document.createElement('button');
247
- finalizarButton.textContent = 'Finalizar';
248
- finalizarButton.className = 'finalize-button';
249
- finalizarButton.onclick = () => {
250
- const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
251
- app.innerHTML = `
252
- <h2>Total de la cuenta: €${total.toFixed(2)}</h2>
253
- <button onclick="generarTicket(${index}, ${total})">Generar Ticket</button>
254
- `;
255
- };
256
- app.appendChild(finalizarButton);
257
- }
258
-
259
- function generarTicket(index, total) {
260
- const mesa = mesas[index];
261
- 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)}`;
262
-
263
- const qrCodeContainer = document.createElement('div');
264
- qrCodeContainer.id = 'qrcode';
265
- app.appendChild(qrCodeContainer);
266
-
267
- const qrCode = new QRCode(qrCodeContainer, {
268
- text: ticketContent,
269
- width: 256,
270
- height: 256,
271
- });
272
-
273
- const volverButton = document.createElement('button');
274
- volverButton.textContent = '← Volver';
275
- volverButton.className = 'back-button';
276
- volverButton.onclick = () => render();
277
- app.appendChild(volverButton);
278
-
279
- // Eliminar la mesa después de generar el ticket
280
- mesas.splice(index, 1);
281
- }
282
-
283
- // Inicializar la aplicación
284
- render();
285
- </script>
286
  </body>
287
  </html>
 
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Gestión de Comandas en el Bar</title>
7
+ <link rel="stylesheet" href="styles.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
9
  </head>
10
  <body>
11
  <div id="app"></div>
12
+ <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </body>
14
  </html>
15
+