nowa funckcja zmiana kolejnosci produktów

static/js/functions.js

@@ -179,7 +179,7 @@ function openList(link) {
 }
 
 function applyHidePurchased(isInit = false) {
-  console.log("applyHidePurchased: wywołana, isInit =", isInit);
+  //console.log("applyHidePurchased: wywołana, isInit =", isInit);
   const toggle = document.getElementById('hidePurchasedToggle');
   if (!toggle) return;
   const hide = toggle.checked;
@@ -273,6 +273,7 @@ function isListDifferent(oldItems, newItems) {
 }
 
 function updateListSmoothly(newItems) {
+
   const itemsContainer = document.getElementById('items');
   const existingItemsMap = new Map();
 
@@ -292,7 +293,6 @@ function updateListSmoothly(newItems) {
 
     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}`;
     }
 
@@ -301,9 +301,10 @@ function updateListSmoothly(newItems) {
       item.not_purchased ? 'bg-warning text-dark' : 'item-not-checked'
       }`;
 
-    // HTML wewnętrzny
+    // Wewnętrzny HTML
     li.innerHTML = `
       <div class="d-flex align-items-center gap-3 flex-grow-1">
+        ${isSorting ? `<span class="drag-handle me-2 text-danger" style="cursor: grab;">☰</span>` : ''}
         ${!item.not_purchased ? `
           <input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" 
             ${item.purchased ? 'checked' : ''}>
@@ -311,6 +312,7 @@ function updateListSmoothly(newItems) {
           <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>` : ''}
         ${item.not_purchased_reason ? `<small class="text-dark ms-4">[ <b>Powód: ${item.not_purchased_reason}</b> ]</small>` : ''}
       </div>

static/js/sockets.js

@@ -103,6 +103,20 @@ socket.on('receipt_added', function (data) {
   }
 });
 
+socket.on("items_reordered", data => {
+  if (data.list_id !== window.LIST_ID) return;
+
+  if (window.currentItems) {
+    window.currentItems = data.order.map(id =>
+      window.currentItems.find(item => item.id === id)
+    ).filter(Boolean);
+
+    updateListSmoothly(window.currentItems);
+    //showToast('Kolejność produktów zaktualizowana', 'info');
+  }
+});
+
+
 socket.on('full_list', function (data) {
   const itemsContainer = document.getElementById('items');
 
@@ -112,6 +126,7 @@ socket.on('full_list', function (data) {
 
   const isDifferent = isListDifferent(oldItems, data.items);
 
+  window.currentItems = data.items;
   updateListSmoothly(data.items);
   toggleEmptyPlaceholder();
 

static/js/sort_mode.js

@@ -0,0 +1,83 @@
+let sortable = null;
+let isSorting = false;
+
+function enableSortMode() {
+    if (sortable || isSorting) return;
+    isSorting = true;
+    localStorage.setItem('sortModeEnabled', 'true');
+
+    const itemsContainer = document.getElementById('items');
+    const listId = window.LIST_ID;
+
+    if (!itemsContainer || !listId) return;
+
+    sortable = Sortable.create(itemsContainer, {
+        animation: 150,
+        handle: '.drag-handle',
+        ghostClass: 'drag-ghost',
+        filter: 'input, button',
+        preventOnFilter: false,
+        onEnd: function () {
+            const order = Array.from(itemsContainer.children)
+                .map(li => parseInt(li.id.replace('item-', '')))
+                .filter(id => !isNaN(id));
+
+            fetch('/reorder_items', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ list_id: listId, order })
+            }).then(() => {
+                showToast('Zapisano nową kolejność', 'success');
+
+                if (window.currentItems) {
+                    window.currentItems = order.map(id =>
+                        window.currentItems.find(item => item.id === id)
+                    );
+                    updateListSmoothly(window.currentItems);
+                }
+            });
+        }
+    });
+
+    const btn = document.getElementById('sort-toggle-btn');
+    if (btn) {
+        btn.textContent = '✔️ Zakończ sortowanie';
+        btn.classList.remove('btn-outline-warning');
+        btn.classList.add('btn-outline-success');
+    }
+
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+}
+
+function disableSortMode() {
+    if (sortable) {
+        sortable.destroy();
+        sortable = null;
+    }
+    isSorting = false;
+    localStorage.removeItem('sortModeEnabled');
+
+    const btn = document.getElementById('sort-toggle-btn');
+    if (btn) {
+        btn.textContent = '✳️ Zmień kolejność';
+        btn.classList.remove('btn-outline-success');
+        btn.classList.add('btn-outline-warning');
+    }
+
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+}
+
+function toggleSortMode() {
+    isSorting ? disableSortMode() : enableSortMode();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const wasSorting = localStorage.getItem('sortModeEnabled') === 'true';
+    if (wasSorting) {
+        enableSortMode();
+    }
+});