349 lines
13 KiB
HTML
349 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Basic Page Needs
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8" />
|
||
<title>OpenMovieDB - Bookshelf</title>
|
||
<meta name="description" content="OpenMovieDB - Bookshelf" />
|
||
<meta name="author" content="TheGreydiamond" />
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- FONT
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link
|
||
href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
|
||
rel="stylesheet"
|
||
type="text/css"
|
||
/>
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/normalize.css" />
|
||
<link rel="stylesheet" href="css/skeleton.css" />
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
|
||
<script src="/darkreader/darkreader.js"> </script>
|
||
<style>
|
||
.switch {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 60px;
|
||
height: 34px;
|
||
}
|
||
|
||
.switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.slider {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #ccc;
|
||
-webkit-transition: .4s;
|
||
transition: .4s;
|
||
}
|
||
|
||
.slider:before {
|
||
position: absolute;
|
||
content: "";
|
||
height: 26px;
|
||
width: 26px;
|
||
left: 4px;
|
||
bottom: 4px;
|
||
background-color: white;
|
||
-webkit-transition: .4s;
|
||
transition: .4s;
|
||
}
|
||
|
||
input:checked + .slider {
|
||
background-color: #2196F3;
|
||
}
|
||
|
||
input:focus + .slider {
|
||
box-shadow: 0 0 1px #2196F3;
|
||
}
|
||
|
||
input:checked + .slider:before {
|
||
-webkit-transform: translateX(26px);
|
||
-ms-transform: translateX(26px);
|
||
transform: translateX(26px);
|
||
}
|
||
|
||
/* Rounded sliders */
|
||
.slider.round {
|
||
border-radius: 34px;
|
||
}
|
||
|
||
.slider.round:before {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
iconContainer {
|
||
padding: 4px;
|
||
font-size: 1.5em;
|
||
}
|
||
</style>
|
||
<style>
|
||
|
||
/* In order to place the tracking correctly */
|
||
canvas.drawing, canvas.drawingBuffer {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
/* Style the button that is used to open and close the collapsible content */
|
||
.collapsible {
|
||
background-color: #eee;
|
||
color: #444;
|
||
cursor: pointer;
|
||
/*padding: 18px;*/
|
||
/*width: 100%;*/
|
||
border: none;
|
||
/*text-align: left;*/
|
||
outline: none;
|
||
font-size: 15px;
|
||
}
|
||
|
||
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
|
||
.active, .collapsible:hover {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
/* Style the collapsible content. Note: hidden by default */
|
||
.content {
|
||
padding: 0 18px;
|
||
display: none;
|
||
overflow: hidden;
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/favicon.png" />
|
||
<script src="https://kit.fontawesome.com/d7b80a780b.js" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="one-half column" style="margin-top: 15%" id="mainCont">
|
||
<h4>OpenMovieDB - Add a new movie</h4>
|
||
<!-- Div to show the scanner -->
|
||
<% if(it.isDisplay == true) { %>
|
||
<%= it.titleByAPI %><br>
|
||
<%= it.id %><br>
|
||
<img src="<%= it.cover %>" alt="Cover image" style="height: 200px;"></img><br>
|
||
<button onclick="saveToLibary()"> Add to libary</button>
|
||
<% } else{ %>
|
||
<div id="scanner-container"></div>
|
||
<input type="button" id="btn" value="Start/Stop the scanner" />
|
||
<div id="currentEAN">EAN: Waiting for valid EAN...</div><br>
|
||
<button onclick="window.location.href = '/addByTitle'"><i class="fas fa-radar"></i> Search by title</button>
|
||
<button onclick="sendEanConvRequest()" disabled id="searchBtn"> <i class="fas fa-search"></i>Search</button>
|
||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||
<button type="button" class="collapsible">Manual input</button>
|
||
<div class="content">
|
||
<input type="number" placeholder="EAN" max=9999999999999 min=1000000000000 id="manEAN">
|
||
</div><br>
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Include the image-diff library -->
|
||
<script>
|
||
DarkReader.auto()
|
||
$("#darkToggle").on("change", function(test){
|
||
if(test.currentTarget.checked){
|
||
DarkReader.enable()
|
||
} else {
|
||
DarkReader.disable()
|
||
}
|
||
})
|
||
</script>
|
||
<script>
|
||
|
||
var coll = document.getElementsByClassName("collapsible");
|
||
var i;
|
||
|
||
for (i = 0; i < coll.length; i++) {
|
||
coll[i].addEventListener("click", function() {
|
||
this.classList.toggle("active");
|
||
var content = this.nextElementSibling;
|
||
if (content.style.display === "block") {
|
||
content.style.display = "none";
|
||
} else {
|
||
content.style.display = "block";
|
||
}
|
||
});
|
||
}
|
||
|
||
setTimeout(function(){
|
||
document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
|
||
document.getElementById("searchBtn").style.backgroundColor = "rgba(10, 10, 10, 0.5);"
|
||
}, 20)
|
||
|
||
var _scannerIsRunning = false;
|
||
|
||
function startScanner() {
|
||
Quagga.init({
|
||
inputStream: {
|
||
name: "Live",
|
||
type: "LiveStream",
|
||
target: document.querySelector('#scanner-container'),
|
||
constraints: {
|
||
width: 480,
|
||
height: 320,
|
||
facingMode: "environment"
|
||
},
|
||
},
|
||
decoder: {
|
||
readers: [
|
||
"code_128_reader",
|
||
"ean_reader",
|
||
"ean_8_reader",
|
||
"code_39_reader",
|
||
"code_39_vin_reader",
|
||
"codabar_reader",
|
||
"upc_reader",
|
||
"upc_e_reader",
|
||
"i2of5_reader"
|
||
],
|
||
debug: {
|
||
showCanvas: false,
|
||
showPatches: false,
|
||
showFoundPatches: false,
|
||
showSkeleton: false,
|
||
showLabels: false,
|
||
showPatchLabels: false,
|
||
showRemainingPatchLabels: false,
|
||
boxFromPatches: {
|
||
showTransformed: false,
|
||
showTransformedBox: false,
|
||
showBB: false
|
||
}
|
||
}
|
||
},
|
||
|
||
}, function (err) {
|
||
if (err) {
|
||
console.log(err);
|
||
return
|
||
}
|
||
|
||
console.log("Initialization finished. Ready to start");
|
||
Quagga.start();
|
||
|
||
// Set flag to is running
|
||
_scannerIsRunning = true;
|
||
});
|
||
|
||
/*Quagga.onProcessed(function (result) {
|
||
//var drawingCtx = Quagga.canvas.ctx.overlay,
|
||
//drawingCanvas = Quagga.canvas.dom.overlay;
|
||
|
||
/*if (result) {
|
||
if (result.boxes) {
|
||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||
result.boxes.filter(function (box) {
|
||
return box !== result.box;
|
||
}).forEach(function (box) {
|
||
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
|
||
});
|
||
}
|
||
|
||
if (result.box) {
|
||
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
|
||
}
|
||
|
||
if (result.codeResult && result.codeResult.code) {
|
||
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
|
||
}
|
||
}
|
||
});*/
|
||
|
||
|
||
Quagga.onDetected(function (result) {
|
||
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
|
||
if(String(result.codeResult.code).length == 13){
|
||
document.getElementById("currentEAN").innerHTML = "EAN: " + result.codeResult.code
|
||
console.log(result.codeResult.code)
|
||
document.getElementById("searchBtn").style.backgroundColor = "color: #555;"
|
||
document.getElementById("searchBtn").disabled = false;
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
|
||
// Start/stop scanner
|
||
document.getElementById("btn").addEventListener("click", function () {
|
||
if (_scannerIsRunning) {
|
||
document.getElementById("btn").style.backgroundColor = "rgba(255, 0, 0, 0.5)";
|
||
Quagga.stop();
|
||
} else {
|
||
document.getElementById("btn").style.backgroundColor = "rgba(0, 255, 0, 0.5)";
|
||
startScanner();
|
||
}
|
||
}, false);
|
||
|
||
setInterval(function(){
|
||
if(document.getElementById("manEAN").value != ""){
|
||
document.getElementById("searchBtn").style.backgroundColor = "color: #555;"
|
||
document.getElementById("searchBtn").disabled = false;
|
||
}
|
||
}, 200)
|
||
|
||
function sendEanConvRequest(){
|
||
curEan = document.getElementById("currentEAN").innerHTML
|
||
curEan = curEan.replace("EAN: ", "")
|
||
if(curEan == "Waiting for valid EAN..."){
|
||
curEan = document.getElementById("manEAN").value
|
||
}
|
||
console.log(curEan)
|
||
document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><div class=\"lds-grid\"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><br><i>Searching database...</i></center>";
|
||
/*if(curEan[0] == "0"){
|
||
curEan = curEan.substring(1);
|
||
}*/
|
||
curEan = String(curEan-0)
|
||
console.warn(curEan)
|
||
url = "/apiCallBack?ean=" + curEan;
|
||
//window.open(url)
|
||
$.get(url,function(data,status) {
|
||
var respon = JSON.parse(data)
|
||
if(respon.state == "OK"){
|
||
url = "/returnSaveResult?reponseID=" + respon.reponseID;
|
||
window.location.href = url
|
||
}else{
|
||
// alert("An error with the api occured.")
|
||
document.getElementById("mainCont").innerHTML = "<h4>OpenMovieDB - Add a new movie</h4><center><i style='color: #cc0000; font-size: 100px;' class=\"fas fa-exclamation-circle\"></i><br>Ohno, the API returned an error. Errorcode: <br> <code>" + respon.state + "</code><br><br><button onclick=\"window.location.href = '/'\"><i class=\"fas fa-home\"></i> Back to home</button></center>"
|
||
}
|
||
console.log(data);
|
||
},'html');
|
||
//alert(curEan)
|
||
}
|
||
|
||
function saveToLibary(){
|
||
url = "/save?ean=<%= it.ean %>";
|
||
|
||
$.get(url,function(data,status) { console.log(data); console.log(status) },'html');
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |