update listy jak sie zmieni

static/js/live.js

@@ -216,6 +216,11 @@ socket.on('user_list', function(data) {
     showToast(`Obecni: ${userList}`, 'info');
 });
 
+socket.on('full_list', function(data) {
+    updateListSmoothly(data.items);
+    showToast('🔄 Lista została zaktualizowana', 'info');
+});
+
 }
 
 function updateItemState(itemId, isChecked) {
@@ -333,3 +338,72 @@ function showToast(message, type = 'primary') {
   toastContainer.appendChild(toast);
   setTimeout(() => { toast.remove(); }, 1750);
 }
+
+function updateListSmoothly(newItems) {
+  const itemsContainer = document.getElementById('items');
+  const existingItems = Array.from(itemsContainer.querySelectorAll('li'));
+  const existingIds = existingItems.map(li => parseInt(li.id.replace('item-', ''), 10));
+  const newIds = newItems.map(item => item.id);
+
+  // Usuń elementy, które nie istnieją w nowej liście
+  existingItems.forEach(li => {
+    const id = parseInt(li.id.replace('item-', ''), 10);
+    if (!newIds.includes(id)) {
+      li.remove();
+    }
+  });
+
+  // Przejdź przez nowe elementy
+  newItems.forEach(item => {
+    const li = document.getElementById(`item-${item.id}`);
+    let quantityBadge = '';
+    if (item.quantity && item.quantity > 1) {
+      quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
+    }
+
+    if (li) {
+      // Jeśli istnieje — sprawdź i ewentualnie zaktualizuj nazwę, badge, notatkę
+      const nameSpan = li.querySelector(`#name-${item.id}`);
+      let newNameHtml = `${item.name} ${quantityBadge}`;
+      if (nameSpan && nameSpan.innerHTML.trim() !== newNameHtml.trim()) {
+        nameSpan.innerHTML = newNameHtml;
+      }
+
+      const noteEl = li.querySelector('small');
+      if (item.note && (!noteEl || noteEl.innerText !== `[ ${item.note} ]`)) {
+        if (!noteEl) {
+          const newNote = document.createElement('small');
+          newNote.className = 'text-danger ms-4';
+          newNote.innerHTML = `[ <b>${item.note}</b> ]`;
+          nameSpan.insertAdjacentElement('afterend', newNote);
+        } else {
+          noteEl.innerHTML = `[ <b>${item.note}</b> ]`;
+        }
+      } else if (!item.note && noteEl) {
+        noteEl.remove();
+      }
+
+    } else {
+      // Jeśli brak — dodaj nowy
+      const newLi = document.createElement('li');
+      newLi.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap ${item.purchased ? 'bg-success text-white' : 'item-not-checked'}`;
+      newLi.id = `item-${item.id}`;
+
+      newLi.innerHTML = `
+        <div class="d-flex align-items-center flex-wrap gap-2">
+          <input class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''}>
+          <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="mt-2 mt-md-0">
+          <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${item.id}, '${item.name}', ${item.quantity || 1})">✏️</button>
+          <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${item.id})">🗑️</button>
+        </div>
+      `;
+
+      itemsContainer.appendChild(newLi);
+    }
+  });
+
+  updateProgressBar();
+}