update listy jak sie zmieni

static/js/live.js

@@ -341,36 +341,51 @@ function showToast(message, type = 'primary') {
 
 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);
+  const existingItemsMap = new Map();
 
-  // Usuń elementy, które nie istnieją w nowej liście
-  existingItems.forEach(li => {
+  // Zbuduj mapę istniejących elementów
+  Array.from(itemsContainer.querySelectorAll('li')).forEach(li => {
     const id = parseInt(li.id.replace('item-', ''), 10);
-    if (!newIds.includes(id)) {
-      li.remove();
-    }
+    existingItemsMap.set(id, li);
   });
 
-  // Przejdź przez nowe elementy
+  // Tworzymy nowy "fragment", żeby od razu wstawić całość
+  const fragment = document.createDocumentFragment();
+
   newItems.forEach(item => {
-    const li = document.getElementById(`item-${item.id}`);
+    let li = existingItemsMap.get(item.id);
     let quantityBadge = '';
     if (item.quantity && item.quantity > 1) {
       quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
     }
 
+    // Jeśli element istnieje — aktualizuj
     if (li) {
-      // Jeśli istnieje — sprawdź i ewentualnie zaktualizuj nazwę, badge, notatkę
+      const checkbox = li.querySelector('input[type="checkbox"]');
       const nameSpan = li.querySelector(`#name-${item.id}`);
+      const noteEl = li.querySelector('small');
+
+      // Aktualizacja checkboxa
+      if (checkbox) {
+        checkbox.checked = item.purchased;
+      }
+
+      // Aktualizacja klas
+      li.classList.remove('bg-success', 'text-white', 'item-not-checked');
+      if (item.purchased) {
+        li.classList.add('bg-success', 'text-white');
+      } else {
+        li.classList.add('item-not-checked');
+      }
+
+      // Aktualizacja nazwy
       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} ]`)) {
+      // Aktualizacja notatki
+      if (item.note) {
         if (!noteEl) {
           const newNote = document.createElement('small');
           newNote.className = 'text-danger ms-4';
@@ -379,17 +394,17 @@ function updateListSmoothly(newItems) {
         } else {
           noteEl.innerHTML = `[ <b>${item.note}</b> ]`;
         }
-      } else if (!item.note && noteEl) {
+      } else if (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}`;
+      // Jeśli elementu brak — stwórz
+      li = document.createElement('li');
+      li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap ${item.purchased ? 'bg-success text-white' : 'item-not-checked'}`;
+      li.id = `item-${item.id}`;
 
-      newLi.innerHTML = `
+      li.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>
@@ -400,10 +415,15 @@ function updateListSmoothly(newItems) {
           <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${item.id})">🗑️</button>
         </div>
       `;
-
-      itemsContainer.appendChild(newLi);
     }
+
+    // Dodaj do fragmentu (czyli nowej, poprawnej kolejności)
+    fragment.appendChild(li);
   });
 
+  // Wyczyść kontener i wstaw nową wersję
+  itemsContainer.innerHTML = '';
+  itemsContainer.appendChild(fragment);
+
   updateProgressBar();
 }