diff --git a/php/get_ticket_details.php b/php/get_ticket_details.php index 44704ac..ebe5a5c 100644 --- a/php/get_ticket_details.php +++ b/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.']); } diff --git a/qr/qr.html b/qr/qr.html index d47ec6e..30e0076 100644 --- a/qr/qr.html +++ b/qr/qr.html @@ -14,8 +14,8 @@ QR Icon - - + + diff --git a/qr/qrCodeScanner.js b/qr/qrCodeScanner.js index fc7914b..54a568a 100644 --- a/qr/qrCodeScanner.js +++ b/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 - qrCanvas.hidden = false; + video.style.display = 'block'; // Show the video element + 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 = `

Ticket ID: ${data.ticket_id}

Dag: ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}

Categorie: ${data.category === 'volwassen' ? 'Volwassene' : 'Kind'}

+

Ticket succesvol gescand en opgeslagen!

`; } else { + document.body.style.backgroundColor = 'red'; // Change background to red outputData.innerHTML = `

${data.message}

`; } + 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 = `

Fout bij het ophalen van ticketgegevens.

`; + 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) { diff --git a/qr/styles.css b/qr/styles.css index fd1223b..152fc6a 100644 --- a/qr/styles.css +++ b/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 */ + }