Implement QR code ticket scanning and details retrieval: add fetch request to get_ticket_details.php and display ticket information

php/get_ticket_details.php

@@ -0,0 +1,42 @@
+<?php
+header('Content-Type: application/json');
+
+// Database connection
+$servername = "localhost";
+$username = "database12"; // Updated username
+$password = "181t$1lJg"; // Updated password
+$dbname = "spik_en_span";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+// Check connection
+if ($conn->connect_error) {
+    echo json_encode(['success' => false, 'message' => 'Databaseverbinding mislukt.']);
+    exit();
+}
+
+// Retrieve ticket_id from the query string
+$ticket_id = isset($_GET['ticket_id']) ? trim($_GET['ticket_id']) : '';
+
+if (empty($ticket_id)) {
+    echo json_encode(['success' => false, 'message' => 'Geen ticket ID opgegeven.']);
+    exit();
+}
+
+// Query the database for ticket details
+$sql = "SELECT ticket_id, category, day FROM tickets WHERE ticket_id = ?";
+$stmt = $conn->prepare($sql);
+$stmt->bind_param("s", $ticket_id);
+$stmt->execute();
+$result = $stmt->get_result();
+
+if ($result->num_rows > 0) {
+    $ticket = $result->fetch_assoc();
+    echo json_encode(['success' => true, 'ticket_id' => $ticket['ticket_id'], 'category' => $ticket['category'], 'day' => $ticket['day']]);
+} else {
+    echo json_encode(['success' => false, 'message' => 'Ticket niet gevonden.']);
+}
+
+$stmt->close();
+$conn->close();
+?>

qr/qrCodeScanner.js

@@ -25,11 +25,31 @@ btnScanQR.addEventListener('click', () => {
 
                     try {
                         const qrCodeData = qrcode.decode();
-                        outputData.innerText = qrCodeData;
+                        fetch(`../php/get_ticket_details.php?ticket_id=${encodeURIComponent(qrCodeData)}`)
-                        qrResult.hidden = false;
+                            .then(response => response.json())
-                        qrCanvas.hidden = true;
+                            .then(data => {
-                        video.hidden = true; // Hide the video element after scanning
+                                if (data.success) {
-                        stream.getTracks().forEach(track => track.stop());
+                                    outputData.innerHTML = `
+                                        <p><strong>Ticket ID:</strong> ${data.ticket_id}</p>
+                                        <p><strong>Dag:</strong> ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}</p>
+                                        <p><strong>Categorie:</strong> ${data.category === 'volwassen' ? 'Volwassene' : 'Kind'}</p>
+                                    `;
+                                } else {
+                                    outputData.innerHTML = `<p style="color: red;">${data.message}</p>`;
+                                }
+                                qrResult.hidden = false;
+                                qrCanvas.hidden = true;
+                                video.hidden = true; // Hide the video element after scanning
+                                stream.getTracks().forEach(track => track.stop());
+                            })
+                            .catch(err => {
+                                console.error('Error fetching ticket details:', err);
+                                outputData.innerHTML = `<p style="color: red;">Fout bij het ophalen van ticketgegevens.</p>`;
+                                qrResult.hidden = false;
+                                qrCanvas.hidden = true;
+                                video.hidden = true;
+                                stream.getTracks().forEach(track => track.stop());
+                            });
                     } catch (e) {
                         requestAnimationFrame(scan);
                     }