masowe dodawanie produktow
This commit is contained in:
@@ -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
88
static/js/mass_add.js
Normal 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">✓</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">✓</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());
|
||||
});
|
||||
});
|
Reference in New Issue
Block a user