From 5072eb7792461225f51399091eccac5b3cf9a9a1 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Thu, 10 Apr 2025 22:23:51 +0200
Subject: [PATCH] Implement ticket scanning logic and UI enhancements: check
for scanned tickets, update styles, and add "Scan Again" button
---
php/get_ticket_details.php | 33 ++++++++++++++++++++++++++++++++-
qr/qr.html | 4 ++--
qr/qrCodeScanner.js | 33 +++++++++++++++++++++++++++------
qr/styles.css | 6 +++++-
4 files changed, 66 insertions(+), 10 deletions(-)
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 @@
-
-
+
+
Data:
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 */
+ }