generate items list with image and checkboxes in create list pop up

web/app.html

@@ -29,6 +29,8 @@
     <input id="listName" type="text" placeholder="name">
     <input id="listDescription" type="text" placeholder="description">
     <button id="create_list_cancel" type="button">cancel</button>
+    <p>Include items</p>
+    <div id="checkbox-container"></div>
   </div>
 </div>
 
@@ -46,6 +48,7 @@
 
 <!-- Load scripts-->
 <script src="{{ url_for('static', filename='fetch.js') }}"></script>
+<script src="{{ url_for('static', filename='popups.js') }}"></script>
 <script src="{{ url_for('static', filename='rendergraphs.js') }}"></script>
 <script src="{{ url_for('static', filename='app.js') }}"></script>
 

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
+        // refresh graphs to stop displaying hidden items
-        // or display shown item
+        // 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 apiUrl = `${currentUrl}app/delete`;
-    const postData = {
+        const postData = {
-        uuid: uuid
+            uuid: uuid
-    };
+        };
 
-    const requestOptions = {
+        const requestOptions = {
-        method: 'POST',
+            method: 'POST',
-        headers: {
+            headers: {
-            'Content-Type': 'application/json',
+                'Content-Type': 'application/json',
-        },
+            },
-        body: JSON.stringify(postData)
+            body: JSON.stringify(postData)
-    };
+        };
 
-    const response = await fetch(apiUrl, requestOptions)
+        const response = await fetch(apiUrl, requestOptions)
-            .catch(error => {
+                .catch(error => {
-            console.error('Error during POST request:', error);
+                console.error('Error during POST request:', error);
-            });
+                });
 
-    if (response.ok) {
+        if (response.ok) {
-        console.log(response);
+            console.log(response);
-        // refresh graphs to stop displaying deleted item
+            // refresh graphs to stop displaying deleted item
-        refresh_graphs();
+            refresh_graphs();
-    } else {
+        } else {
-        throw new Error('Error in server response');
+            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';
-  });
-});

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';
+  });
+});

web/style.css

@@ -33,8 +33,8 @@ body {
 }
 
 .banner {
-  background-color: #177013; /* background color */
+  background-color: #177013;
-  color: #fff; /* text color */
+  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;
+}
+