alvin/Spik-en-span
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Spik-en-span.git synced 2026-03-06 11:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor code: remove unnecessary comments and clean up whitespace in various files

Browse Source
This commit is contained in:
vista-man
2025-04-10 22:53:25 +02:00
parent e46044682e
commit 4e0f6238b6
8 changed files with 62 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
qr/qr.html
View File

@@ -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" autoplay playsinline></video> <!-- Only one video element -->
<canvas id="qr-canvas" hidden></canvas> <!-- Ensure canvas is hidden -->
<video id="video" autoplay playsinline></video>
<canvas id="qr-canvas" hidden></canvas>
<div id="qr-result" hidden>
<b>Data:</b> <span id="outputData"></span>
</div>

42
qr/qrCodeScanner.js
View File

@@ -1,29 +1,29 @@
const btnScanQR = document.getElementById('btn-scan-qr');
const qrCanvas = document.getElementById('qr-canvas'); // Canvas for QR code processing
const qrCanvas = document.getElementById('qr-canvas');
const qrResult = document.getElementById('qr-result');
const outputData = document.getElementById('outputData');
const video = document.getElementById('video'); // Video element for camera feed
const scanAgainButton = document.createElement('button'); // Button to scan another ticket
const video = document.getElementById('video');
const scanAgainButton = document.createElement('button');
scanAgainButton.textContent = 'Scan Nog Een Ticket';
scanAgainButton.className = 'btn btn-primary mt-3';
scanAgainButton.style.display = 'none'; // Initially hidden
scanAgainButton.style.display = 'none';
scanAgainButton.addEventListener('click', () => {
location.reload(); // Reload the page to reset the scanner
location.reload();
});
document.body.appendChild(scanAgainButton); // Add the button to the page
document.body.appendChild(scanAgainButton);
btnScanQR.addEventListener('click', () => {
btnScanQR.hidden = true; // Hide the QR code icon
video.style.display = 'block'; // Show the video element
qrCanvas.hidden = true; // Ensure canvas remains hidden
btnScanQR.hidden = true;
video.style.display = 'block';
qrCanvas.hidden = true;
qrResult.hidden = true;
const context = qrCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => {
video.srcObject = stream;
video.setAttribute('playsinline', true); // Required to work on iOS
video.setAttribute('playsinline', true);
video.play();
const scan = () => {
@@ -38,7 +38,7 @@ btnScanQR.addEventListener('click', () => {
.then(response => response.json())
.then(data => {
if (data.success) {
document.body.style.backgroundColor = 'green'; // Change background to green
document.body.style.backgroundColor = 'green';
outputData.innerHTML = `
<p><strong>Ticket ID:</strong> ${data.ticket_id}</p>
<p><strong>Dag:</strong> ${data.day === 'friday' ? 'Vrijdag' : 'Zaterdag'}</p>
@@ -46,16 +46,16 @@ btnScanQR.addEventListener('click', () => {
<p style="color: green;">Ticket succesvol gescand en opgeslagen!</p>
`;
} else {
document.body.style.backgroundColor = 'red'; // Change background to red
document.body.style.backgroundColor = 'red';
outputData.innerHTML = `<p style="color: red;">${data.message}</p>`;
}
setTimeout(() => {
document.body.style.backgroundColor = ''; // Reset background color
}, 2000); // Reset after 2 seconds
document.body.style.backgroundColor = '';
}, 2000);
qrResult.hidden = false;
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
qrCanvas.hidden = true;
video.hidden = true;
scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop());
})
.catch(err => {
@@ -63,12 +63,12 @@ btnScanQR.addEventListener('click', () => {
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
document.body.style.backgroundColor = '';
}, 2000);
qrResult.hidden = false;
qrCanvas.hidden = true; // Ensure canvas remains hidden
qrCanvas.hidden = true;
video.hidden = true;
scanAgainButton.style.display = 'block'; // Show the "Scan Again" button
scanAgainButton.style.display = 'block';
stream.getTracks().forEach(track => track.stop());
});
} catch (e) {

8
qr/styles.css
View File

@@ -32,7 +32,7 @@ html {
display: flex;
justify-content: center;
align-items: center;
height: 75vh; /* Full viewport height for vertical centering */
height: 75vh;
}
#btn-scan-qr img {
@@ -40,7 +40,7 @@ html {
padding: 15px;
margin: 15px;
background: white;
border-radius: 10px; /* Optional: Add rounded corners */
border-radius: 10px;
}
#qr-result {
@@ -52,7 +52,7 @@ html {
}
#video {
display: none; /* Initially hidden */
display: none;
margin: 0 auto;
width: 100%;
max-width: 400px;
@@ -62,5 +62,5 @@ html {
}
#video:visible {
display: block; /* Show the video feed when it becomes visible */
display: block;
}