create list interactivity

web/app.html

@@ -28,6 +28,7 @@
     <p>Create new list</p>
     <input id="listName" type="text" placeholder="name">
     <input id="listDescription" type="text" placeholder="description">
+    <button id="create_list_add" type="button">add</button>
     <button id="create_list_cancel" type="button">cancel</button>
     <p>Include items</p>
     <div id="checkbox-container"></div>

web/app.js

@@ -141,3 +141,60 @@ async function delItem(uuid) {
             throw new Error('Error in server response');
         }
 }
+
+// function to create a list
+document.getElementById("create_list_add").addEventListener("click", addList);
+async function addList() {
+
+        const checked = getCheckedCheckboxIds('.checkbox-itemlist');
+        const items_uuid = checked.map(str => str.substring(9)).join('#');
+
+        const listname = document.getElementById("listName").value;
+
+        if (listname.length !== 0) {
+            const apiUrl = `${currentUrl}app/create-list`;
+            const postData = {
+                name: listname,
+                description: document.getElementById("listDescription").value,
+                items: items_uuid
+            };
+
+            // clear input fields
+            document.getElementById("listName").value='';
+            document.getElementById("listDescription").value='';
+
+            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);
+                    });
+
+            if (response.ok) {
+                createListPopup.style.display = 'none';
+                console.log(response);
+            } else {
+                throw new Error('Error in server response');
+            }
+        } else {
+            console.log("cannot create list without a name")
+        }
+
+}
+
+// get an array of id of checked checkboxes of a specific class name
+function getCheckedCheckboxIds(classname) {
+    const checkboxes = d3.selectAll(classname);
+    const checkedIds = checkboxes.filter(function() {
+        return this.checked;
+    }).nodes().map(function(checkbox) {
+        return checkbox.id;
+    });
+    return checkedIds;
+}

web/popups.js

@@ -9,15 +9,12 @@ document.addEventListener("keydown", (event) => {
 
 // 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){
@@ -27,10 +24,8 @@ document.getElementById("create_list").addEventListener("click", function () {
 
                 const checkbox = div.append("input")
                     .attr("type", "checkbox")
-                    .attr("id", `checkbox-${uuid}`)
-                    .on("change", function() {
-                    console.log(this.checked ? uuid : null);
-                    });
+                    .attr("class", "checkbox-itemlist")
+                    .attr("id", `checkbox-${uuid}`);
 
                 const link = `https://fr.aliexpress.com/item/${item.itemid}.html`;
                 const image = div.append("img")