var qrUi="<h1 id='title' style='font-size: 40px;color: steelblue; margin-top:50px;' align='center'><div style='margin-bottom:20px;'><img src='windsorLogo.png'/></div><div style='margin-top:20px'>Scanning</div></h1><h5 id='scanAnimation' style='font-size: 30px;color: gray;' align='center'></h5> <h6 align='center' ><div id='canvasContainer' style='scale:75%;zoom:75%;height:200px;display:none;'><canvas id='canvas' width='320' height='240' style='margin:auto;'></canvas></div></h6><video id='video' height='0' ></video> <div class='container' id='formContainer' style='width: 300px;'><form action='javascript:send()'><div class='form-group grid-container' style='display: grid;grid-template-columns: auto 30%;padding: 10px;grid-gap: 10px;'><input class='form-control' id='cid' placeholder='Enter Password'><button type='submit' class='btn btn-default' id='submitButton'>Login</button><div class='form-group'><a href='qrscanner3PasswordRecovery.html' >Forgot Password?</a></div></div></form></div><h2 id='status' style='font-size: 25px;color: steelblue;' align='center'></h2><h3 id='student' style='font-size: 25px;color: steelblue;' align='center'></h3><img id='img' width='0' height='0' src='' ></img>";
var video;
var canvas;
var parameters;
var classInfo;
var gClassInfo;
var crdID = '';
var timer = 0;
var initialTime = 0;
var dataReceived = true;
var textRead = '';
var cardStatus='paule';
navigator.mediaDevices.getUserMedia({video: {facingMode: 'user',width: {ideal: 480}}}).then(function (stream) {
video.srcObject = stream;
video.play();
document.getElementById("canvasContainer").style.display="block";
}).catch(function(err){
document.getElementById("canvasContainer").style.display="none";
});
const codeReader = new ZXing.BrowserQRCodeReader();
function load(panel){
document.getElementById(panel).innerHTML=qrUi;
video=document.getElementById('video');
canvas=document.getElementById('canvas').getContext('2d');
parameters = new URLSearchParams(window.location.search);
classInfo = parameters.get('class');
gClassInfo = parameters.get('gClass');
repeat();
}
function repeat() {
if (timer % 20 == 0) {
document.getElementById("scanAnimation").innerHTML = ".";
}
if (timer % 20 == 4) {
document.getElementById("scanAnimation").innerHTML = ". .";
}
if (timer % 20 == 8) {
document.getElementById("scanAnimation").innerHTML = ". . .";
}
if (timer % 20 == 12) {
document.getElementById("scanAnimation").innerHTML = ". . . .";
}
if (timer % 20 == 16) {
document.getElementById("scanAnimation").innerHTML = ". . . . .";
}
if (initialTime > 1) {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
}
timer++;
initialTime++;
canvas.drawImage(video,0,0);
var x=document.getElementById("canvas").toDataURL();
document.getElementById("img").src=x;
codeReader.decodeFromImage(undefined,x).then((result, err) => {
if (result) {
// document.getElementById("status").innerHTML = " ";
// document.getElementById("student").innerHTML = " ";
textRead = result.text;
try {
crdID = textRead ;
if (crdID == null) {
document.getElementById("status").innerHTML = "Card Invalid";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
} else {
if (dataReceived) {
dataReceived = !dataReceived;
loginToQrLunchWidget();initialTime = -60;
}
document.getElementById("status").innerHTML = "Processing ID";
}
} catch (err) {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
}
}
});
canvas.lineJoin="round";
canvas.lineWidth="7";
canvas.strokeStyle="rgba(70,130,180,0.5)";
drawTarget();
canvas.stroke();
setTimeout(repeat, 33);
}
function loginToQrLunchWidget() {
jQuery.post('https://script.google.com/macros/s/AKfycbypVhRlT__iDF5Kyw4XtsqZCKguDvixJyj5I1Tz_r3Mxwtj3fBE/exec', {
cardID: crdID,
class: classInfo,
email: '',
instruction: 'login'
}
).done(function (data) {
var dataAsArray=data.split(",");
if (dataAsArray[0]=== "Approved") {
initialTime = 0;
document.getElementById("status").innerHTML = "Approved";
document.getElementById("student").innerHTML = dataAsArray[1]+ " " + dataAsArray[2]+(cardStatus='approved');
initialTime=-30;
dataReceived=true;
cardStatus='approved';
//redirect();
} else {
document.getElementById("status").innerHTML = " ";
document.getElementById("student").innerHTML = " ";
initialTime = 0;
document.getElementById("status").innerHTML = "Card Invalid";
dataReceived = true
document.getElementById("submitButton").disabled = false;
}
})
}
function drawTarget(){
canvas.beginPath();
canvas.moveTo((320-150)/2, (240-150)/2+50);
canvas.lineTo((320-150)/2, (240-150)/2+50-30);
canvas.arc((320-150)/2+20,(240-150)/2+20,20,Math.PI,-Math.PI/2);
canvas.moveTo((320-150)/2+20, (240-150)/2);
canvas.lineTo((320-150)/2+50, (240-150)/2);
canvas.moveTo((320-150)/2+150, (240-150)/2+50);
canvas.lineTo((320-150)/2+150, (240-150)/2+50-30);
canvas.moveTo((320-150)/2+100, (240-150)/2);
canvas.lineTo((320-150)/2+130, (240-150)/2);
canvas.arc((320-150)/2+110+20,(240-150)/2+20,20,Math.PI/-2,0);
canvas.moveTo((320-150)/2, (240-150)/2+100);
canvas.lineTo((320-150)/2, (240-150)/2+100+30);
canvas.arc((320-150)/2+20,(240-150)/2+110+20,20,Math.PI,Math.PI/2,true);
canvas.moveTo((320-150)/2+20, (240-150)/2+150);
canvas.lineTo((320-150)/2+50, (240-150)/2+150);
canvas.moveTo((320-150)/2+150, (240-150)/2+100);
canvas.lineTo((320-150)/2+150, (240-150)/2+100+30);
canvas.moveTo((320-150)/2+100, (240-150)/2+150);
canvas.lineTo((320-150)/2+130, (240-150)/2+150);
canvas.arc((320-150)/2+110+20,(240-150)/2+110+20,20,Math.PI/2,0,true);
}
function redirect() {
window.location.assign(gClassInfo);
}
function send() {
crdID = document.getElementById("cid").value
document.getElementById("submitButton").disabled = true;
document.getElementById("status").innerHTML = "Processing ID";
initialTime = -60;
loginToQrLunchWidget();
}
function g(){return cardStatus;}