poprawki w jogice js, progressbar warstwowy i fix w notatkach
This commit is contained in:
@@ -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');
|
||||
}
|
||||
});
|
||||
|
@@ -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) {
|
||||
|
Reference in New Issue
Block a user