Implement ticket scanning logic and UI enhancements: check for scanned tickets, update styles, and add "Scan Again" button

php/get_ticket_details.php

@@ -32,7 +32,38 @@ $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']]);
+
+    // Check if the ticket has already been scanned
+    $checkScannedSql = "SELECT id FROM scanned_tickets WHERE ticket_id = ?";
+    $checkStmt = $conn->prepare($checkScannedSql);
+    $checkStmt->bind_param("s", $ticket_id);
+    $checkStmt->execute();
+    $checkResult = $checkStmt->get_result();
+
+    if ($checkResult->num_rows > 0) {
+        echo json_encode(['success' => false, 'message' => 'Ticket al gescanned.']);
+    } else {
+        // Insert the ticket into the scanned_tickets table
+        $insertScannedSql = "INSERT INTO scanned_tickets (ticket_id, is_valid) VALUES (?, ?)";
+        $insertStmt = $conn->prepare($insertScannedSql);
+        $is_valid = true;
+        $insertStmt->bind_param("si", $ticket_id, $is_valid);
+
+        if ($insertStmt->execute()) {
+            echo json_encode([
+                'success' => true,
+                'ticket_id' => $ticket['ticket_id'],
+                'category' => $ticket['category'],
+                'day' => $ticket['day']
+            ]);
+        } else {
+            echo json_encode(['success' => false, 'message' => 'Fout bij het opslaan van het gescande ticket.']);
+        }
+
+        $insertStmt->close();
+    }
+
+    $checkStmt->close();
 } else {
     echo json_encode(['success' => false, 'message' => 'Ticket niet gevonden.']);
 }

qr/qr.html

@@ -14,8 +14,8 @@
         <a id="btn-scan-qr">
             <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg" alt="QR Icon">
         </a>
-        <video id="video" hidden autoplay playsinline></video>
+        <video id="video" autoplay playsinline></video> <!-- Only one video element -->
-        <canvas hidden id="qr-canvas"></canvas>
+        <canvas id="qr-canvas" hidden></canvas> <!-- Ensure canvas is hidden -->
         <div id="qr-result" hidden>
             <b>Data:</b> <span id="outputData"></span>
         </div>

qr/qrCodeScanner.js

@@ -1,13 +1,22 @@
 const btnScanQR = document.getElementById('btn-scan-qr');
-const qrCanvas = document.getElementById('qr-canvas');
+const qrCanvas = document.getElementById('qr-canvas'); // Canvas for QR code processing
 const qrResult = document.getElementById('qr-result');
 const outputData = document.getElementById('outputData');
-const video = document.getElementById('video');
+const video = document.getElementById('video'); // Video element for camera feed
+const scanAgainButton = document.createElement('button'); // Button to scan another ticket
+
+scanAgainButton.textContent = 'Scan Nog Een Ticket';
+scanAgainButton.className = 'btn btn-primary mt-3';
+scanAgainButton.style.display = 'none'; // Initially hidden
+scanAgainButton.addEventListener('click', () => {
+    location.reload(); // Reload the page to reset the scanner
+});
+document.body.appendChild(scanAgainButton); // Add the button to the page
 
 btnScanQR.addEventListener('click', () => {
     btnScanQR.hidden = true; // Hide the QR code icon
-    video.hidden = false; // Show the video element
+    video.style.display = 'block'; // Show the video element
-    qrCanvas.hidden = false;
+    qrCanvas.hidden = true; // Ensure canvas remains hidden
     qrResult.hidden = true;
 
     const context = qrCanvas.getContext('2d');
@@ -29,25 +38,37 @@ btnScanQR.addEventListener('click', () => {
                             .then(response => response.json())
                             .then(data => {
                                 if (data.success) {
+                                    document.body.style.backgroundColor = 'green'; // Change background to green
                                     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>
+                                        <p style="color: green;">Ticket succesvol gescand en opgeslagen!</p>
                                     `;
                                 } else {
+                                    document.body.style.backgroundColor = 'red'; // Change background to red
                                     outputData.innerHTML = `<p style="color: red;">${data.message}</p>`;
                                 }
+                                setTimeout(() => {
+                                    document.body.style.backgroundColor = ''; // Reset background color
+                                }, 2000); // Reset after 2 seconds
                                 qrResult.hidden = false;
-                                qrCanvas.hidden = true;
+                                qrCanvas.hidden = true; // Ensure canvas remains hidden
                                 video.hidden = true; // Hide the video element after scanning
+                                scanAgainButton.style.display = 'block'; // Show the "Scan Again" button
                                 stream.getTracks().forEach(track => track.stop());
                             })
                             .catch(err => {
                                 console.error('Error fetching ticket details:', err);
+                                document.body.style.backgroundColor = 'red';
                                 outputData.innerHTML = `<p style="color: red;">Fout bij het ophalen van ticketgegevens.</p>`;
+                                setTimeout(() => {
+                                    document.body.style.backgroundColor = ''; // Reset background color
+                                }, 2000); // Reset after 2 seconds
                                 qrResult.hidden = false;
-                                qrCanvas.hidden = true;
+                                qrCanvas.hidden = true; // Ensure canvas remains hidden
                                 video.hidden = true;
+                                scanAgainButton.style.display = 'block'; // Show the "Scan Again" button
                                 stream.getTracks().forEach(track => track.stop());
                             });
                     } catch (e) {

qr/styles.css

@@ -52,7 +52,7 @@ html {
   }
 
   #video {
-    display: block;
+    display: none; /* Initially hidden */
     margin: 0 auto;
     width: 100%;
     max-width: 400px;
@@ -60,3 +60,7 @@ html {
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
   }
+
+  #video:visible {
+    display: block; /* Show the video feed when it becomes visible */
+  }