From 4f108419cdffd3c809d5f09407510fff617e64d3 Mon Sep 17 00:00:00 2001
From: maxluli <moi@MonPc.localdomain>
Date: Tue, 4 Oct 2022 08:54:16 +0200
Subject: [PATCH] You can now delete the liked pokemons

---
 assets/JsStuff/toolbox.js |  0
 likes.html                | 71 +++++++++++++++++++++++++++++++++------
 2 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 assets/JsStuff/toolbox.js

diff --git a/assets/JsStuff/toolbox.js b/assets/JsStuff/toolbox.js
new file mode 100644
index 0000000..e69de29
diff --git a/likes.html b/likes.html
index 2b7e76c..e6e7ed8 100644
--- a/likes.html
+++ b/likes.html
@@ -38,40 +38,89 @@
 
     <div class="row fixed-bottom">
         <div class="btn col-4 btn-light">
-            <a href="likes.html" style="text-decoration:none;color:black"><h3>Liked</h3></a>
+            <a href="likes.html" style="text-decoration:none;color:black">
+                <h3>Liked</h3>
+            </a>
         </div>
         <div class="btn col-4 btn-light">
-            <a href="index.html" style="text-decoration:none;color:black"><h3>Home</h3></a>
+            <a href="index.html" style="text-decoration:none;color:black">
+                <h3>Home</h3>
+            </a>
         </div>
         <div class="btn col-4 btn-light">
-            <a href="favorites.html" style="text-decoration:none;color:black"><h3>Favorites</h3></a>
+            <a href="favorites.html" style="text-decoration:none;color:black">
+                <h3>Favorites</h3>
+            </a>
         </div>
     </div>
 </body>
 <script>
+    var dbRequest;
+
     document.getElementById("main").onload = function () {
+        loadData();
+    }
+    function loadData(){
         loadFromIndexedDB("likes", 0).then((response) => {
+            var container = document.getElementById("cards");
+            container.innerHTML = "";
             response.forEach(function (item) {
                 var html = "";
                 html += "<div class='container' style='margin-bottom:2vh;'>";
                 html += "<div class='card'>";
                 html += "<div class='row'>";
-                html += "<img src='"+item.pp+"' class='card-img-left col-8' alt='...'>";
+                html += "<img src='" + item.pp + "' class='card-img-left col-8' alt='...'>";
                 html += "<div class='container col-4'>";
-                html += "<h3 class='card-text'>"+item.name+" "+item.age+"</h3>";
-                html += "<p>"+((item.description).slice(0,40)+"...")+"</p>";
-                html += "<button class='btn btn-danger' style='width:100%'>X</button>";    
-                html += "</div>";   
+                html += "<h3 class='card-text'>" + item.name + " " + item.age + "</h3>";
+                html += "<p>" + ((item.description).slice(0, 40) + "...") + "</p>";
+                html += "<button class='btn btn-danger' id='" + item.id + "' style='width:100%'>X</button>";
+                html += "</div>";
                 html += "</div>";
-                var container = document.getElementById("cards");
                 container.innerHTML += html;
+                //var buttons = document.getElementsByClassName("btn-danger");
+            });
+            var buttons = container.querySelectorAll('.btn');
+            buttons.forEach(function (item) {
+                item.onclick = buttonClicked;
             });
         });
     }
+    function buttonClicked(evt) {
+        //alert("bonsoir " + evt.target.id);
+        let id = evt.target.id;
+        removeFromIndexDB("likes", id);
+        loadData();
+    }
+    function removeFromIndexDB(storename, key) {
+        dbRequest = indexedDB.open(storename);
+
+        dbRequest.onerror = function (event) {
+            reject(Error("Error text"));
+        };
+
+        dbRequest.onupgradeneeded = function (event) {
+            // Objectstore does not exist. Nothing to load
+            event.target.transaction.abort();
+            reject(Error('Not found'));
+        };
+
+        dbRequest.onsuccess = function (event) {
+            var database = event.target.result;
+
+            const request = database.transaction(storename, 'readwrite')
+                .objectStore(storename).delete(key);
+            request.onsuccess = () => {
+                console.log(`object deleted : ${request.result}`);
+            }
+            request.onerror = (err) => {
+                console.error(`Error to delete object: ${err}`)
+            }
+        }
+    }
     function loadFromIndexedDB(storeName) {
         return new Promise(
             function (resolve, reject) {
-                var dbRequest = indexedDB.open(storeName);
+                dbRequest = indexedDB.open(storeName);
 
                 dbRequest.onerror = function (event) {
                     reject(Error("Error text"));
@@ -107,6 +156,6 @@
             }
         );
     }
-
 </script>
+
 </html>
\ No newline at end of file