From c540e2f497cb79bbd8fbaf78315c6944c6b2a9bb Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Tue, 13 Feb 2024 19:42:26 +0100 Subject: [PATCH] generate items list with image and checkboxes in create list pop up --- web/app.html | 3 ++ web/app.js | 79 ++++++++++++++++----------------------------------- web/popups.js | 65 ++++++++++++++++++++++++++++++++++++++++++ web/style.css | 19 +++++++++++-- 4 files changed, 109 insertions(+), 57 deletions(-) create mode 100644 web/popups.js diff --git a/web/app.html b/web/app.html index 440ec3e..4ebe10c 100644 --- a/web/app.html +++ b/web/app.html @@ -29,6 +29,8 @@ +

Include items

+
@@ -46,6 +48,7 @@ + diff --git a/web/app.js b/web/app.js index 3ab1bfb..1fcf407 100644 --- a/web/app.js +++ b/web/app.js @@ -106,8 +106,8 @@ const apiUrl = `${currentUrl}app/show`; if (response.ok) { console.log(response); - // refresh graphs to stop displaying hidden item - // or display shown item + // refresh graphs to stop displaying hidden items + // or display shown items refresh_graphs(); } else { throw new Error('Error in server response'); @@ -115,60 +115,29 @@ const apiUrl = `${currentUrl}app/show`; } async function delItem(uuid) { -const apiUrl = `${currentUrl}app/delete`; - const postData = { - uuid: uuid - }; + const apiUrl = `${currentUrl}app/delete`; + const postData = { + uuid: uuid + }; - const requestOptions = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(postData) - }; + const requestOptions = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(postData) + }; - const response = await fetch(apiUrl, requestOptions) - .catch(error => { - console.error('Error during POST request:', error); - }); + const response = await fetch(apiUrl, requestOptions) + .catch(error => { + console.error('Error during POST request:', error); + }); - if (response.ok) { - console.log(response); - // refresh graphs to stop displaying deleted item - refresh_graphs(); - } else { - throw new Error('Error in server response'); - } + if (response.ok) { + console.log(response); + // refresh graphs to stop displaying deleted item + refresh_graphs(); + } else { + throw new Error('Error in server response'); + } } - -// 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'; - }); - } -}); - -// create new list -document.getElementById("create_list").addEventListener("click", function () { - createListPopup.style.display = 'flex'; - }); -document.getElementById("create_list_cancel").addEventListener("click", function () { - createListPopup.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'; - }); -}); diff --git a/web/popups.js b/web/popups.js new file mode 100644 index 0000000..158f0a1 --- /dev/null +++ b/web/popups.js @@ -0,0 +1,65 @@ +// 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'; + }); + } +}); + +// 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("id", `checkbox-${uuid}`) + .on("change", function() { + console.log(this.checked ? uuid : null); + }); + + 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 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'; + }); +}); diff --git a/web/style.css b/web/style.css index 55a3aea..ec2fe7b 100644 --- a/web/style.css +++ b/web/style.css @@ -33,8 +33,8 @@ body { } .banner { - background-color: #177013; /* background color */ - color: #fff; /* text color */ + background-color: #177013; + color: #fff; padding: 10px; position: fixed; z-index: 300; @@ -46,3 +46,18 @@ body { margin-top: 100px; padding: 0px; } + +#checkbox-container { + max-height: 200px; + overflow-y: auto; + display: flex; + flex-wrap: wrap; +} + +#checkbox-container div { + margin-bottom: 10px; + width: calc(50% - 10px); + display: flex; + align-items: center; +} +