Added delete function to like AND favorites

assets/JsStuff/toolbox.js

@@ -0,0 +1,65 @@
+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) {
+            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;
+                var transaction = database.transaction([storeName]);
+                var objectStore = transaction.objectStore(storeName);
+                var objectRequest = objectStore.getAll();
+
+                objectRequest.onerror = function (event) {
+                    reject(Error('Error text'));
+                    console.log("Error with the indexdb");
+                };
+
+                objectRequest.onsuccess = function (event) {
+                    if (objectRequest.result) {
+                        resolve(objectRequest.result);
+                    }
+                    else {
+                        reject(Error('object not found'));
+                        console.log("object not found");
+                    }
+                };
+            };
+        }
+    );
+}

favorites.html

@@ -51,12 +51,17 @@
         </div>
     </div>
 </body>
+<script src="./assets/JsStuff/toolbox.js">
+</script>
 <script>
     document.getElementById("main").onload = function () {
+        loadData();
+    }
+    function loadData() {
         loadFromIndexedDB("favorites", 0).then((response) => {
-            //console.log(response);
+            var container = document.getElementById("cards");
+            container.innerHTML = "";
             response.forEach(function (item) {
-                //console.log(item.name);
                 var html = "";
                 html += "<div class='container' style='margin-bottom:2vh;'>";
                 html += "<div class='card'>";
@@ -65,55 +70,22 @@
                 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 += "<button class='btn btn-danger' id='" + item.id + "' style='width:100%'>X</button>";
                 html += "</div>";
                 html += "</div>";
-                //console.log(html);
-                var container = document.getElementById("cards");
                 container.innerHTML += html;
-
+            });
+            var buttons = container.querySelectorAll('.btn');
+            buttons.forEach(function (item) {
+                item.onclick = buttonClicked;
             });
         });
     }
-
+    function buttonClicked(evt) {
-    function loadFromIndexedDB(storeName) {
+        //alert("bonsoir " + evt.target.id);
-        return new Promise(
+        let id = evt.target.id;
-            function (resolve, reject) {
+        removeFromIndexDB("favorites", id);
-                var dbRequest = indexedDB.open(storeName);
+        loadData();
-
-                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;
-                    var transaction = database.transaction([storeName]);
-                    var objectStore = transaction.objectStore(storeName);
-                    var objectRequest = objectStore.getAll();
-
-                    objectRequest.onerror = function (event) {
-                        reject(Error('Error text'));
-                        console.log("Error with the indexdb");
-                    };
-
-                    objectRequest.onsuccess = function (event) {
-                        if (objectRequest.result) {
-                            resolve(objectRequest.result);
-                        }
-                        else {
-                            reject(Error('object not found'));
-                            console.log("object not found");
-                        }
-                    };
-                };
-            }
-        );
     }
 
 </script>

likes.html

@@ -54,9 +54,10 @@
         </div>
     </div>
 </body>
+<script src="./assets/JsStuff/toolbox.js">
+</script>
 <script>
     var dbRequest;
-
     document.getElementById("main").onload = function () {
         loadData();
     }
@@ -91,71 +92,6 @@
         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) {
-                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;
-                    var transaction = database.transaction([storeName]);
-                    var objectStore = transaction.objectStore(storeName);
-                    var objectRequest = objectStore.getAll();
-
-                    objectRequest.onerror = function (event) {
-                        reject(Error('Error text'));
-                        console.log("Error with the indexdb");
-                    };
-
-                    objectRequest.onsuccess = function (event) {
-                        if (objectRequest.result) {
-                            resolve(objectRequest.result);
-                        }
-                        else {
-                            reject(Error('object not found'));
-                            console.log("object not found");
-                        }
-                    };
-                };
-            }
-        );
-    }
 </script>
 
 </html>