forked from Maxluli/TinderPokemon
Added delete function to like AND favorites
This commit is contained in:
maxluli
@@ -0,0 +1,65 @@
|
||||
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");
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -51,69 +51,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./assets/JsStuff/toolbox.js">
|
||||
</script>
|
||||
<script>
|
||||
document.getElementById("main").onload = function () {
|
||||
loadData();
|
||||
}
|
||||
function loadData() {
|
||||
loadFromIndexedDB("favorites", 0).then((response) => {
|
||||
//console.log(response);
|
||||
var container = document.getElementById("cards");
|
||||
container.innerHTML = "";
|
||||
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 += "<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>";
|
||||
//console.log(html);
|
||||
var container = document.getElementById("cards");
|
||||
container.innerHTML += html;
|
||||
|
||||
});
|
||||
var buttons = container.querySelectorAll('.btn');
|
||||
buttons.forEach(function (item) {
|
||||
item.onclick = buttonClicked;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
);
|
||||
function buttonClicked(evt) {
|
||||
//alert("bonsoir " + evt.target.id);
|
||||
let id = evt.target.id;
|
||||
removeFromIndexDB("favorites", id);
|
||||
loadData();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
68
likes.html
68
likes.html
@@ -54,9 +54,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./assets/JsStuff/toolbox.js">
|
||||
</script>
|
||||
<script>
|
||||
var dbRequest;
|
||||
|
||||
document.getElementById("main").onload = function () {
|
||||
loadData();
|
||||
}
|
||||
@@ -91,71 +92,6 @@
|
||||
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>
|
||||
Reference in New Issue
Block a user