From a8b781cb4443ed4cc3b48c07461996b157320059 Mon Sep 17 00:00:00 2001
From: maxluli <moi@MonPc.localdomain>
Date: Tue, 27 Sep 2022 10:26:43 +0200
Subject: [PATCH] Added indexDb support

---
 favorites.html | 133 +++++++++++++++++++++++++++++++------------------
 index.html     |  82 ++++++++++++++++++++++++++----
 likes.html     | 106 +++++++++++++++++++++++----------------
 3 files changed, 219 insertions(+), 102 deletions(-)
diff --git a/favorites.html b/favorites.html
index 2a99eb5..0767c9b 100644
--- a/favorites.html
+++ b/favorites.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -19,66 +20,102 @@
     <title>Tinder Pokemon</title>
     <link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
 </head>
-<body>
+
+<body id="main">
     <div class="d-grid gap-2 text-center">
-        <div class=""><h1>Tinder for weird furries</h1></div>
-        <div class=""><h2>Favorites</h2></div>
-    </div>
-
-    <p>Somebody will have to display the favorites or something here</p>
-
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
+        <div class="">
+            <h1>Tinder for weird furries</h1>
+        </div>
+        <div class="">
+            <h2>Favorites</h2>
         </div>
     </div>
+    <div id="cards">
 
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
-        </div>
     </div>
-
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
-        </div>
-    </div>
-
     <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>
