From b9285fe97e950d974800a6d69f49098aa5888737 Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Tue, 20 Feb 2024 17:03:23 +0100
Subject: [PATCH] modify list popup, chose list to modify submenu + show
 content in list

---
 web/app.html  | 16 +++++++++++
 web/popups.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+)

diff --git a/web/app.html b/web/app.html
index a6b5f4e..0906009 100644
--- a/web/app.html
+++ b/web/app.html
@@ -64,6 +64,22 @@
   </div>
 </div>
 
+<!--popup modify list-->
+<div id="modifyListPopup" class="popup">
+  <div class="popup-content">
+    <p>Modify list</p>
+      <div class="dropdown btn-group mr-2" id="modifylist_dropdown">
+          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+          Itemlist
+          </button>
+          <ul id="modify_itemlist_choice" class="dropdown-menu">
+          </ul>
+      </div>
+  </div>
+  <div id="modifylist_content">
+  </div>
+</div>
+
 <!-- popup delete list -->
 <div id="deleteListPopup" class="popup">
   <div class="popup-content">
diff --git a/web/popups.js b/web/popups.js
index eadfdb6..e510a44 100644
--- a/web/popups.js
+++ b/web/popups.js
@@ -94,6 +94,80 @@ document.getElementById("delete_list_cancel").addEventListener("click", function
             deleteListPopup.style.display = 'none';
         });
 
+// modify list popup
+document.getElementById("modify_list").addEventListener("click", function () {
+      generate_modifylist_buttons();
+      //
+      modifyListPopup.style.display = 'flex';
+});
+function generate_modifylist_buttons() {
+    // remove div content
+      const node = document.getElementById("modify_itemlist_choice");
+      while (node.firstChild) {
+          node.removeChild(node.lastChild);
+      }
+      fetch_list().then(function(data){
+          let div = document.getElementById("modify_itemlist_choice");
+          for (const itemlist of data) {
+              // Create new button
+              var li = document.createElement("li");
+              var button = document.createElement("button");
+              button.setAttribute("class", "dropdown-item");
+              button.setAttribute("type", "button");
+              button.setAttribute("id", `modify-${itemlist.uuid}`);
+              button.addEventListener("click", function() {
+                  toggle_modify(itemlist.uuid);
+              });
+              button.textContent = `${itemlist.name}`;
+              li.appendChild(button);
+              div.appendChild(li);
+          }
+      });
+}
+async function toggle_modify(itemlist_uuid) {
+      //   <div id="modifylist_content">
+      // <input id="listName" type="text" placeholder="name">
+      //     <input id="listDescription" type="text" placeholder="description">
+      //     <button id="create_list_add" type="button" class="btn btn-secondary">add</button>
+      //     <button id="create_list_cancel" type="button" class="btn btn-secondary">cancel</button>
+      //     <p>Include items</p>
+      //     <div id="checkbox-container"></div>
+      // remove div content
+      const node = document.getElementById("modifylist_content");
+      while (node.firstChild) {
+          node.removeChild(node.lastChild);
+      }
+      // input name
+      // input description
+      // content
+      const existing_content = Object.keys(await fetch_item_filtered([itemlist_uuid]));
+      const modify_content = d3.select("#modifylist_content");
+      const checkboxContainer = modify_content.append("div");
+      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("class", "checkbox-itemlist")
+              .attr("id", `checkbox-${uuid}`);
+          if (existing_content.includes(`${uuid}`)) {
+              checkbox.property("checked", true);
+          }
+          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}`);
+          });
+      });
+}
+
 // delete item, pop-up confirm
 document.addEventListener('DOMContentLoaded', function () {
   const yesBtn = document.getElementById('yesBtn');