funckja niekupione

static/js/functions.js

@@ -254,6 +254,14 @@ function toggleVisibility(listId) {
     });
 }
 
+function markNotPurchasedModal(e, id) {
+  e.stopPropagation();
+  const reason = prompt("Podaj powód oznaczenia jako niekupione:");
+  if (reason !== null) {
+    socket.emit('mark_not_purchased', { item_id: id, reason: reason });
+  }
+}
+
 function showToast(message, type = 'primary') {
   const toastContainer = document.getElementById('toast-container');
   const toast = document.createElement('div');
@@ -278,7 +286,7 @@ function isListDifferent(oldItems, newItems) {
   return false;
 }
 
-function updateListSmoothly(newItems) {
+/* function updateListSmoothly(newItems) {
   const itemsContainer = document.getElementById('items');
   const existingItemsMap = new Map();
 
@@ -354,6 +362,81 @@ function updateListSmoothly(newItems) {
   itemsContainer.innerHTML = '';
   itemsContainer.appendChild(fragment);
 
+  updateProgressBar();
+  toggleEmptyPlaceholder();
+  applyHidePurchased();
+} */
+
+function updateListSmoothly(newItems) {
+  const itemsContainer = document.getElementById('items');
+  const existingItemsMap = new Map();
+
+  Array.from(itemsContainer.querySelectorAll('li')).forEach(li => {
+    const id = parseInt(li.id.replace('item-', ''), 10);
+    existingItemsMap.set(id, li);
+  });
+
+  const fragment = document.createDocumentFragment();
+
+  newItems.forEach(item => {
+    // 🔥 Logujemy każdy item
+    console.log('Item:', item.name, 'Purchased:', item.purchased, 'Not purchased:', item.not_purchased);
+
+    let li = existingItemsMap.get(item.id);
+    let quantityBadge = '';
+    if (item.quantity && item.quantity > 1) {
+      quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
+    }
+
+    if (!li) {
+      li = document.createElement('li');
+      li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item`;
+      li.id = `item-${item.id}`;
+    }
+
+    // Ustaw klasy tła
+    li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item ${
+      item.purchased ? 'bg-success text-white' :
+      item.not_purchased ? 'bg-warning text-dark' : 'item-not-checked'
+    }`;
+
+    // HTML wewnętrzny
+    li.innerHTML = `
+      <div class="d-flex align-items-center gap-3 flex-grow-1">
+        ${!item.not_purchased ? `
+          <input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" 
+            ${item.purchased ? 'checked' : ''}>
+        ` : `
+          <span class="ms-1 block-icon">🚫</span>
+        `}
+        <span id="name-${item.id}" class="text-white">${item.name} ${quantityBadge}</span>
+        ${item.note ? `<small class="text-danger ms-4">[ <b>${item.note}</b> ]</small>` : ''}
+      </div>
+      <div class="btn-group btn-group-sm" role="group">
+        ${item.not_purchased ? `
+          <button type="button" class="btn btn-outline-success"
+            onclick="unmarkNotPurchased(${item.id})">
+            ✅ Przywróć
+          </button>
+        ` : `
+          <button type="button" class="btn btn-outline-light"
+            onclick="markNotPurchasedModal(event, ${item.id})">
+            ⚠️
+          </button>
+          <button type="button" class="btn btn-outline-light"
+            onclick="openNoteModal(event, ${item.id})">
+            📝
+          </button>
+        `}
+      </div>
+    `;
+
+    fragment.appendChild(li);
+  });
+
+  itemsContainer.innerHTML = '';
+  itemsContainer.appendChild(fragment);
+
   updateProgressBar();
   toggleEmptyPlaceholder();
   applyHidePurchased();

static/js/live.js

@@ -225,4 +225,8 @@ function setupList(listId, username) {
   window.LIST_ID = listId;
   window.usernameForReconnect = username;
 
+}
+
+function unmarkNotPurchased(itemId) {
+  socket.emit('unmark_not_purchased', { item_id: itemId });
 }

static/js/sockets.js

@@ -119,4 +119,12 @@ socket.on('full_list', function (data) {
     showToast('Lista została zaktualizowana', 'info');
   }
   didReceiveFirstFullList = true;
+});
+
+socket.on('item_marked_not_purchased', data => {
+  socket.emit('request_full_list', { list_id: window.LIST_ID });
+});
+
+socket.on('item_unmarked_not_purchased', data => {
+  socket.emit('request_full_list', { list_id: window.LIST_ID });
 });