165 lines
4.5 KiB
HTML
165 lines
4.5 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>go-scan</title>
|
||
|
|
<style>
|
||
|
|
#content {
|
||
|
|
position: absolute;
|
||
|
|
top: 33%;
|
||
|
|
left: 50%;
|
||
|
|
margin-right: -50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
height: 50%;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#text {
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#result {
|
||
|
|
margin-top: 5%;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.5em;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#button {
|
||
|
|
background-color: #6e6e6e;
|
||
|
|
margin: auto;
|
||
|
|
width: fit-content;
|
||
|
|
height: fit-content;
|
||
|
|
border: none;
|
||
|
|
border-radius: 100%;
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#button:hover {
|
||
|
|
background-color: #4e4e4e;
|
||
|
|
}
|
||
|
|
|
||
|
|
#button-img {
|
||
|
|
min-width: 96px;
|
||
|
|
min-height: 96px;
|
||
|
|
width: 25vh;
|
||
|
|
height: 25vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
#input {
|
||
|
|
margin-top: 5%;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#input-label {
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin-right: 5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
color: #e1e1e1;
|
||
|
|
background-color: #1e1e1e;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 5rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="content">
|
||
|
|
<div id="heading">
|
||
|
|
<h1>go-scan</h1>
|
||
|
|
</div>
|
||
|
|
<div id="button" onclick="startScan()">
|
||
|
|
<img id="button-img" src="https://cdn2.iconfinder.com/data/icons/usability-test/100/jan_yulck-26-512.png">
|
||
|
|
</div>
|
||
|
|
<div id="input">
|
||
|
|
<span id="input-label">filename:</span>
|
||
|
|
<input id="input-filename" type="text">
|
||
|
|
</div>
|
||
|
|
<div id="result">
|
||
|
|
<span id="text"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function startScan() {
|
||
|
|
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 = "scan finished<br>" + response.Message;
|
||
|
|
if (response.State !== "ok") {
|
||
|
|
text.style.color = "#ff0000";
|
||
|
|
buttonColor = "#880000";
|
||
|
|
text.innerHTML = "an error occured<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";
|
||
|
|
}, 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;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|