173 lines
6.2 KiB
HTML
173 lines
6.2 KiB
HTML
|
<!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>
|