232 lines
9.4 KiB
JavaScript
232 lines
9.4 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';
|
|
});
|
|
|
|
// 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", async function () {
|
|
const checked_delete = getCheckedCheckboxIds('.checkbox-delete-list');
|
|
const id_array = checked_delete.map(str => str.substring(9));
|
|
for (const uuid of id_array) {
|
|
await 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';
|
|
});
|
|
|
|
// modify list popup
|
|
var previous_modify = Object();
|
|
document.getElementById("modify_list").addEventListener("click", function () {
|
|
generate_modifylist_buttons();
|
|
//
|
|
modifyListPopup.style.display = 'flex';
|
|
});
|
|
// cancel list modify
|
|
document.getElementById("modifylist_cancel").addEventListener("click", function () {
|
|
modifyListPopup.style.display = 'none';
|
|
});
|
|
function generate_modifylist_buttons() {
|
|
// remove div content
|
|
const node = document.getElementById("modify_itemlist_choice");
|
|
while (node.firstChild) {
|
|
node.removeChild(node.lastChild);
|
|
}
|
|
fetch_list().then(function(data){
|
|
let div = document.getElementById("modify_itemlist_choice");
|
|
for (const itemlist of data) {
|
|
// Create new button
|
|
var li = document.createElement("li");
|
|
var button = document.createElement("button");
|
|
button.setAttribute("class", "dropdown-item");
|
|
button.setAttribute("type", "button");
|
|
button.setAttribute("id", `modify-${itemlist.uuid}`);
|
|
button.addEventListener("click", function() {
|
|
toggle_modify(itemlist.uuid);
|
|
});
|
|
button.textContent = `${itemlist.name}`;
|
|
li.appendChild(button);
|
|
div.appendChild(li);
|
|
}
|
|
});
|
|
}
|
|
async function toggle_modify(itemlist_uuid) {
|
|
// remove div content
|
|
const node = document.getElementById("modifylist_content");
|
|
while (node.firstChild) {
|
|
node.removeChild(node.lastChild);
|
|
}
|
|
// new content
|
|
previous_modify.uuid = itemlist_uuid;
|
|
const existing_content = Object.keys(await fetch_item_filtered([itemlist_uuid]));
|
|
previous_modify.content = existing_content;
|
|
const list_data = await get_list_details(itemlist_uuid);
|
|
const modify_content = d3.select("#modifylist_content");
|
|
// dropdown menu text
|
|
document.getElementById("modify_itemlist_dropdown").innerHTML = `${list_data.name}`;
|
|
// input name
|
|
previous_modify.name = list_data.name;
|
|
const input_name = modify_content.append("input")
|
|
.attr("type", "text")
|
|
.attr("placeholder", "name")
|
|
.attr("value", `${list_data.name}`)
|
|
.attr("id", `input_name-${itemlist_uuid}`);
|
|
// input description
|
|
const input_description = modify_content.append("input")
|
|
.attr("type", "text")
|
|
.attr("placeholder", "description")
|
|
.attr("value", `${list_data.description}`)
|
|
.attr("id", `input_description-${itemlist_uuid}`);
|
|
previous_modify.description = list_data.description;
|
|
// content
|
|
const checkboxContainer = modify_content.append("div")
|
|
.attr("class", "item_checkboxes");
|
|
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-modify-itemlist")
|
|
.attr("id", `checkbox-${uuid}`);
|
|
if (existing_content.includes(`${uuid}`)) {
|
|
checkbox.property("checked", true);
|
|
}
|
|
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}`);
|
|
});
|
|
});
|
|
}
|
|
// confirm list modify
|
|
document.getElementById("modifylist_ok").addEventListener("click", async function () {
|
|
const uuid = previous_modify.uuid;
|
|
const new_name = document.getElementById(`input_name-${uuid}`).value;
|
|
const new_description = document.getElementById(`input_description-${uuid}`).value;
|
|
const checked = getCheckedCheckboxIds('.checkbox-modify-itemlist');
|
|
const new_content = checked.map(str => str.substring(9));
|
|
var diff = false;
|
|
if (new_name != previous_modify.name) {
|
|
// name different
|
|
diff = true;
|
|
await changeListName(uuid, new_name);
|
|
}
|
|
if (new_description != previous_modify.description) {
|
|
// description different
|
|
diff = true;
|
|
await changeListDescription(uuid, new_description);
|
|
}
|
|
if (!(new_content.every(item => previous_modify.content.includes(item)) && previous_modify.content.every(item => new_content.includes(item)))) {
|
|
// content different
|
|
diff = true;
|
|
await changeListContent(uuid, new_content);
|
|
}
|
|
if (diff) {
|
|
// refresh filters checkboxes
|
|
filters_checkboxes();
|
|
}
|
|
modifyListPopup.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';
|
|
});
|
|
});
|
|
|
|
// restore/export data popup
|
|
document.getElementById("export_restore").addEventListener("click", function () {
|
|
restorePopup.style.display = 'flex';
|
|
});
|