create list interactivity

src/app.py

@@ -11,14 +11,14 @@ CORS(app)
 def serve_index():
     return render_template('app.html')
 
-@app.route('/app/init', methods = ['GET'])
+@app.route('/init', methods = ['GET'])
 def init_db():
     status = check_schema()
     if not status:
         initialize()
     return str(status)
 
-@app.route('/app/update', methods = ['GET'])
+@app.route('/update', methods = ['GET'])
 def update_hist():
     print("update")
     update_items()
@@ -69,8 +69,14 @@ def createList():
     data = request.get_json()
     name = data.get('name')
     description = data.get('description')
-    create_list(name, description)
+    items = data.get('items')
-    return jsonify({'created list ': name}), 200
+    list_uuid = create_list(name, description)
+    if list_uuid:
+        for item in items.split('#'):
+            add_to_list(list_uuid, item)
+        return jsonify({'created list ': name}), 200
+    else:
+        return jsonify({'create  failed': name}), 400
 
 @app.route('/app/add-to-list', methods=['POST'])
 def addToList():

src/db.py

@@ -164,19 +164,38 @@ def delete_item(uuid):
 def create_list(name, description):
     '''
     initialize an itemlist in the database
+    return list uuid
+    return None if a list with this name already exist
     '''
     if len(name) <= 50:
         connection = connect_db()
         cursor = connection.cursor()
+
         cursor.execute("""
-        INSERT INTO itemlist (uuid, name, description)
+        SELECT uuid
-        VALUES (nextval('uuid_list_sequence'), %s, %s)
+        FROM itemlist
-        """, (name, description))
+        WHERE name = %s
+        """, (name,))
+
+        result = cursor.rowcount
+
+        if result == 0:
+            cursor.execute("""
+            INSERT INTO itemlist (uuid, name, description)
+            VALUES (nextval('uuid_list_sequence'), %s, %s)
+            """, (name, description))
+            cursor.execute("""
+            SELECT uuid
+            FROM itemlist
+            WHERE name = %s
+            """, (name,))
+            result = cursor.fetchall()[0][0]
+        else:
+            result = None
+
         connection.commit()
         connection.close()
-        return 1
+        return result
-    else:
-        return 0
 
 def add_to_list(list_uuid, item_uuid):
     '''

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}`)
+                    .attr("class", "checkbox-itemlist")
-                    .on("change", function() {
+                    .attr("id", `checkbox-${uuid}`);
-                    console.log(this.checked ? uuid : null);
-                    });
 
                 const link = `https://fr.aliexpress.com/item/${item.itemid}.html`;
                 const image = div.append("img")