+    document.getElementById("main").onload = function () {
+        loadFromIndexedDB("favorites", 0).then((response) => {
+            //console.log(response);
+            response.forEach(function (item) {
+                //console.log(item.name);
+                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 += "<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 += "</div>";
+                //console.log(html);
+                var container = document.getElementById("cards");
+                container.innerHTML += html;
+
+            });
+        });
+    }
+
+    function loadFromIndexedDB(storeName) {
+        return new Promise(
+            function (resolve, reject) {
+                var 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>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7f63eaf..8dc8a1d 100644
--- a/index.html
+++ b/index.html
@@ -91,7 +91,13 @@
 </body>
 <script>
     "use strict";
+    var CurrentPokemon = new Object();
+    var LoadedSuccessfully = false;
+
     document.getElementById('main').onload = function () {
+        loadNewPokemon();
+    }
+    function loadNewPokemon(){
         //We will need to load an image from the pokeAPI with his description and a random name/age
         fetch("https://pokeapi.co/api/v2/pokemon/" + Math.floor(Math.random() * 905))
             .then((response) => {
@@ -106,13 +112,22 @@
                                                 response.json()
                                                     .then((pokemonInfo) => {
                                                         console.log(pokemonData.id);
+                                                        LoadedSuccessfully = true;
+                                                        var age = (Math.floor(Math.random() * (65 - 18)) + 18);
+
+                                                        CurrentPokemon.name = randomName[0].name;
+                                                        CurrentPokemon.id = uniqid();
+                                                        CurrentPokemon.pokemonId = pokemonData.id;
+                                                        CurrentPokemon.pp = pokemonData.sprites.front_shiny;
+                                                        CurrentPokemon.age = age;
+                                                        CurrentPokemon.description = pokemonInfo.flavor_text_entries[0].flavor_text;
+
                                                         document.getElementById("pokemonName").innerHTML = randomName[0].name;
                                                         document.getElementById("pokemonImage").src = pokemonData.sprites.front_shiny;
-                                                        document.getElementById("pokemonAge").innerHTML = (Math.floor(Math.random() * (65 - 18)) + 18);
+                                                        document.getElementById("pokemonAge").innerHTML = age;
                                                         document.getElementById("pokemonDescription").innerHTML = pokemonInfo.flavor_text_entries[0].flavor_text;
 
                                                         window.navigator.geolocation.getCurrentPosition(function (pos) {
-                                                            console.log(pos);
                                                             var lat = pos.coords.latitude;
                                                             var lon = pos.coords.longitude;
 
@@ -122,6 +137,7 @@
                                                             let dist = distance(lon, lat, pokemonLongitude, pokemonLatitude);
                                                             document.getElementById("pokemonDistance").innerHTML = Math.floor(dist) + " Km away";
                                                         })
+
                                                     })
                                             }).catch((response) => {
                                                 alert("Bouhouuuuu could not get any further infos on that dumbass");
@@ -143,15 +159,23 @@
             })
     }
     document.getElementById('likeButton').onclick = function () {
-        alert("You want to like");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("likes",CurrentPokemon);
+            loadNewPokemon();
+        }
     };
     document.getElementById('nopeButton').onclick = function () {
-        alert("You want to nope");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("nopes",CurrentPokemon);
+            loadNewPokemon();
+        }
     }
     document.getElementById('favoriteButton').onclick = function () {
-        alert("You want to fav");
+        if(LoadedSuccessfully){
+            saveToIndexedDB("favorites",CurrentPokemon);
+            loadNewPokemon();
+        }
     }
-
     // !! THIS METHOD IS NOT MINE, ITS FROM STACK OVERFLOW : https://stackoverflow.com/questions/13840516/how-to-find-my-distance-to-a-known-location-in-javascript
     function distance(lon1, lat1, lon2, lat2) {
         var R = 6371; // Radius of the earth in km
@@ -173,11 +197,49 @@
     }
 
     window.navigator.geolocation.getCurrentPosition(function (pos) {
-        console.log(pos);
-        console.log(
-            distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
-        );
+        //console.log(pos);
+        //console.log(
+            //distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
+        //);
     });
+
+    // THIS FUNCTION IS ALSO NOT MINE AND ITS FROM STACK OVERFLOW TOO : https://stackoverflow.com/questions/4872380/uniqid-in-javascript-jquery
+    function uniqid(prefix = "", random = false) {
+        const sec = Date.now() * 1000 + Math.random() * 1000;
+        const id = sec.toString(16).replace(/\./g, "").padEnd(14, "0");
+        return `${prefix}${id}${random ? `.${Math.trunc(Math.random() * 100000000)}` : ""}`;
+    };
+
+    //Wow again, not my function almost seems like I did nothing in that code
+    function saveToIndexedDB(storeName, object) {
+        return new Promise(
+            function (resolve, reject) {
+                if (object.id === undefined) reject(Error('object has no id.'));
+                var dbRequest = indexedDB.open(storeName);
+                dbRequest.onerror = function (event) {
+                    reject(Error("IndexedDB database error"));
+                };
+                dbRequest.onupgradeneeded = function (event) {
+                    var database = event.target.result;
+                    var objectStore = database.createObjectStore(storeName, { keyPath: "id" });
+                };
+                dbRequest.onsuccess = function (event) {
+                    var database = event.target.result;
+                    var transaction = database.transaction([storeName], 'readwrite');
+                    var objectStore = transaction.objectStore(storeName);
+                    var objectRequest = objectStore.put(object); // Overwrite if exists
+                    objectRequest.onerror = function (event) {
+                        reject(Error('Error text'));
+                    };
+                    objectRequest.onsuccess = function (event) {
+                        resolve('Data saved OK');
+                        console.log("Data saved successfully");
+                    };
+                };
+            }
+        );
+    }
+
 </script>
 
 </html>
\ No newline at end of file
diff --git a/likes.html b/likes.html
index a9864c5..2b7e76c 100644
--- a/likes.html
+++ b/likes.html
@@ -21,7 +21,7 @@
     <link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
 </head>
 
-<body>
+<body id="main">
     <div class="d-grid gap-2 text-center">
         <div class="">
             <h1>Tinder for weird furries</h1>
@@ -31,50 +31,8 @@
         </div>
     </div>
 
-    <p>Someone will have to put the liked profile here or something</p>
-    <p>Definitely not me</p>
+    <div id="cards">
 
-
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
-        </div>
-    </div>
-
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
-        </div>
-    </div>
-
-    <div class="container" style="margin-bottom:2vh;">
-        <div class="card">
-            <div class="row">
-                <img src="https://www.pokewiki.de/images/thumb/d/dd/Sugimori_132.png/250px-Sugimori_132.png"
-                    class="card-img-left col-8" alt="...">
-                <div class="container col-4">
-                    <h3 class="card-text">Frederick 20</h3>
-                    <h4>I like ice cream</h4>
-                </div>
-            </div>
-            <button class="btn btn-danger" style="width:100%">X</button>
-        </div>
     </div>
 
 
@@ -90,5 +48,65 @@
         </div>
     </div>
 </body>
+<script>
+    document.getElementById("main").onload = function () {
+        loadFromIndexedDB("likes", 0).then((response) => {
+            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 += "<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 += "</div>";
+                var container = document.getElementById("cards");
+                container.innerHTML += html;
+            });
+        });
+    }
+    function loadFromIndexedDB(storeName) {
+        return new Promise(
+            function (resolve, reject) {
+                var 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>
\ No newline at end of file
