Update script.js

script.js

@@ -55,9 +55,8 @@ function render() {
         mesaDiv.style.cursor = 'pointer';
         mesaDiv.onclick = () => gestionarMesa(index);
 
-        // Añadir listener para el botón de eliminar
         mesaDiv.querySelector('.delete-mesa').onclick = (event) => {
-            event.stopPropagation(); // Evitar que se abra la mesa al eliminar
+            event.stopPropagation();
             if (confirm(`¿Estás seguro de que quieres eliminar la Mesa ${mesa.numero}?`)) {
                 mesas.splice(index, 1);
                 render();
@@ -70,7 +69,6 @@ function render() {
     app.appendChild(mesasContainer);
 }
 
-
 function gestionarMesa(index) {
     const mesa = mesas[index];
     app.innerHTML = '';
@@ -116,7 +114,6 @@ function gestionarMesa(index) {
                 `;
                 opcionesContainer.appendChild(opcionDiv);
 
-                // Añadimos los listeners dentro del bucle, para cada grupo de botones
                 const cantidadControls = opcionDiv.querySelector('.cantidad-controls');
                 const cantidadSpan = cantidadControls.querySelector('.cantidad');
                 cantidadControls.querySelector('.decrease').onclick = () => {
@@ -184,39 +181,45 @@ function gestionarMesa(index) {
     app.appendChild(finalizarButton);
 }
 
-// Generación del QR usando la API externa con descarga
+// Generación del PDF con jsPDF
 function generarTicket(index, total) {
     const mesa = mesas[index];
-    let qrContent = `Mesa ${mesa.numero}\n`;
 
+    // Crear un nuevo documento PDF
+    const doc = new jsPDF();
+
+    // Agregar contenido al PDF
+    doc.text(`Mesa ${mesa.numero}`, 10, 10);
+    let yOffset = 20;
     mesa.pedidos.forEach(pedido => {
-        qrContent += `${pedido.item} (${pedido.opcion || ''}) x${pedido.cantidad} - €${(pedido.precio * pedido.cantidad).toFixed(2)}\n`;
+        doc.text(`${pedido.item} (${pedido.opcion || ''}) x${pedido.cantidad} - €${(pedido.precio * pedido.cantidad).toFixed(2)}`, 10, yOffset);
+        yOffset += 10;
     });
+    doc.text(`Total: €${total.toFixed(2)}`, 10, yOffset);
 
-    qrContent += `\nTotal: €${total.toFixed(2)}`;
-
-    console.log('QR Content:', qrContent);
+    // Mostrar el total debajo del QR
+    const totalText = document.createElement('p');
+    totalText.textContent = `Total: €${total.toFixed(2)}`;
+    totalText.className = 'text-center';
+    app.appendChild(totalText);
 
-    app.innerHTML = ''; 
+    // Generar el PDF y descargarlo
+    doc.save(`ticket-mesa-${mesa.numero}.pdf`);
 
+    // Mostrar el QR
     const qrContainer = document.createElement('div');
     qrContainer.className = 'text-center';
     app.appendChild(qrContainer);
 
+    const qrContent = `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 qrUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(qrContent)}&size=256x256`;
 
-    // Crear enlace de descarga
-    const downloadLink = document.createElement('a');
-    downloadLink.href = qrUrl;
-    downloadLink.download = `qr-mesa-${mesa.numero}.png`; 
-    downloadLink.textContent = 'Descargar QR';
-    qrContainer.appendChild(downloadLink);
-
     const qrImage = document.createElement('img');
     qrImage.src = qrUrl;
     qrImage.alt = 'QR Code';
     qrContainer.appendChild(qrImage);
 
+    // Botón "Volver"
     const volverButton = document.createElement('button');
     volverButton.textContent = '← Volver';
     volverButton.className = 'btn btn-outline-danger btn-block';
@@ -226,5 +229,3 @@ function generarTicket(index, total) {
 
 // Inicializar la aplicación
 render();
-
-