<!DOCTYPE html>
<html>
<head>
<title>QR Scanner</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
</head>
<body>
<h1 id="title" style="font-size: 3vw;color: steelblue;" align="center"><img src="windsorLogo.png"/> <br>Scanning</h1>
<h5 id="scanAnimation" style="font-size: 2vw;color: gray;" align="center"></h5>
<h2 id="status" style="font-size: 2vw;color: steelblue;" align="center"></h2>
<h3 id="student" style="font-size: 2vw;color: steelblue;" align="center"></h3>
<script>
var video = document.createElement('video');
var parameters = new URLSearchParams(window.location.search);
var firstNme = parameters.get('firstName');
var lastNme = parameters.get('lastName');
var crdID = parameters.get('cardID');
var timer = 0;
var initialTime = 0;
const codeReader = new ZXing.BrowserQRCodeReader();
try {
url = new URL(window.location.href);
parameters = new URLSearchParams(url.search);
firstNme = url.searchParams.get('firstName');
lastNme = url.searchParams.get('lastName');
crdID = url.searchParams.get('cardID');
if (firstNme == null || lastNme == null || crdID == null) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
} else {
document.getElementById("status").innerHTML = "Processing ID";
sendDataToRegister();
initialTime = -5;
}
} catch (err) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
}
ee();
var textRead = "";
function ee() {
if (timer % 5 == 0) {
document.getElementById("scanAnimation").innerHTML = ".";
}
if (timer % 5 == 1) {
document.getElementById("scanAnimation").innerHTML = ". .";
}
if (timer % 5 == 2) {
document.getElementById("scanAnimation").innerHTML = ". . .";
}
if (timer % 5 == 3) {
document.getElementById("scanAnimation").innerHTML = ". . . .";
}
if (timer % 5 == 4) {
document.getElementById("scanAnimation").innerHTML = ". . . . .";
}
if (initialTime > 1) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
}
timer++;
initialTime++;
codeReader.decodeFromVideoDevice(null, video, (result, err) => {
if (result) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
textRead = result.text;
try {
url = new URL(textRead);
parameters = new URLSearchParams(url.search);
firstNme = url.searchParams.get('firstName');
lastNme = url.searchParams.get('lastName');
crdID = url.searchParams.get('cardID');
if (firstNme == null || lastNme == null || crdID == null) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
} else {
document.getElementById("status").innerHTML = "Processing ID";
sendDataToRegister();
initialTime = -5;
}
} catch (err) {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
}
}
});
setTimeout(ee, 1000);
}
function sendDataToRegister() {
jQuery.post('https://script.google.com/macros/s/AKfycbypJsaP4BmfBWmEiAMN2o90K7ETv8D9M8GH7PL-MQk5rlaEbzc/exec', {
firstName: firstNme,
lastName: lastNme,
cardID: crdID,
batteryLevel: '900'
}
).done(function (data) {
if (data === "Approved") {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
initialTime = 0;
document.getElementById("status").innerHTML = "Approved";
document.getElementById("student").innerHTML = firstNme + ", " + lastNme;
} else {
document.getElementById("status").innerHTML = "";
document.getElementById("student").innerHTML = "";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
// document.getElementById("student").innerHTML = firstNme + ", " + lastNme;
}
})
}
</script>
</body>
</html>