poprawki w jogice js, progressbar warstwowy i fix w notatkach

This commit is contained in:
Mateusz Gruszczyński
2025-08-06 13:42:20 +02:00
parent 6bb0c97c37
commit 3abad9e151
5 changed files with 82 additions and 70 deletions

View File

@@ -22,45 +22,33 @@ function updateItemState(itemId, isChecked) {
function updateProgressBar() {
const items = document.querySelectorAll('#items li');
const total = items.length;
const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length;
const percent = total > 0 ? Math.round((purchased / total) * 100) : 0;
const notPurchased = Array.from(items).filter(li => li.classList.contains('bg-warning')).length;
const remaining = total - purchased - notPurchased;
// Pasek postępu
const progressBar = document.getElementById('progress-bar');
if (progressBar) {
progressBar.style.width = `${percent}%`;
progressBar.setAttribute('aria-valuenow', percent);
progressBar.textContent = percent > 0 ? `${percent}%` : ''; // opcjonalnie
}
const percentPurchased = total > 0 ? (purchased / total) * 100 : 0;
const percentNotPurchased = total > 0 ? (notPurchased / total) * 100 : 0;
const percentRemaining = total > 0 ? (remaining / total) * 100 : 0;
// Label na pasku postępu
document.getElementById('progress-bar-purchased').style.width = `${percentPurchased}%`;
document.getElementById('progress-bar-not-purchased').style.width = `${percentNotPurchased}%`;
document.getElementById('progress-bar-remaining').style.width = `${percentRemaining}%`;
// etykieta
const progressLabel = document.getElementById('progress-label');
if (progressLabel) {
progressLabel.textContent = `${percent}%`;
if (percent === 0) {
progressLabel.style.display = 'inline';
} else {
progressLabel.style.display = 'none';
}
// Kolor tekstu labela
if (percent < 50) {
progressLabel.classList.remove('text-dark');
progressLabel.classList.add('text-white');
} else {
progressLabel.classList.remove('text-white');
progressLabel.classList.add('text-dark');
}
}
const percent = total > 0 ? Math.round((purchased / total) * 100) : 0;
progressLabel.textContent = `${percent}%`;
progressLabel.classList.toggle('text-white', percent < 50);
progressLabel.classList.toggle('text-dark', percent >= 50);
// Nagłówek
const purchasedCount = document.getElementById('purchased-count');
if (purchasedCount) purchasedCount.textContent = purchased;
const totalCount = document.getElementById('total-count');
if (totalCount) totalCount.textContent = total;
const percentValue = document.getElementById('percent-value');
if (percentValue) percentValue.textContent = percent;
// liczniki
document.getElementById('purchased-count').textContent = purchased;
document.getElementById('total-count').textContent = total;
document.getElementById('percent-value').textContent = percent;
}
function addItem(listId) {
const name = document.getElementById('newItem').value;
const quantityInput = document.getElementById('newQuantity');
@@ -179,7 +167,6 @@ function openList(link) {
}
function applyHidePurchased(isInit = false) {
//console.log("applyHidePurchased: wywołana, isInit =", isInit);
const toggle = document.getElementById('hidePurchasedToggle');
if (!toggle) return;
const hide = toggle.checked;
@@ -187,9 +174,11 @@ function applyHidePurchased(isInit = false) {
const items = document.querySelectorAll('#items li');
items.forEach(li => {
const isPurchased = li.classList.contains('bg-success');
const isCheckedItem =
li.classList.contains('bg-success') || // kupione
li.classList.contains('bg-warning'); // niekupione
if (isPurchased) {
if (isCheckedItem) {
if (hide) {
if (isInit) {
// Jeśli inicjalizacja: od razu ukryj
@@ -210,7 +199,7 @@ function applyHidePurchased(isInit = false) {
}, 10);
}
} else {
// Element niekupiony — zawsze pokazany
// Element nieoznaczony — zawsze pokazany
li.classList.remove('hide-purchased', 'fade-out');
}
});

View File

@@ -205,21 +205,10 @@ function setupList(listId, username) {
});
socket.on('note_updated', data => {
const idx = window.currentItems.findIndex(i => i.id === data.item_id);
if (idx !== -1) {
window.currentItems[idx].note = data.note;
const newItem = renderItem(window.currentItems[idx], true);
const oldItem = document.getElementById(`item-${data.item_id}`);
if (oldItem && newItem) {
oldItem.replaceWith(newItem);
}
}
socket.emit('request_full_list', { list_id: window.LIST_ID });
showToast('Notatka dodana/zaktualizowana', 'success');
});
socket.on('item_edited', data => {
const idx = window.currentItems.findIndex(i => i.id === data.item_id);
if (idx !== -1) {