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

paginacja i poprawki uxowe

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-08-15 10:01:05 +02:00
parent 4f40bb06b3
commit b61c262179
7 changed files with 200 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
static/js/preview_list_modal.js
View File

@@ -2,10 +2,10 @@ document.addEventListener("DOMContentLoaded", function () {
const modalElement = document.getElementById("productPreviewModal");
const modal = new bootstrap.Modal(modalElement);
modalElement.addEventListener('hidden.bs.modal', function () {
document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
document.body.classList.remove('modal-open');
document.body.style.overflow = '';
modalElement.addEventListener("hidden.bs.modal", function () {
document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
document.body.classList.remove("modal-open");
document.body.style.overflow = "";
});
document.querySelectorAll(".preview-btn").forEach((btn) => {
@@ -15,7 +15,10 @@ document.addEventListener("DOMContentLoaded", function () {
const productList = document.getElementById("product-list");
modalTitle.textContent = "Ładowanie...";
productList.innerHTML = '<li class="list-group-item bg-dark text-white">⏳ Ładowanie produktów...</li>';
productList.innerHTML = `
<li class="list-group-item bg-dark text-white">
⏳ Ładowanie produktów...
</li>`;
modal.show();
@@ -26,6 +29,24 @@ document.addEventListener("DOMContentLoaded", function () {
modalTitle.textContent = `🛒 ${data.title}`;
productList.innerHTML = "";
// 🔢 PODSUMOWANIE
const summary = document.createElement("div");
summary.className = "mb-3";
const percent =
data.total_count > 0
? Math.round((data.purchased_count / data.total_count) * 100)
: 0;
summary.innerHTML = `
<p class="mb-1">📦 <strong>${data.total_count}</strong> produktów</p>
<p class="mb-1">✅ Kupione: <strong>${data.purchased_count}</strong> (${percent}%)</p>
<p class="mb-1">💸 Wydatek: <strong>${data.total_expense.toFixed(2)} zł</strong></p>
<hr class="my-2">
`;
productList.appendChild(summary);
// 🛒 LISTY PRODUKTÓW
const purchasedList = document.createElement("ul");
purchasedList.className = "list-group list-group-flush mb-3";
@@ -35,14 +56,20 @@ document.addEventListener("DOMContentLoaded", function () {
let hasPurchased = false;
let hasUnpurchased = false;
data.items.forEach(item => {
data.items.forEach((item) => {
const li = document.createElement("li");
li.className = "list-group-item bg-dark text-white d-flex justify-content-between";
li.className =
"list-group-item bg-dark text-white d-flex justify-content-between";
li.innerHTML = `
<span>${item.name}</span>
<span class="badge ${item.purchased ? 'bg-success' : item.not_purchased ? 'bg-warning text-dark' : 'bg-secondary'}">
x${item.quantity}
</span>`;
<span>${item.name}</span>
<span class="badge ${item.purchased
? "bg-success"
: item.not_purchased
? "bg-warning text-dark"
: "bg-secondary"
}">
x${item.quantity}
</span>`;
if (item.purchased) {
purchasedList.appendChild(li);
@@ -68,13 +95,18 @@ document.addEventListener("DOMContentLoaded", function () {
}
if (!hasPurchased && !hasUnpurchased) {
productList.innerHTML = '<li class="list-group-item bg-dark text-muted fst-italic">Brak produktów</li>';
productList.innerHTML = `
<li class="list-group-item bg-dark text-muted fst-italic">
Brak produktów
</li>`;
}
} catch (err) {
modalTitle.textContent = "Błąd";
productList.innerHTML = '<li class="list-group-item bg-dark text-danger">❌ Błąd podczas ładowania</li>';
productList.innerHTML = `
<li class="list-group-item bg-dark text-danger">
❌ Błąd podczas ładowania
</li>`;
}
});
});
});
});