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

commit #1

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-07-24 23:30:51 +02:00
parent 04bc3773e1
commit 34205f0e65
6 changed files with 377 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
static/js/functions.js
View File

@@ -272,8 +272,98 @@ function isListDifferent(oldItems, newItems) {
return false;
}
function updateListSmoothly(newItems) {
function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
const li = document.createElement('li');
li.id = `item-${item.id}`;
li.dataset.name = item.name.toLowerCase();
li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item ${item.purchased ? 'bg-success text-white'
: item.not_purchased ? 'bg-warning text-dark'
: 'item-not-checked'
}`;
let quantityBadge = '';
if (item.quantity && item.quantity > 1) {
quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
}
let checkboxOrIcon = item.not_purchased
? `<span class="ms-1 block-icon">🚫</span>`
: `<input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''}>`;
let noteHTML = item.note
? `<small class="text-danger ms-4">[ <b>${item.note}</b> ]</small>` : '';
let reasonHTML = item.not_purchased_reason
? `<small class="text-dark ms-4">[ <b>Powód: ${item.not_purchased_reason}</b> ]</small>` : '';
let left = `
<div class="d-flex align-items-center gap-2 flex-grow-1">
${window.isSorting ? `<span class="drag-handle me-2 text-danger" style="cursor: grab;">☰</span>` : ''}
${checkboxOrIcon}
<span id="name-${item.id}" class="text-white">${item.name} ${quantityBadge}</span>
${noteHTML}
${reasonHTML}
</div>`;
let rightButtons = '';
// ✏️ i 🗑️ — tylko jeśli nie jesteśmy w trybie /share lub jesteśmy w 15s (tymczasowo)
if (!isShare || showEditOnly) {
rightButtons += `
<button type="button" class="btn btn-outline-light"
onclick="editItem(${item.id}, '${item.name.replace(/'/g, "\\'")}', ${item.quantity || 1})">
✏️
</button>
<button type="button" class="btn btn-outline-light"
onclick="deleteItem(${item.id})">
🗑️
</button>`;
}
// ✅ Jeśli element jest oznaczony jako niekupiony — pokaż "Przywróć"
if (item.not_purchased) {
rightButtons += `
<button type="button" class="btn btn-outline-light me-auto"
onclick="unmarkNotPurchased(${item.id})">
✅ Przywróć
</button>`;
}
// ⚠️ tylko jeśli NIE jest oznaczony jako niekupiony i nie jesteśmy w 15s
if (!item.not_purchased && !showEditOnly) {
rightButtons += `
<button type="button" class="btn btn-outline-light"
onclick="markNotPurchasedModal(event, ${item.id})">
⚠️
</button>`;
}
// 📝 tylko jeśli jesteśmy w /share i nie jesteśmy w 15s
if (isShare && !showEditOnly) {
rightButtons += `
<button type="button" class="btn btn-outline-light"
onclick="openNoteModal(event, ${item.id})">
📝
</button>`;
}
li.innerHTML = `${left}<div class="btn-group btn-group-sm" role="group">${rightButtons}</div>`;
if (item.added_by && item.owner_id && item.added_by_id && item.added_by_id !== item.owner_id) {
const infoEl = document.createElement('small');
infoEl.className = 'text-info ms-4';
infoEl.innerHTML = `[Dodane przez: <b>${item.added_by}</b>]`;
li.querySelector('.d-flex.align-items-center')?.appendChild(infoEl);
}
return li;
}
function updateListSmoothly(newItems) {
const itemsContainer = document.getElementById('items');
const existingItemsMap = new Map();
@@ -285,68 +375,7 @@ function updateListSmoothly(newItems) {
const fragment = document.createDocumentFragment();
newItems.forEach(item => {
let li = existingItemsMap.get(item.id);
let quantityBadge = '';
if (item.quantity && item.quantity > 1) {
quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
}
if (!li) {
li = document.createElement('li');
li.id = `item-${item.id}`;
}
// Klasy tła
li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item ${item.purchased ? 'bg-success text-white' :
item.not_purchased ? 'bg-warning text-dark' : 'item-not-checked'
}`;
// Wewnętrzny HTML
li.innerHTML = `
<div class="d-flex align-items-center gap-2 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' : ''}>
` : `
<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>
<div class="btn-group btn-group-sm" role="group">
${item.not_purchased ? `
<button type="button" class="btn btn-outline-light me-auto"
onclick="unmarkNotPurchased(${item.id})">
✅ Przywróć
</button>
` : `
<button type="button" class="btn btn-outline-light"
onclick="markNotPurchasedModal(event, ${item.id})">
⚠️
</button>
${window.IS_SHARE ? `
<button type="button" class="btn btn-outline-light"
onclick="openNoteModal(event, ${item.id})">
📝
</button>
` : ''}
`}
${!window.IS_SHARE ? `
<button type="button" class="btn btn-outline-light"
onclick="editItem(${item.id}, '${item.name.replace(/'/g, "\\'")}', ${item.quantity || 1})">
✏️
</button>
<button type="button" class="btn btn-outline-light"
onclick="deleteItem(${item.id})">
🗑️
</button>
` : ''}
</div>
`;
const li = renderItem(item);
fragment.appendChild(li);
});

96
static/js/live.js
View File

