delete list interactivity + fix create empty list

src/app.py

@@ -72,8 +72,9 @@ def createList():
     items = data.get('items')
     list_uuid = create_list(name, description)
     if list_uuid:
-        for item in items.split('#'):
-            add_to_list(list_uuid, item)
+        if len(items)>0 :
+            for item in items.split('#'):
+                add_to_list(list_uuid, item)
         return jsonify({'created list ': name}), 200
     else:
         return jsonify({'create  failed': name}), 400

src/db.py

@@ -270,7 +270,7 @@ def delete_list(list_uuid):
     DELETE
     FROM itemlist
     WHERE uuid = %s
-    """, (uuid,))
+    """, (list_uuid,))
     cursor.close()
     connection.commit()
     connection.close()

web/app.html

@@ -64,6 +64,16 @@
   </div>
 </div>
 
+<!-- popup delete list -->
+<div id="deleteListPopup" class="popup">
+  <div class="popup-content">
+    <p>Delete list</p>
+    <div id="checkbox-container2"></div>
+    <button id="delete_list_ok" type="button" class="btn btn-secondary">ok</button>
+    <button id="delete_list_cancel" type="button" class="btn btn-secondary">cancel</button>
+  </div>
+</div>
+
 <!--popup confirmation window-->
 <div id="confirmationPopup" class="popup">
   <div class="popup-content">
@@ -80,5 +90,5 @@
 <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='list.js') }}"></script>
 <script src="{{ url_for('static', filename='app.js') }}"></script>
-

web/app.js

@@ -163,30 +163,30 @@ const apiUrl = `${currentUrl}app/show`;
 
 async function delItem(uuid) {
     const apiUrl = `${currentUrl}app/delete`;
-        const postData = {
-            uuid: uuid
-        };
+    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');
+    }
 }
 
 // function to create a list
@@ -224,6 +224,8 @@ async function addList() {
                     });
 
             if (response.ok) {
+                // refresh filters checkboxes
+                filters_checkboxes();
                 createListPopup.style.display = 'none';
                 console.log(response);
             } else {

web/list.js

@@ -0,0 +1,25 @@
+async function delItemlist(uuid) {
+    const apiUrl = `${currentUrl}app/delete-list`;
+    const postData = {
+        list_uuid: uuid
+    };
+
+    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) {
+        console.log(response);
+    } else {
+        throw new Error('Error in server response');
+    }
+}

web/popups.js

@@ -52,7 +52,47 @@ document.getElementById("create_list_cancel").addEventListener("click", function
 
 // modify list
 
+// delete list
+document.getElementById("delete_list").addEventListener("click", function () {
+      // remove div content
+      const node = document.getElementById("checkbox-container2");
+      while (node.firstChild) {
+          node.removeChild(node.lastChild);
+      }
 
+      // generate new checkboxes
+      const checkboxContainer = d3.select("#checkbox-container2");
+      fetch_list().then(function(data){
+          for (const itemlist of data) {
+            const div = checkboxContainer.append("div");
+            var label = div.append("label");
+            var input = label.append("input")
+                            .attr("type", "checkbox")
+                            .attr("class", "checkbox-delete-list")
+                            .attr("id", `checkbox-${itemlist.uuid}`);
+            label.append("span")
+                .text(`${itemlist.name}`);
+            div.append("br");
+          }
+
+      })
+      deleteListPopup.style.display = 'flex';
+});
+// confirm delete list
+document.getElementById("delete_list_ok").addEventListener("click", function () {
+            const checked_delete = getCheckedCheckboxIds('.checkbox-delete-list');
+            const id_array = checked_delete.map(str => str.substring(9));
+            for (const uuid of id_array) {
+              delItemlist(uuid);
+            }
+            // refresh filters checkboxes
+            filters_checkboxes();
+            deleteListPopup.style.display = 'none';
+        });
+// cancel list delete
+document.getElementById("delete_list_cancel").addEventListener("click", function () {
+            deleteListPopup.style.display = 'none';
+        });
 
 // delete item, pop-up confirm
 document.addEventListener('DOMContentLoaded', function () {

web/style.css

@@ -43,7 +43,7 @@ body {
 }
 
 #checkbox-container {
-  max-height: 200px;
+  max-height: 50%;
   overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
@@ -56,3 +56,8 @@ body {
   align-items: center;
 }
 
+#checkbox-container2 {
+  max-height: 50%;
+  overflow-y: auto;
+}
+