diff --git a/static/js/mass_add.js b/static/js/mass_add.js
index 69c7769..8f19744 100644
--- a/static/js/mass_add.js
+++ b/static/js/mass_add.js
@@ -3,8 +3,8 @@ document.addEventListener('DOMContentLoaded', function () {
const productList = document.getElementById('mass-add-list');
const sortBar = document.getElementById('sort-bar');
const productCountDisplay = document.getElementById('product-count');
+ const modalBody = modal?.querySelector('.modal-body');
- // Normalizacja nazw
function normalize(str) {
return str ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase() : '';
}
@@ -52,21 +52,47 @@ document.addEventListener('DOMContentLoaded', function () {
async function fetchProducts(reset = false) {
if (loading || reachedEnd) return;
loading = true;
+
+ if (!reset) {
+ const loadingLi = document.createElement('li');
+ loadingLi.className = 'list-group-item bg-dark text-light loading';
+ loadingLi.textContent = 'Ładowanie...';
+ productList.appendChild(loadingLi);
+ }
+
try {
- productList.innerHTML = '
Ładowanie...';
const res = await fetch(`/all_products?sort=${sortMode}&limit=${limit}&offset=${offset}`);
const data = await res.json();
const products = data.products || data.allproducts || [];
+
if (products.length < limit) reachedEnd = true;
allProducts = reset ? products : allProducts.concat(products);
- renderProducts(products, reset);
+
+ const loadingEl = productList.querySelector('.loading');
+ if (loadingEl) loadingEl.remove();
+
+ if (reset && products.length === 0) {
+ const emptyLi = document.createElement('li');
+ emptyLi.className = 'list-group-item text-muted bg-dark';
+ emptyLi.textContent = 'Brak produktów do wyświetlenia.';
+ productList.appendChild(emptyLi);
+ } else {
+ renderProducts(products);
+ }
+
offset += limit;
if (productCountDisplay) {
productCountDisplay.textContent = `Wyświetlono ${allProducts.length} produktów.`;
}
} catch (err) {
- productList.innerHTML = 'Błąd ładowania danych';
+ const loadingEl = productList.querySelector('.loading');
+ if (loadingEl) loadingEl.remove();
+ const errorLi = document.createElement('li');
+ errorLi.className = 'list-group-item text-danger bg-dark';
+ errorLi.textContent = 'Błąd ładowania danych';
+ productList.appendChild(errorLi);
}
+
loading = false;
}
@@ -80,8 +106,7 @@ document.addEventListener('DOMContentLoaded', function () {
return set;
}
- function renderProducts(products, reset) {
- if (reset) productList.innerHTML = '';
+ function renderProducts(products) {
addedProducts = getAlreadyAddedProducts();
products.forEach(name => {
if (typeof name === "object" && name.name) name = name.name;
@@ -132,9 +157,7 @@ document.addEventListener('DOMContentLoaded', function () {
qty.value = parseInt(qty.value) + 1;
};
- qtyWrapper.appendChild(minusBtn);
- qtyWrapper.appendChild(qty);
- qtyWrapper.appendChild(plusBtn);
+ qtyWrapper.append(minusBtn, qty, plusBtn);
const btn = document.createElement('button');
btn.className = 'btn btn-sm btn-primary ms-4';
@@ -144,30 +167,27 @@ document.addEventListener('DOMContentLoaded', function () {
socket.emit('add_item', { list_id: LIST_ID, name: name, quantity: quantity });
};
- li.appendChild(qtyWrapper);
- li.appendChild(btn);
+ li.append(qtyWrapper, btn);
}
+
productList.appendChild(li);
});
}
- // Infinite scroll
- const modalBody = modal.querySelector('.modal-body');
+ if (modalBody) {
+ modalBody.addEventListener('scroll', function () {
+ if (!loading && !reachedEnd && (modalBody.scrollTop + modalBody.clientHeight > modalBody.scrollHeight - 80)) {
+ fetchProducts(false);
+ }
+ });
+ }
- modalBody.addEventListener('scroll', function () {
- if (!loading && !reachedEnd && (modalBody.scrollTop + modalBody.clientHeight > modalBody.scrollHeight - 80)) {
- fetchProducts(false);
- }
- });
-
- // Modal otwarty
modal.addEventListener('show.bs.modal', function () {
resetAndFetchProducts();
});
renderSortBar();
- // Obsługa dodania przez socket
socket.on('item_added', data => {
document.querySelectorAll('#mass-add-list li').forEach(li => {
const itemName = li.firstChild?.textContent.trim();
@@ -194,13 +214,11 @@ document.addEventListener('DOMContentLoaded', function () {
let secondsLeft = 15;
timerBtn.textContent = `${secondsLeft}s`;
- btnGroup.appendChild(undoBtn);
- btnGroup.appendChild(timerBtn);
+ btnGroup.append(undoBtn, timerBtn);
const rightWrapper = document.createElement('div');
rightWrapper.className = 'd-flex align-items-center gap-2 ms-auto';
- rightWrapper.appendChild(btnGroup);
- rightWrapper.appendChild(badge);
+ rightWrapper.append(btnGroup, badge);
li.appendChild(rightWrapper);
const intervalId = setInterval(() => {
@@ -218,6 +236,7 @@ document.addEventListener('DOMContentLoaded', function () {
btnGroup.remove();
badge.remove();
li.classList.remove('opacity-50');
+
const qtyWrapper = document.createElement('div');
qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
@@ -268,5 +287,4 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
});
-
});