109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
// close popups with escape key
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.isComposing || event.key === 'Escape') {
|
|
Array.from(document.getElementsByClassName("popup")).forEach(function(x) {
|
|
x.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
|
|
// manage list
|
|
document.getElementById("manage_list").addEventListener("click", function () {
|
|
manageListPopup.style.display = 'flex';
|
|
});
|
|
|
|
// create new list
|
|
document.getElementById("create_list").addEventListener("click", function () {
|
|
// remove div content
|
|
const node = document.getElementById("checkbox-container");
|
|
while (node.firstChild) {
|
|
node.removeChild(node.lastChild);
|
|
}
|
|
|
|
// generate new checkboxes
|
|
const checkboxContainer = d3.select("#checkbox-container");
|
|
fetch_item().then(function(data){
|
|
Object.keys(data).forEach(uuid => {
|
|
const item = data[uuid];
|
|
const div = checkboxContainer.append("div");
|
|
|
|
const checkbox = div.append("input")
|
|
.attr("type", "checkbox")
|
|
.attr("class", "checkbox-itemlist")
|
|
.attr("id", `checkbox-${uuid}`);
|
|
|
|
const link = `https://fr.aliexpress.com/item/${item.itemid}.html`;
|
|
const image = div.append("img")
|
|
.attr("src", item.image)
|
|
.attr("width", height*0.4)
|
|
.attr("height", height*0.4)
|
|
.on("click", function() {
|
|
window.open(link, '_blank', 'noopener,noreferrer');
|
|
})
|
|
.attr("alt", `Image ${uuid}`);
|
|
});
|
|
})
|
|
createListPopup.style.display = 'flex';
|
|
});
|
|
// cancel list creation
|
|
document.getElementById("create_list_cancel").addEventListener("click", function () {
|
|
createListPopup.style.display = 'none';
|
|
});
|
|
|
|
// modify list
|
|
|
|
// delete list
|
|
document.getElementById("delete_list").addEventListener("click", function () {
|
|
// remove div content
|
|
const node = document.getElementById("checkbox-container2");
|
|
while (node.firstChild) {
|
|
node.removeChild(node.lastChild);
|
|
}
|
|
|
|
// generate new checkboxes
|
|
const checkboxContainer = d3.select("#checkbox-container2");
|
|
fetch_list().then(function(data){
|
|
for (const itemlist of data) {
|
|
const div = checkboxContainer.append("div");
|
|
var label = div.append("label");
|
|
var input = label.append("input")
|
|
.attr("type", "checkbox")
|
|
.attr("class", "checkbox-delete-list")
|
|
.attr("id", `checkbox-${itemlist.uuid}`);
|
|
label.append("span")
|
|
.text(`${itemlist.name}`);
|
|
div.append("br");
|
|
}
|
|
|
|
})
|
|
deleteListPopup.style.display = 'flex';
|
|
});
|
|
// confirm delete list
|
|
document.getElementById("delete_list_ok").addEventListener("click", function () {
|
|
const checked_delete = getCheckedCheckboxIds('.checkbox-delete-list');
|
|
const id_array = checked_delete.map(str => str.substring(9));
|
|
for (const uuid of id_array) {
|
|
delItemlist(uuid);
|
|
}
|
|
// refresh filters checkboxes
|
|
filters_checkboxes();
|
|
deleteListPopup.style.display = 'none';
|
|
});
|
|
// cancel list delete
|
|
document.getElementById("delete_list_cancel").addEventListener("click", function () {
|
|
deleteListPopup.style.display = 'none';
|
|
});
|
|
|
|
// delete item, pop-up confirm
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const yesBtn = document.getElementById('yesBtn');
|
|
const noBtn = document.getElementById('noBtn');
|
|
yesBtn.addEventListener('click', function () {
|
|
delItem(confirmationPopup.style.name);
|
|
confirmationPopup.style.display = 'none';
|
|
});
|
|
noBtn.addEventListener('click', function () {
|
|
confirmationPopup.style.display = 'none';
|
|
});
|
|
});
|