masowe dodawanie produktow

This commit is contained in:
Mateusz Gruszczyński
2025-07-08 23:15:13 +02:00
parent 0700affb4e
commit ffe5f5aca6
5 changed files with 180 additions and 5 deletions

View File

@@ -192,4 +192,24 @@ input.form-control {
opacity: 1;
transform: translateY(0);
}
}
}
#mass-add-list li.active {
background: #198754 !important;
color: #fff !important;
font-weight: bold;
}
#mass-add-list li {
transition: background 0.2s;
}
.quantity-input {
width: 60px;
background: #343a40;
color: #fff;
border: 1px solid #495057;
border-radius: 4px;
text-align: center;
}
.add-btn {
margin-left: 10px;
}

88
static/js/mass_add.js Normal file
View File

@@ -0,0 +1,88 @@
document.addEventListener('DOMContentLoaded', function () {
const modal = document.getElementById('massAddModal');
const productList = document.getElementById('mass-add-list');
let addedProducts = new Set();
document.querySelectorAll('#items li').forEach(li => {
if (li.dataset.name) addedProducts.add(li.dataset.name.toLowerCase());
});
modal.addEventListener('show.bs.modal', async function () {
productList.innerHTML = '<li class="list-group-item bg-dark text-light">Ładowanie...</li>';
try {
const res = await fetch('/all_products');
const suggestions = await res.json();
productList.innerHTML = '';
suggestions.forEach(name => {
const li = document.createElement('li');
li.className = 'list-group-item d-flex justify-content-between align-items-center bg-dark text-light';
li.textContent = name;
if (addedProducts.has(name.toLowerCase())) {
li.classList.add('active');
li.innerHTML += '<span class="ms-2 text-success">&#10003;</span>';
} else {
// Pole do ilości
const qty = document.createElement('input');
qty.type = 'number';
qty.min = 1;
qty.value = 1;
qty.className = 'quantity-input ms-2';
qty.title = 'Ilość';
// Przycisk dodania
const btn = document.createElement('button');
btn.className = 'btn btn-sm btn-primary add-btn';
btn.textContent = '+';
btn.onclick = () => {
const quantity = parseInt(qty.value) || 1;
socket.emit('add_item', { list_id: LIST_ID, name: name, quantity: quantity });
};
li.textContent = name;
li.appendChild(qty);
li.appendChild(btn);
}
productList.appendChild(li);
});
} catch (err) {
productList.innerHTML = '<li class="list-group-item text-danger bg-dark">Błąd ładowania danych</li>';
}
});
socket.on('item_added', data => {
document.querySelectorAll('#mass-add-list li').forEach(li => {
if (li.textContent.trim().startsWith(data.name) && !li.classList.contains('active')) {
li.classList.add('active');
li.innerHTML = `${data.name} <span class="ms-2 text-success">&#10003;</span>`;
li.onclick = null;
}
});
const itemsContainer = document.getElementById('items');
if (!itemsContainer) return;
if (document.getElementById(`item-${data.id}`)) return;
const li = document.createElement('li');
li.className = 'list-group-item d-flex justify-content-between align-items-center flex-wrap item-not-checked';
li.id = `item-${data.id}`;
li.dataset.name = data.name;
let quantityBadge = '';
if (data.quantity && data.quantity > 1) {
quantityBadge = `<span class="badge bg-secondary ms-2">${data.quantity}×</span>`;
}
li.innerHTML = `
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check-${data.id}">
<label class="form-check-label" for="check-${data.id}">
${data.name}
</label>
${quantityBadge}
</div>
`;
itemsContainer.appendChild(li);
addedProducts.add(data.name.toLowerCase());
});
});