- add edit button

2022-04-11 20:34:02 +02:00
parent 34a42822b2
commit 2d795b680b
5 changed files with 180 additions and 17 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,4 +3,7 @@ node_modules/
 *.sqllite
 testStuff/
 chache.bin
-key.cfg
+key.cfg
+database2.sqlite
+database.sqlite
+old.sqlite
--- a/database.sqlite
+++ b/database.sqlite
--- a/index.js
+++ b/index.js
@ -3,13 +3,12 @@ const Eta = require("eta");
 const fs = require("fs");
 const request = require("request");
 const imdb = require("imdb-api");
-const sqlite3 = require("sqlite3");
 const requestSync = require("sync-request");
 var Config = require('config-js');
 const app = express();
 const PrismaClient = require('@prisma/client').PrismaClient;
 const port = 4000;
-const eanConvAdress = "http://192.168.178.51:9999/"
+const eanConvAdress = "http://127.0.0.1:9999/"

 const typeIndex = {0: "Physical", 1: "Digital - Maxdome", 2: "Digital - Amazon Prime Video", 3: "Digital - DVR"}

@ -19,17 +18,6 @@ var responseBuffer = { allBufferd: [] };

 responseBuffer = JSON.parse(fs.readFileSync("chache.bin", "utf8"));

-var db = new sqlite3.Database("database.sqlite");
-if (!fs.existsSync("database.sqlite")) {
-  console.log("Creating table.");
-  db.serialize(() => {
-    db.run(initalTableSQL);
-    //db.run(initalTableSQL2);
-  });
-}
-db.close();
-var db = new sqlite3.Database("database.sqlite");
-
 var config = new Config('key.cfg');


@ -55,10 +43,13 @@ app.get("/add", function (req, res) {
 });

 app.get("/delete", function (req, res) {
+  console.log(req.query.id)
  prisma.movieInfo.delete({
    where: {
-      movieID: req.query.id
+      id: parseInt(req.query.id)
    }
+  }).then(function handleFinishDelete(result) {
+    console.log(result)
  })
  console.log("Deleted entries")
  res.send("Done.");
@ -99,6 +90,41 @@ app.get("/showDetails", async function (req, res) {
  )
 });

+app.get("/editDetails", async function (req, res) {
+  const data = fs.readFileSync("template/editDetails.html", "utf8");
+  console.log(req.query["id"])
+  const movie = await prisma.movieInfo.findFirst({
+    where: {
+      movieID: req.query["id"]
+    }
+  })
+  res.send(
+    Eta.render(data, {
+      internalID: movie.id,
+      id: movie.movieID,
+      cover: movie.posterUrl,
+      titleByAPI: movie.movieTitel,
+      type: typeIndex[movie.type],
+      typeId: movie.type
+    })
+  )
+});
+
+app.get("/api/edit", function handleEdit(req, res){
+  console.log(req.query)
+  prisma.movieInfo.update({
+    where: {
+      id: parseInt(req.query["id"])
+    },
+    data: {
+      type: parseInt(req.query["type"])
+    }
+  }).then(function handleFinishEdit(result) {
+    console.log(result)
+  })
+  res.send("Done.");
+})
+
 app.get("/apiCallBack", function (req, res) {
  //console.log(req.query);
  if (!responseBuffer.allBufferd.includes(req.query["ean"])) {
@ -166,6 +192,7 @@ app.get("/apiCallBack", function (req, res) {
  }
 });

+
 app.get("/save", async function handleSave(req, res) {
  responseJson = responseBuffer[req.query["reponseID"]];
  const type = parseInt(req.query["type"]) || 0;
@ -184,6 +211,8 @@ app.get("/save", async function handleSave(req, res) {
        type: type,
        posterUrl: responseJson.coverImage
      }
+    }).then(function handleFinishCreate(result) {
+      console.log(result)
    })
    res.send({ status: "OK" });
  }else{
--- a/template/editDetails.html
+++ b/template/editDetails.html
@ -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>
--- a/template/movieDetails.html
+++ b/template/movieDetails.html
@ -93,8 +93,9 @@
            <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>Art: </b> <%= it.type %></center>
-            </div>
+                <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>
@ -111,6 +112,11 @@
        document.getElementById("overlay2").style.display = "none";
      }

+      function handleEdit(){
+        console.log("Editing movie")
+        window.location.href = '/editDetails?id=<%= it.id %>';
+      }
+
      function sureDelete(){
        console.log("Deleting movie")
        url = "/delete?id=<%= it.internalID %>";