Hugging Face's logo

Spaces:
maskaro
/
comanda
Running

App Files Community
maskaro commited on
Commit
a59dbe8
·
verified ·
1 Parent(s): 04ba48c

Upload 3 files

Browse files
Files changed (3) hide show
  1. index.html +13 -0
  2. script.js +244 -0
  3. style.css +158 -0
index.html ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chiringuito Miguelito</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script src="script.js"></script>
12
+ </body>
13
+ </html>
script.js ADDED
@@ -0,0 +1,244 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const app = document.getElementById('app');
2
+ let mesas = [];
3
+
4
+ // Cargar datos del Local Storage al iniciar
5
+ loadData();
6
+
7
+ // Generar UI
8
+ function render() {
9
+ app.innerHTML = '';
10
+
11
+ const addButton = document.createElement('button');
12
+ addButton.className = 'btn btn-success btn-block';
13
+ addButton.textContent = '+ Añadir Mesa';
14
+ addButton.onclick = () => {
15
+ let mesaNumero = 1;
16
+ if (mesas.length > 0) {
17
+ mesaNumero = mesas[mesas.length - 1].numero + 1;
18
+ }
19
+ const mesaInput = document.createElement('div');
20
+ mesaInput.className = 'mesa-input';
21
+ mesaInput.innerHTML = `
22
+ <div class="mesa-controls">
23
+ <button class="btn btn-outline-secondary decrease-mesa">-</button>
24
+ <span class="mesa-number">${mesaNumero}</span>
25
+ <button class="btn btn-outline-secondary increase-mesa">+</button>
26
+ </div>
27
+ <button class="btn btn-primary confirm-mesa">Confirmar</button>
28
+ `;
29
+ app.innerHTML = '';
30
+ app.appendChild(mesaInput);
31
+
32
+ mesaInput.querySelector('.decrease-mesa').onclick = (event) => {
33
+ event.stopPropagation();
34
+ if (mesaNumero > 1) {
35
+ mesaNumero--;
36
+ mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
37
+ }
38
+ };
39
+
40
+ mesaInput.querySelector('.increase-mesa').onclick = (event) => {
41
+ event.stopPropagation();
42
+ mesaNumero++;
43
+ mesaInput.querySelector('.mesa-number').textContent = mesaNumero;
44
+ };
45
+
46
+ mesaInput.querySelector('.confirm-mesa').onclick = (event) => {
47
+ event.stopPropagation();
48
+ mesas.push({ numero: mesaNumero, pedidos: [] });
49
+ saveData();
50
+ render();
51
+ };
52
+ };
53
+ app.appendChild(addButton);
54
+
55
+ const mesasContainer = document.createElement('div');
56
+ mesasContainer.className = 'mesas-container';
57
+
58
+ mesas.forEach((mesa, index) => {
59
+ const mesaDiv = document.createElement('div');
60
+ mesaDiv.className = 'mesa-card';
61
+ mesaDiv.innerHTML = `
62
+ <div class="mesa-card-body">
63
+ <h5 class="mesa-title">Mesa ${mesa.numero}</h5>
64
+ <button class="btn btn-danger btn-sm delete-mesa">Eliminar</button>
65
+ </div>
66
+ `;
67
+ mesaDiv.style.cursor = 'pointer';
68
+ mesaDiv.onclick = () => gestionarMesa(index);
69
+
70
+ mesaDiv.querySelector('.delete-mesa').onclick = (event) => {
71
+ event.stopPropagation();
72
+ if (confirm(`¿Estás seguro de que quieres eliminar la Mesa ${mesa.numero}?`)) {
73
+ mesas.splice(index, 1);
74
+ saveData();
75
+ render();
76
+ }
77
+ };
78
+
79
+ mesasContainer.appendChild(mesaDiv);
80
+ });
81
+
82
+ app.appendChild(mesasContainer);
83
+ }
84
+
85
+ function gestionarMesa(index) {
86
+ const mesa = mesas[index];
87
+ app.innerHTML = '';
88
+
89
+ const titulo = document.createElement('h1');
90
+ titulo.textContent = `Mesa ${mesa.numero}`;
91
+ titulo.className = 'mesa-heading';
92
+ app.appendChild(titulo);
93
+
94
+ const pedidosContainer = document.createElement('div');
95
+ pedidosContainer.className = 'pedidos-container';
96
+ pedidosContainer.innerHTML = mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('<br>');
97
+ app.appendChild(pedidosContainer);
98
+
99
+ const categorias = [
100
+ { nombre: 'Refresco', precio: 1.5, opciones: ['Cola', 'Cola 0', 'Fanta Limón/Naranja', 'Isotónica', 'Nestea'] },
101
+ { nombre: 'Cerveza', precio: 2.0, opciones: ['San Miguel', '0 Alcohol', 'Magna', 'Águila', 'Amstel'] },
102
+ { nombre: 'Vino', precio: 2.0, opciones: ['Tinto', 'Blanco', 'Moscatel', 'Vermuth'] },
103
+ { nombre: 'Copa', precio: 4.5, opciones: ['Larios', 'Whisky', 'Ron'] },
104
+ { nombre: 'Pescado Entero', precio: 7.0, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
105
+ { nombre: 'Pescado Media', precio: 4.5, opciones: ['Boq.', 'Bacal.', 'Punt.', 'Jurl.', 'Sard.', 'JuPl.'] },
106
+ { nombre: 'Otros', precio: 8.0, opciones: ['Queso', 'Gambas'] },
107
+ ];
108
+
109
+ const buttonsContainer = document.createElement('div');
110
+ buttonsContainer.className = 'buttons-container';
111
+ app.appendChild(buttonsContainer)
112
+
113
+ categorias.forEach(categoria => {
114
+ const button = document.createElement('button');
115
+ button.className = 'btn btn-info btn-block mb-2';
116
+ button.textContent = `+ ${categoria.nombre} (€${categoria.precio.toFixed(2)})`;
117
+ button.onclick = () => {
118
+ const opcionesContainer = document.createElement('div');
119
+ opcionesContainer.className = 'opciones-container';
120
+
121
+ categoria.opciones.forEach(opcion => {
122
+ const opcionDiv = document.createElement('div');
123
+ opcionDiv.className = 'opcion-item';
124
+ opcionDiv.innerHTML = `
125
+ <span>${opcion}</span>
126
+ <div class="cantidad-controls" data-opcion="${opcion}" data-categoria="${categoria.nombre}" data-precio="${categoria.precio}">
127
+ <button class="btn btn-outline-secondary decrease">-</button>
128
+ <span class="cantidad">0</span>
129
+ <button class="btn btn-outline-secondary increase">+</button>
130
+ </div>
131
+ `;
132
+ opcionesContainer.appendChild(opcionDiv);
133
+
134
+ const cantidadControls = opcionDiv.querySelector('.cantidad-controls');
135
+ const cantidadSpan = cantidadControls.querySelector('.cantidad');
136
+ cantidadControls.querySelector('.decrease').onclick = (event) => {
137
+ event.stopPropagation();
138
+ let cantidad = parseInt(cantidadSpan.textContent, 10);
139
+ if (cantidad > 0) {
140
+ cantidad--;
141
+ cantidadSpan.textContent = cantidad;
142
+ }
143
+ };
144
+
145
+ cantidadControls.querySelector('.increase').onclick = (event) => {
146
+ event.stopPropagation();
147
+ let cantidad = parseInt(cantidadSpan.textContent, 10);
148
+ cantidad++;
149
+ cantidadSpan.textContent = cantidad;
150
+ };
151
+ });
152
+
153
+ const confirmarButton = document.createElement('button');
154
+ confirmarButton.textContent = '✔ Confirmar';
155
+ confirmarButton.className = 'btn btn-success btn-block';
156
+ confirmarButton.onclick = () => {
157
+ const cantidadControls = opcionesContainer.querySelectorAll('.cantidad-controls');
158
+ cantidadControls.forEach(control => {
159
+ const cantidad = parseInt(control.querySelector('.cantidad').textContent, 10);
160
+ if (cantidad > 0) {
161
+ const opcion = control.dataset.opcion;
162
+ const categoria = control.dataset.categoria;
163
+ const precio = parseFloat(control.dataset.precio);
164
+ mesa.pedidos.push({ item: categoria, opcion, cantidad, precio });
165
+ }
166
+ });
167
+ saveData();
168
+ gestionarMesa(index);
169
+ };
170
+ opcionesContainer.appendChild(confirmarButton);
171
+
172
+ app.innerHTML = '';
173
+ app.appendChild(opcionesContainer);
174
+
175
+ const volverButton = document.createElement('button');
176
+ volverButton.textContent = '← Volver';
177
+ volverButton.className = 'btn btn-outline-danger btn-block';
178
+ volverButton.onclick = () => gestionarMesa(index);
179
+ app.appendChild(volverButton);
180
+ };
181
+ buttonsContainer.appendChild(button);
182
+ });
183
+
184
+ const atrasButton = document.createElement('button');
185
+ atrasButton.textContent = '← Atrás';
186
+ atrasButton.className = 'btn btn-outline-secondary btn-block mb-2';
187
+ atrasButton.onclick = () => render();
188
+ app.appendChild(atrasButton);
189
+
190
+ const totalButton = document.createElement('button');
191
+ totalButton.textContent = 'Calcular Total';
192
+ totalButton.className = 'btn btn-warning btn-block mb-2';
193
+ totalButton.onclick = () => {
194
+ const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
195
+ alert(`El total de la mesa es: €${total.toFixed(2)}`);
196
+ };
197
+ app.appendChild(totalButton);
198
+
199
+ const shareButton = document.createElement('button');
200
+ shareButton.textContent = 'Compartir Ticket';
201
+ shareButton.className = 'btn btn-primary btn-block';
202
+ shareButton.onclick = () => {
203
+ const total = mesa.pedidos.reduce((sum, p) => sum + p.precio * p.cantidad, 0);
204
+ if (total > 0) {
205
+ compartirTicket(index, total);
206
+ } else {
207
+ alert("La mesa no tiene productos");
208
+ }
209
+ };
210
+ app.appendChild(shareButton);
211
+ }
212
+
213
+ // Compartir ticket
214
+ function compartirTicket(index, total) {
215
+ const mesa = mesas[index];
216
+ const ticketText = `*Chiringuito Miguelito*\n*Mesa ${mesa.numero}*\n${mesa.pedidos.map(p => `${p.item} (${p.opcion || ''}) x${p.cantidad} - €${(p.precio * p.cantidad).toFixed(2)}`).join('\n')}\n*Total: €${total.toFixed(2)}*`;
217
+
218
+ if (navigator.share) {
219
+ navigator.share({
220
+ title: `Ticket Mesa ${mesa.numero}`,
221
+ text: ticketText,
222
+ })
223
+ .then(() => console.log('Ticket compartido'))
224
+ .catch((error) => console.log('Error al compartir', error));
225
+ } else {
226
+ alert(`Tu navegador no soporta la función de compartir. Copia el ticket manualmente:\n\n${ticketText}`);
227
+ }
228
+ }
229
+
230
+ // Guardar datos en Local Storage
231
+ function saveData() {
232
+ localStorage.setItem('mesas', JSON.stringify(mesas));
233
+ }
234
+
235
+ // Cargar datos del Local Storage
236
+ function loadData() {
237
+ const storedMesas = localStorage.getItem('mesas');
238
+ if (storedMesas) {
239
+ mesas = JSON.parse(storedMesas);
240
+ }
241
+ }
242
+
243
+ // Inicializar la aplicación
244
+ render();
style.css ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* General styles */
2
+
3
+
4
+ body {
5
+
6
+
7
+ font-family: sans-serif;
8
+ margin: 0;
9
+ padding: 10px;
10
+ background-color: #f8f9fa;
11
+
12
+
13
+ }
14
+
15
+ .btn {
16
+ padding: 8px 16px;
17
+ border: none;
18
+ border-radius: 5px;
19
+ cursor: pointer;
20
+ font-weight: bold;
21
+ }
22
+
23
+ .btn-block {
24
+ display: block;
25
+ width: 100%;
26
+ }
27
+
28
+ .btn-success {
29
+ background-color: #28a745;
30
+ color: white;
31
+ }
32
+
33
+ .btn-danger {
34
+ background-color: #dc3545;
35
+ color: white;
36
+ }
37
+
38
+ .btn-primary {
39
+ background-color: #007bff;
40
+ color: white;
41
+ }
42
+ .btn-warning{
43
+ background-color: #ffc107;
44
+ color: white;
45
+ }
46
+
47
+ .btn-info {
48
+ background-color: #17a2b8;
49
+ color: white;
50
+ }
51
+
52
+ .btn-outline-secondary {
53
+ color: #6c757d;
54
+ border: 2px solid #6c757d;
55
+ }
56
+
57
+ .btn-outline-danger {
58
+ color: #dc3545;
59
+ border: 2px solid #dc3545;
60
+ }
61
+
62
+ .btn-sm {
63
+ padding: 5px 10px;
64
+ font-size: 14px;
65
+ }
66
+
67
+ .text-center {
68
+ text-align: center;
69
+ }
70
+
71
+ .mb-2 {
72
+ margin-bottom: 8px;
73
+ }
74
+
75
+ /* Mesa input */
76
+ .mesa-input {
77
+ padding: 20px;
78
+ border: 1px solid #ced4da;
79
+ border-radius: 5px;
80
+ background-color: #fff;
81
+ }
82
+
83
+ .mesa-controls {
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: space-between;
87
+ margin-bottom: 10px;
88
+ }
89
+
90
+ .mesa-number {
91
+ font-size: 24px;
92
+ font-weight: bold;
93
+ }
94
+
95
+ /* Mesas container */
96
+ .mesas-container {
97
+ display: grid;
98
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
99
+ gap: 10px;
100
+ }
101
+
102
+ .mesa-card {
103
+ border: 1px solid #ced4da;
104
+ border-radius: 5px;
105
+ background-color: #fff;
106
+ }
107
+
108
+ .mesa-card-body {
109
+ padding: 15px;
110
+ }
111
+
112
+ .mesa-title {
113
+ font-size: 18px;
114
+ font-weight: bold;
115
+ margin-bottom: 10px;
116
+ }
117
+
118
+ /* Mesa heading */
119
+ .mesa-heading {
120
+ margin-bottom: 20px;
121
+ }
122
+
123
+ /* Pedidos container */
124
+ .pedidos-container {
125
+ margin-bottom: 20px;
126
+ border: 1px solid #ced4da;
127
+ padding: 10px;
128
+ border-radius: 5px;
129
+ background-color: #f5f5f5;
130
+ }
131
+
132
+ /* Opciones container */
133
+ .opciones-container {
134
+ padding: 20px;
135
+ border: 1px solid #ced4da;
136
+ border-radius: 5px;
137
+ background-color: #fff;
138
+ }
139
+
140
+ .opcion-item {
141
+ display: flex;
142
+ justify-content: space-between;
143
+ align-items: center;
144
+ margin-bottom: 10px;
145
+ }
146
+
147
+ .cantidad-controls {
148
+ display: flex;
149
+ align-items: center;
150
+ }
151
+
152
+ .cantidad {
153
+ margin: 0 10px;
154
+ font-weight: bold;
155
+ }
156
+
157
+ /* Responsive design */
158
+ @media (max-