Parano/TinderPokemon
3
0
Fork 0
forked from Maxluli/TinderPokemon
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added indexDb support

Browse Source
This commit is contained in:
maxluli
2022-09-27 10:26:43 +02:00
parent 2e8943d994
commit a8b781cb44
3 changed files with 219 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
favorites.html
+85 -48
View File
@@ -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>