grey/openMovieBookshelf
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

- add edit button

Browse Source
This commit is contained in:
Sören Oesterwind
2022-04-11 20:34:02 +02:00
parent 34a42822b2
commit 2d795b680b
5 changed files with 180 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
template/editDetails.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8" />
<title>OpenMovieDB - Bookshelf - Edit</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>
#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%);
}
</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 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 class="container">
<div class="row">
<div class="one-half column" style="margin-top: 10%" id="mainCont">
<h4>OpenMovieDB - Edit a movie</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> <select id="type" name="type">
<option value="0">Physical</option>
<option value="1">Digital - Maxdome</option>
<option value="2">Digital - Amazon Prime Video</option>
<option value="3">Digital - DVR</option>
</select>
</center>
</div>
<button onclick="handleSave()" id="saveBtn"><i class="fas fa-save"></i> Save</button>
<button onclick="window.location.href = '/'"><i class="fas fa-home"></i> Back to home</button>
</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 handleSave(){
url = "/api/edit?id=<%= it.internalID %>&type=" + document.getElementById("type").value;
$.get(url, function(data,status) { console.log(data); console.log(status); on(); },'html');
}
const selction = document.getElementById("type");
const type = parseInt("<%= it.typeId %>")
selction.options[type].selected = true;
console.log(type)
</script>
</body>
</html>