139 lines
5.0 KiB
HTML
139 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script src="/static/instascan.min.js"></script>
|
|
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"
|
|
integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
|
|
crossorigin="anonymous"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function () {
|
|
var socket = io();
|
|
socket.on('connect', function () {
|
|
socket.emit('connection', { data: 'Connected to server' });
|
|
});
|
|
socket.on('initial_qr', function (msg, cb) {
|
|
$('#qrcode').prop('src', msg.data[0]);
|
|
$('#qrcode2').prop('src', msg.data[3]);
|
|
$('#url').prop('href', msg.data[1]).text(msg.data[1]);
|
|
$('#url2').prop('href', msg.data[4]).text(msg.data[4]);
|
|
$('#log').empty();
|
|
msg.data[2].forEach(function (item) {
|
|
$('#log').append('<li>' + item[0] + ': ' + item[1] + '</li>');
|
|
}
|
|
);
|
|
$('#log2').empty();
|
|
msg.data[5].forEach(function (item) {
|
|
$('#log2').append('<li>' + item[0] + ': ' + item[1] + '</li>');
|
|
}
|
|
);
|
|
if (cb)
|
|
cb();
|
|
});
|
|
socket.on('qr_used', function (msg, cb) {
|
|
if (msg.data[4] == 'CheckIn') {
|
|
$('#qrcode').prop('src', msg.data[0]).fadeTo(3000, 0.05, function () { $(this).delay(100).fadeTo('slow', 1) });
|
|
$('#url').prop('href', msg.data[1]).text(msg.data[1]);
|
|
var new_entry = '<li>' + msg.data[2] + ': ' + msg.data[3] + '</li>';
|
|
$(new_entry).hide().prependTo('#log').fadeIn('slow');
|
|
$('#log').fadeIn(500, function () { $(this).prepend() });
|
|
$('#log li:gt(9)').remove();
|
|
}
|
|
if (msg.data[4] == 'CheckOut') {
|
|
$('#qrcode2').prop('src', msg.data[0]).fadeTo(3000, 0.05, function () { $(this).delay(100).fadeTo('slow', 1) });
|
|
$('#url2').prop('href', msg.data[1]).text(msg.data[1]);
|
|
var new_entry = '<li>' + msg.data[2] + ': ' + msg.data[3] + '</li>';
|
|
$(new_entry).hide().prependTo('#log2').fadeIn('slow');
|
|
$('#log2').fadeIn(500, function () { $(this).prepend() });
|
|
$('#log2 li:gt(9)').remove();
|
|
}
|
|
if (cb)
|
|
cb();
|
|
});
|
|
});
|
|
</script>
|
|
<title>Códigos QR</title>
|
|
<style>
|
|
#contenedor {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#contenedor>div {
|
|
width: 50%;
|
|
}
|
|
|
|
.block {
|
|
text-align: center;
|
|
}
|
|
|
|
.list {
|
|
text-align: left;
|
|
display: inline-block;
|
|
}
|
|
|
|
#refuse {
|
|
font-size: 24pt;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="text-align: center;">
|
|
{% if access == true %}
|
|
<h1>Códigos QR</h1>
|
|
<p> IP: {{ ip_branch }}</p>
|
|
<div id="contenedor">
|
|
<div>
|
|
<h1>Entrada</h1>
|
|
<img id="qrcode" src="/static/loading.gif">
|
|
<h1>Últimos 10 usuarios:</h1>
|
|
<div class="block">
|
|
<ul class="list" id="log"></ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h1>Salida</h1>
|
|
<img id="qrcode2" src="/static/loading.gif">
|
|
<h1>Últimos 10 usuarios:</h1>
|
|
<div class="block">
|
|
<ul class="list" id="log2"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div id="refuse">
|
|
<video style="width:100%; height:100%;" id="preview"></video>
|
|
<script type="text/javascript">
|
|
let options = {
|
|
video: document.getElementById('preview'),
|
|
mirror: false,
|
|
};
|
|
let scanner = new Instascan.Scanner(options);
|
|
scanner.addListener('scan', function (content) {
|
|
const decodedData = atob(content)
|
|
window.location.replace(decodedData);
|
|
});
|
|
|
|
Instascan.Camera.getCameras().then(function (cameras) {
|
|
if (cameras.length > 3) {
|
|
scanner.start(cameras[3]);
|
|
} else if (cameras.length > 2) {
|
|
scanner.start(cameras[2]);
|
|
} else if (cameras.length > 1) {
|
|
scanner.start(cameras[1]);
|
|
} else if (cameras.length > 0) {
|
|
scanner.start(cameras[0]);
|
|
} else {
|
|
console.error('No cameras found.');
|
|
}
|
|
}).catch(function (e) {
|
|
console.error(e);
|
|
});
|
|
</script>
|
|
</div>
|
|
{% endif %}
|
|
</body>
|
|
|
|
</html> |