jedna kategoria dla listy

static/js/admin_mass_categories.js

@@ -1,4 +1,5 @@
 document.addEventListener("DOMContentLoaded", function () {
+    // Inicjalizacja Tom Select dla wszystkich select[multiple]
     document.querySelectorAll('select[multiple]').forEach(function (el) {
         new TomSelect(el, {
             plugins: ['remove_button'],
@@ -8,4 +9,76 @@ document.addEventListener("DOMContentLoaded", function () {
             dropdownParent: 'body'
         });
     });
-});
+
+    // Obsługa przycisków podglądu produktów
+    document.querySelectorAll(".preview-btn").forEach((btn) => {
+        btn.addEventListener("click", async () => {
+            const listId = btn.dataset.listId;
+            const modalTitle = document.getElementById("previewModalLabel");
+            const productList = document.getElementById("product-list");
+
+            modalTitle.textContent = "Ładowanie...";
+            productList.innerHTML = '<li class="list-group-item bg-dark text-white">⏳ Ładowanie produktów...</li>';
+
+            const modal = new bootstrap.Modal(document.getElementById("productPreviewModal"));
+            modal.show();
+
+            try {
+                const res = await fetch(`/admin/list_items/${listId}`);
+                const data = await res.json();
+
+                modalTitle.textContent = `🛒 ${data.title}`;
+                productList.innerHTML = "";
+
+                const purchasedList = document.createElement("ul");
+                purchasedList.className = "list-group list-group-flush mb-3";
+
+                const notPurchasedList = document.createElement("ul");
+                notPurchasedList.className = "list-group list-group-flush";
+
+                let hasPurchased = false;
+                let hasUnpurchased = false;
+
+                data.items.forEach(item => {
+                    const li = document.createElement("li");
+                    li.className = "list-group-item bg-dark text-white d-flex justify-content-between";
+                    li.innerHTML = `
+            <span>${item.name}</span>
+            <span class="badge ${item.purchased ? 'bg-success' : item.not_purchased ? 'bg-warning text-dark' : 'bg-secondary'}">
+              x${item.quantity}
+            </span>`;
+
+                    if (item.purchased) {
+                        purchasedList.appendChild(li);
+                        hasPurchased = true;
+                    } else {
+                        notPurchasedList.appendChild(li);
+                        hasUnpurchased = true;
+                    }
+                });
+
+                if (hasPurchased) {
+                    const h5 = document.createElement("h6");
+                    h5.textContent = "✔️ Kupione";
+                    productList.appendChild(h5);
+                    productList.appendChild(purchasedList);
+                }
+
+                if (hasUnpurchased) {
+                    const h5 = document.createElement("h6");
+                    h5.textContent = "🚫 Niekupione / Nieoznaczone";
+                    productList.appendChild(h5);
+                    productList.appendChild(notPurchasedList);
+                }
+
+                if (!hasPurchased && !hasUnpurchased) {
+                    productList.innerHTML = '<li class="list-group-item bg-dark text-muted fst-italic">Brak produktów</li>';
+                }
+
+            } catch (err) {
+                modalTitle.textContent = "Błąd";
+                productList.innerHTML = '<li class="list-group-item bg-dark text-danger">❌ Błąd podczas ładowania</li>';
+            }
+        });
+    });
+});

static/js/list_items_on_list.js

@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Tom Select jak był
+
+    // Obsługa kliknięcia "Podgląd"
+    document.querySelectorAll(".preview-btn").forEach((btn) => {
+        btn.addEventListener("click", async () => {
+            const listId = btn.dataset.listId;
+            const modalTitle = document.getElementById("previewModalLabel");
+            const productList = document.getElementById("product-list");
+
+            modalTitle.textContent = "Ładowanie...";
+            productList.innerHTML = '<li class="list-group-item bg-dark text-white">⏳ Ładowanie produktów...</li>';
+
+            const modal = new bootstrap.Modal(document.getElementById("productPreviewModal"));
+            modal.show();
+
+            try {
+                const res = await fetch(`/admin/list_items/${listId}`);
+                const data = await res.json();
+
+                modalTitle.textContent = `🛒 ${data.title}`;
+                productList.innerHTML = "";
+
+                if (data.items.length === 0) {
+                    productList.innerHTML = '<li class="list-group-item bg-dark text-muted fst-italic">Brak produktów</li>';
+                } else {
+                    data.items.forEach(item => {
+                        const li = document.createElement("li");
+                        li.className = "list-group-item bg-dark text-white d-flex justify-content-between";
+                        li.innerHTML = `
+              <span>${item.name}</span>
+              <span class="badge ${item.purchased ? 'bg-success' : item.not_purchased ? 'bg-warning text-dark' : 'bg-secondary'}">
+                x${item.quantity}
+              </span>`;
+                        productList.appendChild(li);
+                    });
+                }
+
+            } catch (err) {
+                modalTitle.textContent = "Błąd";
+                productList.innerHTML = '<li class="list-group-item bg-dark text-danger">❌ Błąd podczas ładowania</li>';
+            }
+        });
+    });
+});