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

You can now delete the liked pokemons

Browse Source
This commit is contained in:
maxluli
2022-10-04 08:54:16 +02:00
parent a8b781cb44
commit 4f108419cd
2 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
assets/JsStuff/toolbox.js Normal file
View File

71
likes.html
View File

@@ -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>