sam.hadow/aliexpress-price-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modify list popup, chose list to modify submenu + show content in list

Browse Source
This commit is contained in:
Sam Hadow 2024-02-20 17:03:23 +01:00
parent ba72d8bd35
commit b9285fe97e
2 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/app.html
View File

@ -64,6 +64,22 @@
</div>
</div>
<!--popup modify list-->
<div id="modifyListPopup" class="popup">
<div class="popup-content">
<p>Modify list</p>
<div class="dropdown btn-group mr-2" id="modifylist_dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Itemlist
</button>
<ul id="modify_itemlist_choice" class="dropdown-menu">
</ul>
</div>
</div>
<div id="modifylist_content">
</div>
</div>
<!-- popup delete list -->
<div id="deleteListPopup" class="popup">
<div class="popup-content">

74
web/popups.js
View File

@ -94,6 +94,80 @@ document.getElementById("delete_list_cancel").addEventListener("click", function
deleteListPopup.style.display = 'none';
});
// modify list popup
document.getElementById("modify_list").addEventListener("click", function () {
generate_modifylist_buttons();
//
modifyListPopup.style.display = 'flex';
});
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) {
// <div id="modifylist_content">
// <input id="listName" type="text" placeholder="name">
// <input id="listDescription" type="text" placeholder="description">
// <button id="create_list_add" type="button" class="btn btn-secondary">add</button>
// <button id="create_list_cancel" type="button" class="btn btn-secondary">cancel</button>
// <p>Include items</p>
// <div id="checkbox-container"></div>
// remove div content
const node = document.getElementById("modifylist_content");
while (node.firstChild) {
node.removeChild(node.lastChild);
}
// input name
// input description
// content
const existing_content = Object.keys(await fetch_item_filtered([itemlist_uuid]));
const modify_content = d3.select("#modifylist_content");
const checkboxContainer = modify_content.append("div");
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}`);
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}`);
});
});
}
// delete item, pop-up confirm
document.addEventListener('DOMContentLoaded', function () {
const yesBtn = document.getElementById('yesBtn');