gru/lista_zakupowa_live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux i poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-07-02 12:51:30 +02:00
parent bb4fe3815f
commit 85446f950c
7 changed files with 96 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/js/live.js
View File

@ -14,25 +14,41 @@ function setupList(listId, username) {
});
}
const itemsContainer = document.getElementById('items');
// Delegacja zdarzenia checkboxów
itemsContainer.addEventListener('change', function (e) {
if (e.target && e.target.type === 'checkbox') {
const li = e.target.closest('li');
if (li) {
const id = parseInt(li.id.replace('item-', ''), 10);
if (e.target.checked) {
socket.emit('check_item', { item_id: id });
} else {
socket.emit('uncheck_item', { item_id: id });
}
}
}
});
socket.on('user_joined', data => showToast(`${data.username} dołączył do listy`));
socket.on('item_added', data => {
showToast(`${data.added_by} dodał: ${data.name}`);
const list = document.getElementById('items');
const li = document.createElement('li');
li.className = 'list-group-item bg-dark text-white d-flex justify-content-between align-items-center';
li.className = 'list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap';
li.id = `item-${data.id}`;
li.innerHTML = `
<div>
<input type="checkbox" onchange="checkItem(${data.id})">
<div class="d-flex align-items-center flex-wrap gap-2">
<input type="checkbox">
<span id="name-${data.id}">${data.name}</span>
</div>
<div>
<button class="btn btn-sm btn-warning" onclick="editItem(${data.id}, '${data.name}')">Edytuj</button>
<button class="btn btn-sm btn-danger" onclick="deleteItem(${data.id})">Usuń</button>
<div class="mt-2 mt-md-0">
<button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}')">✏️ Edytuj</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️ Usuń</button>
</div>
`;
list.appendChild(li);
itemsContainer.appendChild(li);
});
socket.on('item_checked', data => {
@ -42,6 +58,13 @@ function setupList(listId, username) {
}
});
socket.on('item_unchecked', data => {
const checkbox = document.querySelector(`#item-${data.item_id} input[type='checkbox']`);
if (checkbox) {
checkbox.checked = false;
}
});
socket.on('item_deleted', data => {
const li = document.getElementById(`item-${data.item_id}`);
if (li) {
@ -67,10 +90,6 @@ function addItem(listId) {
document.getElementById('newItem').focus();
}
function checkItem(id) {
socket.emit('check_item', { item_id: id });
}
function deleteItem(id) {
if (confirm('Na pewno usunąć produkt?')) {
socket.emit('delete_item', { item_id: id });