Ticket-Server/templates/scan.html

173 lines
6.2 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=720, initial-scale=1">
<title>Ticket Scanner 2.0</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script>
var siteWidth = 720;
var scale = screen.width / siteWidth;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + siteWidth + ', initial-scale=' + scale + '');
function postData(url, data, method) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'content-type': 'application/json',
},
method: method || 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})// parses response to JSON
}
function users() {
return fetch("/list", {
{# body: JSON.stringify(data), // must match 'Content-Type' header#}
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
{#headers: {
'content-type': 'application/json',
},#}
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
}).then(resp => {
return resp.text()
}).then(data => {
console.log(data);
return data;
})
}
function addUser(username) {
document.getElementById("result").innerText = username;
postData("/ticket", {number: username, function: "{{ func }}"})
.then(function (response) {
if (response.ok) {
document.getElementById("centerdiv").style.backgroundColor = "#00D41D";
setTimeout(function () {
document.getElementById("centerdiv").style.backgroundColor = "";
}, 2500)
} else {
document.getElementById("centerdiv").style.backgroundColor = "#D40000";
setTimeout(function () {
document.getElementById("centerdiv").style.backgroundColor = "";
}, 2500)
}
r = response.json();
return r;
})
.then(function (data) {
console.log(data);
document.getElementById("msg").innerText = data.msg;
})
.catch(function (error) {
console.error(error);
document.getElementById("centerdiv").backgroundColor = "#D40000";
setTimeout(function () {
document.getElementById("centerdiv").style.backgroundColor = "#FFFFFF";
}, 5000)
});
}
setInterval(function () {
users().then(data => {
document.getElementById("vb").innerHTML = data
})
}, 1000);
function addLlnr() {
var x = document.getElementById("inputbox").value;
if (x.toString().length !== 6) {
alert("Een leerlingnummer heeft 6 getallen!");
return
}
if (confirm("Wil je " + x.toString() + " Toevoegen?")) {
addUser(x.toString());
}
document.getElementById("inputbox").value="";
}
function checkval(evt) {
if((evt.keyCode === 13) || evt.which === 13 || evt.key === 13){
addLlnr();
return false
}
return true
}
</script>
</head>
<body>
<div id="centerdiv">
<h1>TicketScanner 2.0: {{ username }}</h1>
<h2>{{ mode }}</h2>
<div id="derk">
<p>Binnen/verkocht: <span id="vb"></span></p>
<p>Leerlingnummer: <span id="result"></span></p>
<p>Resultaat: <span id="msg"></span></p>
<p>Voeg handmatig toe: <input type="text" id="inputbox" title="leerlingnummer" placeholder="######" autofocus="autofocus" {#onclick="addLlnr()"#} onkeydown="return checkval(event)">
<button id="addBtn" onclick="addLlnr()">Voeg Toe</button>
</p>
<p><a href="/excel">Download xlsx bestand</a></p>
</div>
<div>
<div id="mobileCanvas"{#style="display: none; float: bottom;"#}></div>
</div>
</div>
</body>
<script src="/libs/quagga.min.js"></script>
<script>
Quagga.init(
{
inputStream: {
name: "Live",
locate: true,
frequency: 5,
type: "LiveStream",
target: document.querySelector('#mobileCanvas'), // Or '#yourElement' (optional)
constraints: {
width: 640,
height: 480,
facingMode: "environment"
},
},
decoder: {
readers: ["codabar_reader"]
}
},
function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
let last = "";
Quagga.onDetected(function (data) {
let code = data.codeResult.code;
code = code.slice(1, -1);
if (last !== code) {
last = code;
addUser(code)
}
});
Quagga.start();
});
</script>
</html>