Added indexDb support

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
+62 -44
View File
@@ -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>