@@ -127,69 +127,59 @@ function setupList(listId, username) {
showToast(`Dodano wydatek: ${data.amount.toFixed(2)} PLN`, 'info');
});
socket.on('item_added', data => {
showToast(`${data.added_by} dodał: ${data.name}`, 'info');
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}`;
let quantityBadge = '';
if (data.quantity && data.quantity > 1) {
quantityBadge = `<span class="badge bg-secondary">x${data.quantity}</span>`;
}
const countdownId = `countdown-${data.id}`;
const countdownBtn = `
<button type="button" class="btn btn-outline-warning" id="${countdownId}" disabled>15s</button>
`;
li.innerHTML = `
<div class="d-flex align-items-center flex-wrap gap-2 flex-grow-1">
<input class="large-checkbox" type="checkbox">
<span id="name-${data.id}" class="text-white">
${data.name} ${quantityBadge}
</span>
</div>
<div class="btn-group btn-group-sm" role="group">
${countdownBtn}
<button type="button" class="btn btn-outline-light"
onclick="editItem(${data.id}, '${data.name.replace(/'/g, "\\'")}', ${data.quantity || 1})">
✏️
</button>
<button type="button" class="btn btn-outline-light"
onclick="deleteItem(${data.id})">
🗑️
</button>
</div>
`;
const item = {
...data,
purchased: false,
not_purchased: false,
not_purchased_reason: '',
note: ''
};
const li = renderItem(item, false, true); // ← tryb 15s
document.getElementById('items').appendChild(li);
toggleEmptyPlaceholder();
updateProgressBar();
// ⏳ Licznik odliczania
let seconds = 15;
const countdownEl = document.getElementById(countdownId);
const intervalId = setInterval(() => {
seconds--;
if (countdownEl) {
countdownEl.textContent = `${seconds}s`;
}
if (seconds <= 0) {
clearInterval(intervalId);
if (countdownEl) countdownEl.remove();
}
}, 1000);
if (window.IS_SHARE) {
const countdownId = `countdown-${data.id}`;
const countdownBtn = document.createElement('button');
countdownBtn.type = 'button';
countdownBtn.className = 'btn btn-outline-warning';
countdownBtn.id = countdownId;
countdownBtn.disabled = true;
countdownBtn.textContent = '15s';
// 🔁 Request listy po 15s
setTimeout(() => {
if (window.LIST_ID) {
socket.emit('request_full_list', { list_id: window.LIST_ID });
}
}, 15000);
li.querySelector('.btn-group')?.prepend(countdownBtn);
let seconds = 15;
const intervalId = setInterval(() => {
const el = document.getElementById(countdownId);
if (el) {
seconds--;
el.textContent = `${seconds}s`;
if (seconds <= 0) {
el.remove();
clearInterval(intervalId);
}
} else {
clearInterval(intervalId);
}
}, 1000);
setTimeout(() => {
const existing = document.getElementById(`item-${data.id}`);
if (existing) {
const updated = renderItem(item, true);
existing.replaceWith(updated);
}
}, 15000);
}
});
socket.on('item_deleted', data => {
const li = document.getElementById(`item-${data.item_id}`);
if (li) {

103
static/js/user_expense_lists.js Normal file
View File

@@ -0,0 +1,103 @@
document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('.list-checkbox');
const totalEl = document.getElementById('listsTotal');
const filterButtons = document.querySelectorAll('.filter-btn');
const rows = document.querySelectorAll('#listsTableBody tr');
const onlyWith = document.getElementById('onlyWithExpenses');
const customStart = document.getElementById('customStart');
const customEnd = document.getElementById('customEnd');
function updateTotal() {
let total = 0;
checkboxes.forEach(cb => {
const row = cb.closest('tr');
if (cb.checked && row.style.display !== 'none') {
total += parseFloat(cb.dataset.amount);
}
});
totalEl.textContent = total.toFixed(2) + ' PLN';
totalEl.parentElement.classList.add('animate__animated', 'animate__fadeIn');
setTimeout(() => {
totalEl.parentElement.classList.remove('animate__animated', 'animate__fadeIn');
}, 400);
}
checkboxes.forEach(cb => cb.addEventListener('change', updateTotal));
filterButtons.forEach(btn => {
btn.addEventListener('click', () => {
filterButtons.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const range = btn.dataset.range;
const now = new Date();
const todayStr = now.toISOString().slice(0, 10);
const year = now.getFullYear();
const month = now.toISOString().slice(0, 7);
const week = `${year}-${String(getISOWeek(now)).padStart(2, '0')}`;
rows.forEach(row => {
const rDate = row.dataset.date;
const rMonth = row.dataset.month;
const rWeek = row.dataset.week;
const rYear = row.dataset.year;
let show = true;
if (range === 'day') show = rDate === todayStr;
if (range === 'month') show = rMonth === month;
if (range === 'week') show = rWeek === week;
if (range === 'year') show = rYear === String(year);
row.style.display = show ? '' : 'none';
});
applyExpenseFilter();
updateTotal();
});
});
// ISO week helper
function getISOWeek(date) {
const target = new Date(date.valueOf());
const dayNr = (date.getDay() + 6) % 7;
target.setDate(target.getDate() - dayNr + 3);
const firstThursday = new Date(target.getFullYear(), 0, 4);
const dayDiff = (target - firstThursday) / 86400000;
return 1 + Math.floor(dayDiff / 7);
}
// Zakres dat: kliknij „Zastosuj zakres”
document.getElementById('applyCustomRange').addEventListener('click', () => {
const start = customStart.value;
const end = customEnd.value;
filterButtons.forEach(b => b.classList.remove('active'));
rows.forEach(row => {
const date = row.dataset.date;
const show = (!start || date >= start) && (!end || date <= end);
row.style.display = show ? '' : 'none';
});
applyExpenseFilter();
updateTotal();
});
// Filtrowanie tylko list z wydatkami
if (onlyWith) {
onlyWith.addEventListener('change', () => {
applyExpenseFilter();
updateTotal();
});
}
function applyExpenseFilter() {
if (!onlyWith || !onlyWith.checked) return;
rows.forEach(row => {
const amt = parseFloat(row.querySelector('.list-checkbox').dataset.amount || 0);
if (amt <= 0) row.style.display = 'none';
});
}
});