87 lines
2.6 KiB
JavaScript
87 lines
2.6 KiB
JavaScript
|
// key listener
|
||
|
|
document.addEventListener("keypress", function onEvent(event) {
|
||
|
|
if (event.key !== "Enter") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
startScan();
|
||
|
|
});
|
||
|
|
|
||
|
|
let scanInProgress = false;
|
||
|
|
|
||
|
|
// start a scan
|
||
|
|
function startScan() {
|
||
|
|
if (scanInProgress === true) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
scanInProgress = true;
|
||
|
|
let button = document.getElementById("button");
|
||
|
|
let buttonDefaultColor = button.style.backgroundColor;
|
||
|
|
button.style.backgroundColor = "#ffee00";
|
||
|
|
let buttonImg = document.getElementById("button-img");
|
||
|
|
let result = document.getElementById("result");
|
||
|
|
result.style.visibility = "hidden";
|
||
|
|
let text = document.getElementById("text");
|
||
|
|
let input = document.getElementById("input");
|
||
|
|
input.style.opacity = "0"
|
||
|
|
|
||
|
|
// start rotate animation
|
||
|
|
let rotate = true;
|
||
|
|
let rotationDegree = 0;
|
||
|
|
let rotationInterval = setInterval(() => {
|
||
|
|
rotationDegree = rotateElement(buttonImg, rotationInterval, rotationDegree, !rotate, "Y");
|
||
|
|
}, 5);
|
||
|
|
|
||
|
|
// call api
|
||
|
|
fetch('scan', {
|
||
|
|
method: 'post',
|
||
|
|
headers: {
|
||
|
|
"Content-type": "application/json"
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
filename: document.getElementById("input-filename").value
|
||
|
|
})
|
||
|
|
}).then(response => {
|
||
|
|
return response.json();
|
||
|
|
}).then(response => {
|
||
|
|
let buttonColor = "#008800";
|
||
|
|
result.style.visibility = "visible";
|
||
|
|
text.innerHTML = response.Message;
|
||
|
|
if (response.State !== "ok") {
|
||
|
|
text.style.color = "#ff0000";
|
||
|
|
buttonColor = "#880000";
|
||
|
|
text.innerHTML = "an error occured<br>" + text.innerHTML;
|
||
|
|
} else {
|
||
|
|
text.innerHTML = "scan finished<br>" + text.innerHTML;
|
||
|
|
}
|
||
|
|
text.style.opacity = "100";
|
||
|
|
button.style.backgroundColor = buttonColor;
|
||
|
|
rotate = false;
|
||
|
|
setTimeout(() => {
|
||
|
|
text.style.opacity = "0";
|
||
|
|
result.style.visibility = "hidden";
|
||
|
|
button.style.backgroundColor = buttonDefaultColor;
|
||
|
|
input.style.opacity = "100";
|
||
|
|
scanInProgress = false;
|
||
|
|
}, 5000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rotateElement(element, interval, degree, stop, direction) {
|
||
|
|
if (element === undefined || interval === undefined) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (degree === undefined) {
|
||
|
|
degree = 0;
|
||
|
|
}
|
||
|
|
if (stop === true && degree % 360 === 0) {
|
||
|
|
clearInterval(interval);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
degree++;
|
||
|
|
let value = "rotate";
|
||
|
|
if (direction !== undefined && (direction.toLowerCase() === "x" || direction.toLowerCase() === "y")) {
|
||
|
|
value += direction;
|
||
|
|
}
|
||
|
|
element.style.transform = value + "(" + degree + "deg)";
|
||
|
|
return degree;
|
||
|
|
}
|