forked from Maxluli/TinderPokemon
maxluli
161 lines
5.7 KiB
HTML
161 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="utf-8">
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
|
|
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
|
|
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<title>Tinder Pokemon title</title>
|
|
<link rel="icon" type="image/x-icon" href="assets/img/Icon.ico">
|
|
</head>
|
|
|
|
<body id="main">
|
|
<div class="d-grid gap-2 text-center">
|
|
<div class="">
|
|
<h1>Tinder for weird furries</h1>
|
|
</div>
|
|
<div class="">
|
|
<h2>Likes</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cards">
|
|
|
|
</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>
|
|
</div>
|
|
<div class="btn col-4 btn-light">
|
|
<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>
|
|
</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 += "<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' id='" + item.id + "' style='width:100%'>X</button>";
|
|
html += "</div>";
|
|
html += "</div>";
|
|
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) {
|
|
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> |