From ba72d8bd3532d872b87d3fcec7461862600bdaf0 Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Mon, 19 Feb 2024 00:49:36 +0100
Subject: [PATCH] delete list interactivity + fix create empty list

---
 src/app.py    |  5 +++--
 src/db.py     |  2 +-
 web/app.html  | 12 +++++++++++-
 web/app.js    | 44 +++++++++++++++++++++++---------------------
 web/list.js   | 25 +++++++++++++++++++++++++
 web/popups.js | 40 ++++++++++++++++++++++++++++++++++++++++
 web/style.css |  7 ++++++-
 7 files changed, 109 insertions(+), 26 deletions(-)
 create mode 100644 web/list.js

diff --git a/src/app.py b/src/app.py
index abbc5da..1af8e26 100644
--- a/src/app.py
+++ b/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
diff --git a/src/db.py b/src/db.py
index 688bee5..a126a5a 100644
--- a/src/db.py
+++ b/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()
diff --git a/web/app.html b/web/app.html
index d532245..a6b5f4e 100644
--- a/web/app.html
+++ b/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>
-
diff --git a/web/app.js b/web/app.js
index 1983109..b3de43c 100644
--- a/web/app.js
+++ b/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 {
diff --git a/web/list.js b/web/list.js
new file mode 100644
index 0000000..ffebeb0
--- /dev/null
+++ b/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');
+    }
+}
diff --git a/web/popups.js b/web/popups.js
index 4d6bfd4..eadfdb6 100644
--- a/web/popups.js
+++ b/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 () {
diff --git a/web/style.css b/web/style.css
index fc7b9f3..32b3c85 100644
--- a/web/style.css
+++ b/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;
+}
+