search by title function added
This commit is contained in:
@@ -84,7 +84,8 @@
|
||||
<% } 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>
|
||||
<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>
|
||||
|
||||
151
template/addByTitle.html
Normal file
151
template/addByTitle.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!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" />
|
||||
<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 (by title)</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 { %>
|
||||
<input type="text" placeholder="Movie title" id="movieTitle">
|
||||
|
||||
<button onclick="sendEanConvRequest()" id="searchBtn"> <i class="fas fa-search"></i>Search</button><br>
|
||||
<button onclick="window.location.href = '/add'"><i class="fas fa-radar"></i> Search by EAN</button>
|
||||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Include the image-diff library -->
|
||||
|
||||
<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)
|
||||
|
||||
|
||||
|
||||
function sendEanConvRequest(){
|
||||
const curTitle = document.getElementById("movieTitle").value;
|
||||
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);
|
||||
}*/
|
||||
console.warn(curTitle)
|
||||
url = "/apiCallBackTitle?title=" + curTitle;
|
||||
//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 = "/saveTitle?title=<%= it.ean %>";
|
||||
|
||||
$.get(url,function(data,status) { console.log(data); console.log(status) },'html');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,133 +1,238 @@
|
||||
<!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
|
||||
<head>
|
||||
<!-- Basic Page Needs
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charset="utf-8" />
|
||||
<title>OpenMovieDB - Bookshelf</title>
|
||||
<meta name="description" content="OpenMovieDB - Bookshelf" />
|
||||
<meta name="author" content="TheGreydiamond" />
|
||||
|
||||
<!-- FONT
|
||||
<!-- Mobile Specific Metas
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link
|
||||
href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- CSS
|
||||
<!-- FONT
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="stylesheet" href="css/normalize.css" />
|
||||
<link rel="stylesheet" href="css/skeleton.css" />
|
||||
<style>
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css" />
|
||||
|
||||
#overlay2 {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#text{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
transform: translate(-50%,-50%);
|
||||
-ms-transform: translate(-50%,-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Favicon
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<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>
|
||||
<link rel="stylesheet" href="css/normalize.css" />
|
||||
<link rel="stylesheet" href="css/skeleton.css" />
|
||||
<style>
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#overlay2 {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none
|
||||
}
|
||||
|
||||
summary:after {
|
||||
border-radius: 5px;
|
||||
content: "+";
|
||||
color: #fff;
|
||||
float: left;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin: -5px 10px 0 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
details[open] summary:after {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
details {
|
||||
background-color: rgba(65, 65, 65, 0.39);
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
</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>
|
||||
<div id="overlay" onclick="off()">
|
||||
<div id="text"><svg class='checkmark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'><circle class='checkmark__circle ' cx='26' cy='26' r='25' fill='none'/><path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8'/></svg><style>.checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}.checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;}.checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}@keyframes stroke { 100% { stroke-dashoffset: 0; }}@keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); }}@keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142; }}</style></div>
|
||||
</div>
|
||||
|
||||
<div id="overlay2" onclick="off()">
|
||||
<div id="text">Do you really want to remove this movie?<br>
|
||||
<button onclick="sureDelete()" style="background-color: rgba(174, 255, 128, 0.699)"><i class="fas fa-trash"></i> Yes</button>
|
||||
<button onclick="off()" style="background-color: rgba(255, 95, 95, 0.719)"><i class="fas fa-times"></i> No</button>
|
||||
|
||||
<body>
|
||||
<div id="overlay" onclick="off()">
|
||||
<div id="text"><svg class='checkmark' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'>
|
||||
<circle class='checkmark__circle ' cx='26' cy='26' r='25' fill='none' />
|
||||
<path class='checkmark__check' fill='none' d='M14.1 27.2l7.1 7.2 16.7-16.8' />
|
||||
</svg>
|
||||
<style>
|
||||
.checkmark__circle {
|
||||
stroke-dasharray: 166;
|
||||
stroke-dashoffset: 166;
|
||||
stroke-width: 2;
|
||||
stroke-miterlimit: 10;
|
||||
stroke: #7ac142;
|
||||
fill: none;
|
||||
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
stroke-width: 2;
|
||||
stroke: #fff;
|
||||
stroke-miterlimit: 10;
|
||||
margin: 10% auto;
|
||||
box-shadow: inset 0px 0px 0px #7ac142;
|
||||
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
||||
}
|
||||
|
||||
.checkmark__check {
|
||||
transform-origin: 50% 50%;
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes stroke {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fill {
|
||||
100% {
|
||||
box-shadow: inset 0px 0px 0px 30px #7ac142;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="overlay2" onclick="off()">
|
||||
<div id="text">Do you really want to remove this movie?<br>
|
||||
<button onclick="sureDelete()" style="background-color: rgba(174, 255, 128, 0.699)"><i class="fas fa-trash"></i>
|
||||
Yes</button>
|
||||
<button onclick="off()" style="background-color: rgba(255, 95, 95, 0.719)"><i class="fas fa-times"></i>
|
||||
No</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="one-half column" style="margin-top: 10%" id="mainCont">
|
||||
<h4>OpenMovieDB - Moviedetails</h4>
|
||||
<div style="width: 300px;">
|
||||
<img src="<%= it.cover %>" alt="Cover image" style="width: 100%;"></img><br>
|
||||
<center><%= it.titleByAPI %><br><i><%= it.id %></i><br>
|
||||
<b>Type: </b> <%= it.type %></center>
|
||||
</div><br>
|
||||
<button onclick="handleEdit()" id="editBtn"><i class="fas fa-pen"></i> Edit</button>
|
||||
<button onclick="handelDelete()" id="delBtn"><i class="fas fa-trash"></i> Delete</button>
|
||||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="one-half column" style="margin-top: 10%" id="mainCont">
|
||||
<h4>OpenMovieDB - Moviedetails</h4>
|
||||
<div style="width: 300px;">
|
||||
<img src="<%= it.cover %>" alt="Cover image" style="width: 100%;"></img><br>
|
||||
<center>
|
||||
<%= it.titleByAPI %><br><i>
|
||||
<%= it.id %>
|
||||
</i><br>
|
||||
</center>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Details
|
||||
</summary><br>
|
||||
<p>
|
||||
Year: <%= it.extendedData.year %>
|
||||
<br>
|
||||
Starring: <%= it.extendedData.starring %>
|
||||
</p>
|
||||
</details>
|
||||
<br>
|
||||
|
||||
<b>Type: </b>
|
||||
<%= it.type %>
|
||||
|
||||
</div><br>
|
||||
<button onclick="handleEdit()" id="editBtn"><i class="fas fa-pen"></i> Edit</button>
|
||||
<button onclick="handelDelete()" id="delBtn"><i class="fas fa-trash"></i> Delete</button>
|
||||
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function on() {
|
||||
document.getElementById("overlay").style.display = "block";
|
||||
}
|
||||
|
||||
|
||||
function off() {
|
||||
document.getElementById("overlay").style.display = "none";
|
||||
document.getElementById("overlay2").style.display = "none";
|
||||
}
|
||||
|
||||
function handleEdit(){
|
||||
function handleEdit() {
|
||||
console.log("Editing movie")
|
||||
window.location.href = '/editDetails?id=<%= it.id %>';
|
||||
}
|
||||
|
||||
function sureDelete(){
|
||||
function sureDelete() {
|
||||
console.log("Deleting movie")
|
||||
url = "/delete?id=<%= it.internalID %>";
|
||||
document.getElementById("delBtn").remove();
|
||||
$.get(url,function(data,status) { console.log(data); console.log(status); on(); setTimeout(function(){window.location.href = '/';}, 1000); },'html');
|
||||
$.get(url, function (data, status) { console.log(data); console.log(status); on(); setTimeout(function () { window.location.href = '/'; }, 1000); }, 'html');
|
||||
}
|
||||
|
||||
function handelDelete(){
|
||||
function handelDelete() {
|
||||
document.getElementById("overlay2").style.display = "block";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user