<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/css/bulma.min.css">
<script src="/assets/js/html5-qrcode.min.js"></script>
<title>Falcon Handset UI</title>
</head>
<body>
<h1>Scanner de códigos de barras</h1>
<div id="read-result"></div>
<div style="display: flex; justify-content: center;">
<div id="my-qr-reader" style="width:500px;"></div>
</div>
<script>
function domReady(fn) {
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
domReady(function () {
var myqr = document.getElementById('read-result')
var lastResult, countResults = 0;
function checkText(decodeText) {
const startsWith = ['940', '945'];
if (!startsWith.includes(decodeText.substring(0, 3))) {
return false;
}
if (decodeText.length !== 10) {
return false;
}
return true;
}
function onScanSuccess(decodeText, decodeResult) {
if (decodeText !== lastResult) {
if (!checkText(decodeText)) {
alert("El código de barras leído no es valido");
return
}
++countResults;
lastResult = decodeText;
fetch('/barcode/' + decodeText)
.then(response => {
if (!response.ok) {
throw new Error(`Respuesta no exitosa ${response.status}`);
}
return response.json();
})
.then(data => {
console.log('data:', data); // Reemplaza por la forma en que deseas usar los datos
})
.catch(error => {
console.error('barcode error:', error);
});
alert("codigo de barras: " + decodeText, decodeResult);
myqr.innerHTML = ` ${countResults} : ${decodeText} `;
}
}
var htmlscanner = new Html5QrcodeScanner(
"my-qr-reader",
{
fps: 10,
qrbox: 250
}
)
htmlscanner.render(onScanSuccess);
})
</script>
</body>
</html>