update listy jak sie zmieni

static/js/live.js

@@ -343,13 +343,11 @@ function updateListSmoothly(newItems) {
   const itemsContainer = document.getElementById('items');
   const existingItemsMap = new Map();
 
-  // Zbuduj mapę istniejących elementów
   Array.from(itemsContainer.querySelectorAll('li')).forEach(li => {
     const id = parseInt(li.id.replace('item-', ''), 10);
     existingItemsMap.set(id, li);
   });
 
-  // Tworzymy nowy "fragment", żeby od razu wstawić całość
   const fragment = document.createDocumentFragment();
 
   newItems.forEach(item => {
@@ -359,32 +357,31 @@ function updateListSmoothly(newItems) {
       quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
     }
 
-    // Jeśli element istnieje — aktualizuj
     if (li) {
+      // Checkbox
       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;
+        checkbox.disabled = false; // Zdejmij disabled jeśli było
       }
 
-      // Aktualizacja klas
-      li.classList.remove('bg-success', 'text-white', 'item-not-checked');
+      // Klasy
+      li.classList.remove('bg-success', 'text-white', 'item-not-checked', 'opacity-50');
       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;
+      // Nazwa
+      const nameSpan = li.querySelector(`#name-${item.id}`);
+      const expectedName = `${item.name} ${quantityBadge}`.trim();
+      if (nameSpan && nameSpan.innerHTML.trim() !== expectedName) {
+        nameSpan.innerHTML = expectedName;
       }
 
-      // Aktualizacja notatki
+      // Notatka
+      let noteEl = li.querySelector('small');
       if (item.note) {
         if (!noteEl) {
           const newNote = document.createElement('small');
@@ -398,30 +395,30 @@ function updateListSmoothly(newItems) {
         noteEl.remove();
       }
 
+      // Usuń spinner jeśli był
+      const sp = li.querySelector('.spinner-border');
+      if (sp) sp.remove();
+
     } else {
-      // Jeśli elementu brak — stwórz
+      // Twórz nowy element
       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}`;
 
       li.innerHTML = `
-        <div class="d-flex align-items-center flex-wrap gap-2">
+        <div class="d-flex align-items-center gap-3 flex-grow-1">
           <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>
+        <button type="button" class="btn btn-sm btn-outline-info" onclick="openNoteModal(event, ${item.id})">📝</button>
       `;
     }
 
-    // Dodaj do fragmentu (czyli nowej, poprawnej kolejności)
     fragment.appendChild(li);
   });
 
-  // Wyczyść kontener i wstaw nową wersję
+  // Wyczyść i wstaw nowy porządek
   itemsContainer.innerHTML = '';
   itemsContainer.appendChild(fragment);