funkcja_niekupione #2
@@ -20,4 +20,7 @@ AUTHORIZED_COOKIE_VALUE=twoj_wlasny_hash
|
||||
AUTH_COOKIE_MAX_AGE=86400
|
||||
|
||||
# dla compose
|
||||
HEALTHCHECK_TOKEN=alamapsaikota123
|
||||
HEALTHCHECK_TOKEN=alamapsaikota123
|
||||
|
||||
# sesja zalogowanego usera (domyślnie 7 dni)
|
||||
SESSION_TIMEOUT_MINUTES=10080
|
||||
@@ -28,6 +28,12 @@ ALTER TABLE shopping_list ADD COLUMN is_public BOOLEAN NOT NULL DEFAULT 1;
|
||||
# ilośc produktów
|
||||
ALTER TABLE item ADD COLUMN quantity INTEGER DEFAULT 1;
|
||||
|
||||
#licznik najczesciej kupowanych reczy
|
||||
# licznik najczesciej kupowanych reczy
|
||||
ALTER TABLE suggested_product ADD COLUMN usage_count INTEGER DEFAULT 0;
|
||||
|
||||
# funkcja niekupione
|
||||
ALTER TABLE item ADD COLUMN not_purchased_reason TEXT;
|
||||
ALTER TABLE item ADD COLUMN not_purchased BOOLEAN DEFAULT 0;
|
||||
|
||||
# funkcja sortowania
|
||||
ALTER TABLE item ADD COLUMN position INTEGER DEFAULT 0;
|
||||
|
||||
@@ -10,4 +10,5 @@ class Config:
|
||||
UPLOAD_FOLDER = os.environ.get('UPLOAD_FOLDER', 'uploads')
|
||||
AUTHORIZED_COOKIE_VALUE = os.environ.get('AUTHORIZED_COOKIE_VALUE', 'cookievalue')
|
||||
AUTH_COOKIE_MAX_AGE = int(os.environ.get('AUTH_COOKIE_MAX_AGE', 86400))
|
||||
HEALTHCHECK_TOKEN = os.environ.get('HEALTHCHECK_TOKEN', 'alamapsaikota1234')
|
||||
HEALTHCHECK_TOKEN = os.environ.get('HEALTHCHECK_TOKEN', 'alamapsaikota1234')
|
||||
SESSION_TIMEOUT_MINUTES = int(os.environ.get('SESSION_TIMEOUT_MINUTES', 10080))
|
||||
@@ -21,5 +21,6 @@ services:
|
||||
- AUTHORIZED_COOKIE_VALUE=${AUTHORIZED_COOKIE_VALUE}
|
||||
- AUTH_COOKIE_MAX_AGE=${AUTH_COOKIE_MAX_AGE}
|
||||
- HEALTHCHECK_TOKEN=${HEALTHCHECK_TOKEN}
|
||||
- SESSION_TIMEOUT_MINUTES=${SESSION_TIMEOUT_MINUTES}
|
||||
volumes:
|
||||
- .:/app
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.clickable-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -38,7 +39,8 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none; /* klikalne przyciski obok paska nie ucierpią */
|
||||
pointer-events: none;
|
||||
/* klikalne przyciski obok paska nie ucierpią */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -53,7 +55,7 @@
|
||||
|
||||
/* --- Styl przycisku wyboru pliku --- */
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: #225d36;
|
||||
background-color: #225d36;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
@@ -69,16 +71,19 @@ input[type="file"]::file-selector-button {
|
||||
color: #eaffea !important;
|
||||
border-color: #174428 !important;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #7a1f23 !important;
|
||||
color: #ffeaea !important;
|
||||
border-color: #531417 !important;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #1d3a4d !important;
|
||||
color: #eaf6ff !important;
|
||||
border-color: #152837 !important;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #665c1e !important;
|
||||
color: #fffbe5 !important;
|
||||
@@ -86,35 +91,50 @@ input[type="file"]::file-selector-button {
|
||||
}
|
||||
|
||||
/* Badge - kolory pasujące do ciemnych alertów */
|
||||
.badge.bg-success, .badge.text-bg-success {
|
||||
.badge.bg-success,
|
||||
.badge.text-bg-success {
|
||||
background-color: #225d36 !important;
|
||||
color: #eaffea !important;
|
||||
}
|
||||
.badge.bg-danger, .badge.text-bg-danger {
|
||||
|
||||
.badge.bg-danger,
|
||||
.badge.text-bg-danger {
|
||||
background-color: #7a1f23 !important;
|
||||
color: #ffeaea !important;
|
||||
}
|
||||
.badge.bg-info, .badge.text-bg-info {
|
||||
|
||||
.badge.bg-info,
|
||||
.badge.text-bg-info {
|
||||
background-color: #1d3a4d !important;
|
||||
color: #eaf6ff !important;
|
||||
}
|
||||
.badge.bg-warning, .badge.text-bg-warning {
|
||||
|
||||
.badge.bg-warning,
|
||||
.badge.text-bg-warning {
|
||||
background-color: #665c1e !important;
|
||||
color: #fffbe5 !important;
|
||||
}
|
||||
.badge.bg-secondary, .badge.text-bg-secondary {
|
||||
|
||||
.badge.bg-secondary,
|
||||
.badge.text-bg-secondary {
|
||||
background-color: #343a40 !important;
|
||||
color: #e2e3e5 !important;
|
||||
}
|
||||
.badge.bg-primary, .badge.text-bg-primary {
|
||||
|
||||
.badge.bg-primary,
|
||||
.badge.text-bg-primary {
|
||||
background-color: #184076 !important;
|
||||
color: #e6f0ff !important;
|
||||
}
|
||||
.badge.bg-light, .badge.text-bg-light {
|
||||
|
||||
.badge.bg-light,
|
||||
.badge.text-bg-light {
|
||||
background-color: #444950 !important;
|
||||
color: #f8f9fa !important;
|
||||
}
|
||||
.badge.bg-dark, .badge.text-bg-dark {
|
||||
|
||||
.badge.bg-dark,
|
||||
.badge.text-bg-dark {
|
||||
background-color: #181a1b !important;
|
||||
color: #f8f9fa !important;
|
||||
}
|
||||
@@ -157,6 +177,7 @@ input[type="checkbox"].large-checkbox:disabled::before {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type="checkbox"].large-checkbox:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -223,6 +244,7 @@ input.form-control {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@@ -232,11 +254,13 @@ input.form-control {
|
||||
#mass-add-list li.active {
|
||||
background: #198754 !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid #000000 !important;
|
||||
border: 1px solid #000000 !important;
|
||||
}
|
||||
|
||||
#mass-add-list li {
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.quantity-input {
|
||||
width: 60px;
|
||||
background: #343a40;
|
||||
@@ -245,6 +269,7 @@ input.form-control {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@@ -256,6 +281,7 @@ input.form-control {
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll('.clickable-item').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
item.addEventListener('click', function (e) {
|
||||
if (!e.target.closest('button') && e.target.tagName.toLowerCase() !== 'input') {
|
||||
const checkbox = this.querySelector('input[type="checkbox"]');
|
||||
|
||||
|
||||
20
static/js/confirm_delete.js
Normal file
20
static/js/confirm_delete.js
Normal file
@@ -0,0 +1,20 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const input = document.getElementById('confirm-delete-input');
|
||||
const button = document.getElementById('confirm-delete-btn');
|
||||
let timer = null;
|
||||
|
||||
input.addEventListener('input', function () {
|
||||
button.disabled = true;
|
||||
if (timer) clearTimeout(timer);
|
||||
|
||||
if (input.value.trim().toLowerCase() === 'usuń') {
|
||||
timer = setTimeout(() => {
|
||||
button.disabled = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
button.addEventListener('click', function () {
|
||||
document.getElementById('delete-form').submit();
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let expensesChart = null;
|
||||
const rangeLabel = document.getElementById("chartRangeLabel");
|
||||
|
||||
@@ -8,57 +8,57 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
url += `&start_date=${startDate}&end_date=${endDate}`;
|
||||
}
|
||||
|
||||
fetch(url, {cache: "no-store"})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ctx = document.getElementById('expensesChart').getContext('2d');
|
||||
fetch(url, { cache: "no-store" })
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ctx = document.getElementById('expensesChart').getContext('2d');
|
||||
|
||||
if (expensesChart) {
|
||||
expensesChart.destroy();
|
||||
}
|
||||
if (expensesChart) {
|
||||
expensesChart.destroy();
|
||||
}
|
||||
|
||||
expensesChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: 'Suma wydatków [PLN]',
|
||||
data: data.expenses,
|
||||
backgroundColor: '#0d6efd'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
expensesChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: 'Suma wydatków [PLN]',
|
||||
data: data.expenses,
|
||||
backgroundColor: '#0d6efd'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (startDate && endDate) {
|
||||
rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
|
||||
} else {
|
||||
let labelText = "";
|
||||
if (range === "monthly") labelText = "Widok: miesięczne";
|
||||
else if (range === "quarterly") labelText = "Widok: kwartalne";
|
||||
else if (range === "halfyearly") labelText = "Widok: półroczne";
|
||||
else if (range === "yearly") labelText = "Widok: roczne";
|
||||
rangeLabel.textContent = labelText;
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Błąd pobierania danych:", error);
|
||||
});
|
||||
|
||||
if (startDate && endDate) {
|
||||
rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
|
||||
} else {
|
||||
let labelText = "";
|
||||
if (range === "monthly") labelText = "Widok: miesięczne";
|
||||
else if (range === "quarterly") labelText = "Widok: kwartalne";
|
||||
else if (range === "halfyearly") labelText = "Widok: półroczne";
|
||||
else if (range === "yearly") labelText = "Widok: roczne";
|
||||
rangeLabel.textContent = labelText;
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Błąd pobierania danych:", error);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('loadExpensesBtn').addEventListener('click', function() {
|
||||
document.getElementById('loadExpensesBtn').addEventListener('click', function () {
|
||||
loadExpenses();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.range-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
const range = this.getAttribute('data-range');
|
||||
@@ -66,7 +66,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('customRangeBtn').addEventListener('click', function() {
|
||||
document.getElementById('customRangeBtn').addEventListener('click', function () {
|
||||
const startDate = document.getElementById('startDate').value;
|
||||
const endDate = document.getElementById('endDate').value;
|
||||
if (startDate && endDate) {
|
||||
@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const startDateInput = document.getElementById("startDate");
|
||||
const endDateInput = document.getElementById("endDate");
|
||||
|
||||
|
||||
@@ -19,20 +19,6 @@ function updateItemState(itemId, isChecked) {
|
||||
applyHidePurchased();
|
||||
}
|
||||
|
||||
/* 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 progressBar = document.getElementById('progress-bar');
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${percent}%`;
|
||||
progressBar.setAttribute('aria-valuenow', percent);
|
||||
progressBar.textContent = `${percent}%`;
|
||||
}
|
||||
} */
|
||||
|
||||
function updateProgressBar() {
|
||||
const items = document.querySelectorAll('#items li');
|
||||
const total = items.length;
|
||||
@@ -193,7 +179,7 @@ function openList(link) {
|
||||
}
|
||||
|
||||
function applyHidePurchased(isInit = false) {
|
||||
console.log("applyHidePurchased: wywołana, isInit =", isInit);
|
||||
//console.log("applyHidePurchased: wywołana, isInit =", isInit);
|
||||
const toggle = document.getElementById('hidePurchasedToggle');
|
||||
if (!toggle) return;
|
||||
const hide = toggle.checked;
|
||||
@@ -231,7 +217,7 @@ function applyHidePurchased(isInit = false) {
|
||||
}
|
||||
|
||||
function toggleVisibility(listId) {
|
||||
fetch('/toggle_visibility/' + listId, {method: 'POST'})
|
||||
fetch('/toggle_visibility/' + listId, { method: 'POST' })
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const shareHeader = document.getElementById('share-header');
|
||||
@@ -254,6 +240,14 @@ function toggleVisibility(listId) {
|
||||
});
|
||||
}
|
||||
|
||||
function markNotPurchasedModal(e, id) {
|
||||
e.stopPropagation();
|
||||
const reason = prompt("Podaj powód oznaczenia jako niekupione:");
|
||||
if (reason !== null) {
|
||||
socket.emit('mark_not_purchased', { item_id: id, reason: reason });
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(message, type = 'primary') {
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
const toast = document.createElement('div');
|
||||
@@ -279,6 +273,7 @@ function isListDifferent(oldItems, newItems) {
|
||||
}
|
||||
|
||||
function updateListSmoothly(newItems) {
|
||||
|
||||
const itemsContainer = document.getElementById('items');
|
||||
const existingItemsMap = new Map();
|
||||
|
||||
@@ -296,58 +291,62 @@ function updateListSmoothly(newItems) {
|
||||
quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
|
||||
}
|
||||
|
||||
if (li) {
|
||||
const checkbox = li.querySelector('input[type="checkbox"]');
|
||||
if (checkbox) {
|
||||
checkbox.checked = item.purchased;
|
||||
checkbox.disabled = false;
|
||||
}
|
||||
|
||||
li.classList.remove('bg-success', 'text-white', 'item-not-checked', 'opacity-50');
|
||||
if (item.purchased) {
|
||||
li.classList.add('bg-success', 'text-white');
|
||||
} else {
|
||||
li.classList.add('item-not-checked');
|
||||
}
|
||||
|
||||
const nameSpan = li.querySelector(`#name-${item.id}`);
|
||||
const expectedName = `${item.name} ${quantityBadge}`.trim();
|
||||
if (nameSpan && nameSpan.innerHTML.trim() !== expectedName) {
|
||||
nameSpan.innerHTML = expectedName;
|
||||
}
|
||||
|
||||
let noteEl = li.querySelector('small');
|
||||
if (item.note) {
|
||||
if (!noteEl) {
|
||||
const newNote = document.createElement('small');
|
||||
newNote.className = 'text-danger ms-4';
|
||||
newNote.innerHTML = `[ <b>${item.note}</b> ]`;
|
||||
nameSpan.insertAdjacentElement('afterend', newNote);
|
||||
} else {
|
||||
noteEl.innerHTML = `[ <b>${item.note}</b> ]`;
|
||||
}
|
||||
} else if (noteEl) {
|
||||
noteEl.remove();
|
||||
}
|
||||
|
||||
const sp = li.querySelector('.spinner-border');
|
||||
if (sp) sp.remove();
|
||||
|
||||
} else {
|
||||
if (!li) {
|
||||
li = document.createElement('li');
|
||||
li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap ${item.purchased ? 'bg-success text-white' : 'item-not-checked'}`;
|
||||
li.id = `item-${item.id}`;
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="d-flex align-items-center gap-3 flex-grow-1">
|
||||
<input class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''}>
|
||||
<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>` : ''}
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-info" onclick="openNoteModal(event, ${item.id})">📝</button>
|
||||
`;
|
||||
}
|
||||
|
||||
// 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-3 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>
|
||||
`;
|
||||
|
||||
fragment.appendChild(li);
|
||||
});
|
||||
|
||||
@@ -359,7 +358,8 @@ function updateListSmoothly(newItems) {
|
||||
applyHidePurchased();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const receiptSection = document.getElementById("receiptSection");
|
||||
const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
|
||||
|
||||
@@ -378,14 +378,14 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const toggle = document.getElementById('hidePurchasedToggle');
|
||||
if (!toggle) return;
|
||||
|
||||
const savedState = localStorage.getItem('hidePurchasedToggle');
|
||||
toggle.checked = savedState === 'true';
|
||||
applyHidePurchased(true);
|
||||
toggle.addEventListener('change', function() {
|
||||
toggle.addEventListener('change', function () {
|
||||
localStorage.setItem('hidePurchasedToggle', toggle.checked ? 'true' : 'false');
|
||||
applyHidePurchased();
|
||||
});
|
||||
|
||||
@@ -7,11 +7,11 @@ function toggleEmptyPlaceholder() {
|
||||
|
||||
// prawdziwe <li> to te z data‑name lub id="item‑…"
|
||||
const hasRealItems = list.querySelector('li[data-name], li[id^="item-"]') !== null;
|
||||
const placeholder = document.getElementById('empty-placeholder');
|
||||
const placeholder = document.getElementById('empty-placeholder');
|
||||
|
||||
if (!hasRealItems && !placeholder) {
|
||||
const li = document.createElement('li');
|
||||
li.id = 'empty-placeholder';
|
||||
const li = document.createElement('li');
|
||||
li.id = 'empty-placeholder';
|
||||
li.className = 'list-group-item bg-dark text-secondary text-center w-100';
|
||||
li.textContent = 'Brak produktów w tej liście.';
|
||||
list.appendChild(li);
|
||||
@@ -132,30 +132,42 @@ function setupList(listId, username) {
|
||||
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>`;
|
||||
}
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="d-flex align-items-center flex-wrap gap-2">
|
||||
<input class="large-checkbox" type="checkbox">
|
||||
<span id="name-${data.id}" class="text-white">${data.name} ${quantityBadge}</span>
|
||||
</div>
|
||||
<div class="mt-2 mt-md-0">
|
||||
<button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️</button>
|
||||
</div>
|
||||
`;
|
||||
<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">
|
||||
<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>
|
||||
`;
|
||||
|
||||
// #### WERSJA Z NAPISAMI ####
|
||||
// <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️ Edytuj</button>
|
||||
// <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️ Usuń</button>
|
||||
// góra listy
|
||||
//document.getElementById('items').prepend(li);
|
||||
|
||||
// dół listy
|
||||
document.getElementById('items').appendChild(li);
|
||||
updateProgressBar();
|
||||
toggleEmptyPlaceholder();
|
||||
|
||||
setTimeout(() => {
|
||||
if (window.LIST_ID) {
|
||||
socket.emit('request_full_list', { list_id: window.LIST_ID });
|
||||
}
|
||||
}, 15000);
|
||||
|
||||
});
|
||||
|
||||
socket.on('item_deleted', data => {
|
||||
@@ -168,7 +180,7 @@ function setupList(listId, username) {
|
||||
toggleEmptyPlaceholder();
|
||||
});
|
||||
|
||||
socket.on('progress_updated', function(data) {
|
||||
socket.on('progress_updated', function (data) {
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
if (progressBar) {
|
||||
progressBar.style.width = data.percent + '%';
|
||||
@@ -225,4 +237,8 @@ function setupList(listId, username) {
|
||||
window.LIST_ID = listId;
|
||||
window.usernameForReconnect = username;
|
||||
|
||||
}
|
||||
|
||||
function unmarkNotPurchased(itemId) {
|
||||
socket.emit('unmark_not_purchased', { item_id: itemId });
|
||||
}
|
||||
@@ -2,11 +2,16 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const modal = document.getElementById('massAddModal');
|
||||
const productList = document.getElementById('mass-add-list');
|
||||
|
||||
// Funkcja normalizacji (usuwa diakrytyki i zamienia na lowercase)
|
||||
function normalize(str) {
|
||||
return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
|
||||
}
|
||||
|
||||
modal.addEventListener('show.bs.modal', async function () {
|
||||
let addedProducts = new Set();
|
||||
document.querySelectorAll('#items li').forEach(li => {
|
||||
if (li.dataset.name) {
|
||||
addedProducts.add(li.dataset.name.toLowerCase());
|
||||
addedProducts.add(normalize(li.dataset.name));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -20,8 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'list-group-item d-flex justify-content-between align-items-center bg-dark text-light';
|
||||
|
||||
if (addedProducts.has(name.toLowerCase())) {
|
||||
// Produkt już dodany — oznacz jako nieaktywny
|
||||
if (addedProducts.has(normalize(name))) {
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.textContent = name;
|
||||
li.appendChild(nameSpan);
|
||||
@@ -32,17 +36,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
badge.textContent = 'Dodano';
|
||||
li.appendChild(badge);
|
||||
} else {
|
||||
// Nazwa produktu
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.textContent = name;
|
||||
nameSpan.style.flex = '1 1 auto';
|
||||
li.appendChild(nameSpan);
|
||||
|
||||
// Kontener na minus, pole i plus
|
||||
const qtyWrapper = document.createElement('div');
|
||||
qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
|
||||
|
||||
// Minus
|
||||
const minusBtn = document.createElement('button');
|
||||
minusBtn.type = 'button';
|
||||
minusBtn.className = 'btn btn-outline-light btn-sm px-2';
|
||||
@@ -51,18 +52,15 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
qty.value = Math.max(1, parseInt(qty.value) - 1);
|
||||
};
|
||||
|
||||
// Pole ilości
|
||||
const qty = document.createElement('input');
|
||||
qty.type = 'number';
|
||||
qty.min = 1;
|
||||
qty.value = 1;
|
||||
qty.className = 'form-control text-center p-1';
|
||||
qty.classList.add('rounded');
|
||||
qty.className = 'form-control text-center p-1 rounded';
|
||||
qty.style.width = '50px';
|
||||
qty.style.margin = '0 2px';
|
||||
qty.title = 'Ilość';
|
||||
|
||||
// Plus
|
||||
const plusBtn = document.createElement('button');
|
||||
plusBtn.type = 'button';
|
||||
plusBtn.className = 'btn btn-outline-light btn-sm px-2';
|
||||
@@ -75,7 +73,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
qtyWrapper.appendChild(qty);
|
||||
qtyWrapper.appendChild(plusBtn);
|
||||
|
||||
// Przycisk dodania
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-sm btn-primary ms-4';
|
||||
btn.textContent = '+';
|
||||
@@ -99,25 +96,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('#mass-add-list li').forEach(li => {
|
||||
const itemName = li.firstChild.textContent.trim();
|
||||
|
||||
if (itemName === data.name && !li.classList.contains('opacity-50')) {
|
||||
// Usuń wszystkie dzieci
|
||||
if (normalize(itemName) === normalize(data.name) && !li.classList.contains('opacity-50')) {
|
||||
while (li.firstChild) {
|
||||
li.removeChild(li.firstChild);
|
||||
}
|
||||
|
||||
// Ustaw nazwę
|
||||
li.textContent = data.name;
|
||||
|
||||
// Dodaj klasę wyszarzenia
|
||||
li.classList.add('opacity-50');
|
||||
|
||||
// Dodaj badge
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'badge bg-success ms-auto';
|
||||
badge.textContent = 'Dodano';
|
||||
li.appendChild(badge);
|
||||
|
||||
// Zablokuj kliknięcia
|
||||
li.onclick = null;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
let currentItemId = null;
|
||||
|
||||
function openNoteModal(event, itemId) {
|
||||
window.openNoteModal = function (event, itemId) {
|
||||
event.stopPropagation();
|
||||
currentItemId = itemId;
|
||||
const noteEl = document.querySelector(`#item-${itemId} small`);
|
||||
document.getElementById('noteText').value = noteEl ? noteEl.innerText : "";
|
||||
const noteEl = document.querySelector(`#item-${itemId} small.text-danger`);
|
||||
document.getElementById('noteText').value = noteEl ? noteEl.innerText.replace(/\[|\]|Powód:/g, "").trim() : "";
|
||||
const modal = new bootstrap.Modal(document.getElementById('noteModal'));
|
||||
modal.show();
|
||||
}
|
||||
};
|
||||
|
||||
function submitNote(e) {
|
||||
e.preventDefault();
|
||||
@@ -20,3 +20,4 @@ function submitNote(e) {
|
||||
modal.hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Odśwież eventy
|
||||
document.querySelectorAll('.sync-btn').forEach(btn => {
|
||||
btn.replaceWith(btn.cloneNode(true));
|
||||
@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
// Synchronizacja sugestii
|
||||
document.querySelectorAll('.sync-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const itemId = this.getAttribute('data-item-id');
|
||||
@@ -22,28 +22,28 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showToast(data.message, data.success ? 'success' : 'danger');
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showToast(data.message, data.success ? 'success' : 'danger');
|
||||
|
||||
if (data.success) {
|
||||
button.innerText = '✅ Zsynchronizowano';
|
||||
button.classList.remove('btn-outline-primary');
|
||||
button.classList.add('btn-success');
|
||||
} else {
|
||||
if (data.success) {
|
||||
button.innerText = '✅ Zsynchronizowano';
|
||||
button.classList.remove('btn-outline-primary');
|
||||
button.classList.add('btn-success');
|
||||
} else {
|
||||
button.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
showToast('Błąd synchronizacji', 'danger');
|
||||
button.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
showToast('Błąd synchronizacji', 'danger');
|
||||
button.disabled = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Usuwanie sugestii
|
||||
document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const suggestionId = this.getAttribute('data-suggestion-id');
|
||||
@@ -56,21 +56,21 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showToast(data.message, data.success ? 'success' : 'danger');
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showToast(data.message, data.success ? 'success' : 'danger');
|
||||
|
||||
if (data.success) {
|
||||
const row = button.closest('tr');
|
||||
if (row) row.remove();
|
||||
} else {
|
||||
if (data.success) {
|
||||
const row = button.closest('tr');
|
||||
if (row) row.remove();
|
||||
} else {
|
||||
button.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
showToast('Błąd usuwania sugestii', 'danger');
|
||||
button.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
showToast('Błąd usuwania sugestii', 'danger');
|
||||
button.disabled = false;
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const receiptSection = document.getElementById("receiptSection");
|
||||
const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
|
||||
|
||||
|
||||
@@ -2,83 +2,83 @@ let didReceiveFirstFullList = false;
|
||||
|
||||
// --- Automatyczny reconnect po powrocie do karty/przywróceniu internetu ---
|
||||
function reconnectIfNeeded() {
|
||||
if (!socket.connected) {
|
||||
socket.connect();
|
||||
}
|
||||
if (!socket.connected) {
|
||||
socket.connect();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("visibilitychange", function() {
|
||||
if (!document.hidden) {
|
||||
reconnectIfNeeded();
|
||||
}
|
||||
document.addEventListener("visibilitychange", function () {
|
||||
if (!document.hidden) {
|
||||
reconnectIfNeeded();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("focus", function() {
|
||||
reconnectIfNeeded();
|
||||
window.addEventListener("focus", function () {
|
||||
reconnectIfNeeded();
|
||||
});
|
||||
|
||||
window.addEventListener("online", function() {
|
||||
reconnectIfNeeded();
|
||||
window.addEventListener("online", function () {
|
||||
reconnectIfNeeded();
|
||||
});
|
||||
|
||||
// --- Blokowanie checkboxów na czas reconnect ---
|
||||
function disableCheckboxes(disable) {
|
||||
document.querySelectorAll('#items input[type="checkbox"]').forEach(cb => {
|
||||
cb.disabled = disable;
|
||||
});
|
||||
document.querySelectorAll('#items input[type="checkbox"]').forEach(cb => {
|
||||
cb.disabled = disable;
|
||||
});
|
||||
}
|
||||
|
||||
// --- Toasty przy rozłączeniu i połączeniu ---
|
||||
let firstConnect = true;
|
||||
let wasReconnected = false; // flaga do kontrolowania toasta
|
||||
|
||||
socket.on('connect', function() {
|
||||
if (!firstConnect) {
|
||||
//showToast('Połączono z serwerem!', 'info');
|
||||
disableCheckboxes(true);
|
||||
wasReconnected = true;
|
||||
socket.on('connect', function () {
|
||||
if (!firstConnect) {
|
||||
//showToast('Połączono z serwerem!', 'info');
|
||||
disableCheckboxes(true);
|
||||
wasReconnected = true;
|
||||
|
||||
if (window.LIST_ID && window.usernameForReconnect) {
|
||||
socket.emit('join_list', { room: window.LIST_ID, username: window.usernameForReconnect });
|
||||
}
|
||||
if (window.LIST_ID && window.usernameForReconnect) {
|
||||
socket.emit('join_list', { room: window.LIST_ID, username: window.usernameForReconnect });
|
||||
}
|
||||
firstConnect = false;
|
||||
}
|
||||
firstConnect = false;
|
||||
});
|
||||
|
||||
socket.on('disconnect', function(reason) {
|
||||
showToast('Utracono połączenie z serwerem...', 'warning');
|
||||
disableCheckboxes(true);
|
||||
socket.on('disconnect', function (reason) {
|
||||
showToast('Utracono połączenie z serwerem...', 'warning');
|
||||
disableCheckboxes(true);
|
||||
});
|
||||
|
||||
socket.off('joined_confirmation');
|
||||
socket.on('joined_confirmation', function(data) {
|
||||
if (wasReconnected) {
|
||||
showToast(`Lista: ${data.list_title} – ponownie dołączono.`, 'info');
|
||||
wasReconnected = false;
|
||||
}
|
||||
if (window.LIST_ID) {
|
||||
socket.emit('request_full_list', { list_id: window.LIST_ID });
|
||||
}
|
||||
socket.on('joined_confirmation', function (data) {
|
||||
if (wasReconnected) {
|
||||
showToast(`Lista: ${data.list_title} – ponownie dołączono.`, 'info');
|
||||
wasReconnected = false;
|
||||
}
|
||||
if (window.LIST_ID) {
|
||||
socket.emit('request_full_list', { list_id: window.LIST_ID });
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
socket.on('user_joined', function(data) {
|
||||
showToast(`${data.username} dołączył do listy`, 'info');
|
||||
socket.on('user_joined', function (data) {
|
||||
showToast(`${data.username} dołączył do listy`, 'info');
|
||||
});
|
||||
|
||||
socket.on('user_left', function(data) {
|
||||
showToast(`${data.username} opuścił listę`, 'warning');
|
||||
socket.on('user_left', function (data) {
|
||||
showToast(`${data.username} opuścił listę`, 'warning');
|
||||
});
|
||||
|
||||
socket.on('user_list', function(data) {
|
||||
if (data.users.length > 0) {
|
||||
const userList = data.users.join(', ');
|
||||
showToast(`Obecni: ${userList}`, 'info');
|
||||
}
|
||||
socket.on('user_list', function (data) {
|
||||
if (data.users.length > 0) {
|
||||
const userList = data.users.join(', ');
|
||||
showToast(`Obecni: ${userList}`, 'info');
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('receipt_added', function (data) {
|
||||
|
||||
|
||||
const gallery = document.getElementById("receiptGallery");
|
||||
if (!gallery) return;
|
||||
|
||||
@@ -103,6 +103,20 @@ socket.on('receipt_added', function (data) {
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("items_reordered", data => {
|
||||
if (data.list_id !== window.LIST_ID) return;
|
||||
|
||||
if (window.currentItems) {
|
||||
window.currentItems = data.order.map(id =>
|
||||
window.currentItems.find(item => item.id === id)
|
||||
).filter(Boolean);
|
||||
|
||||
updateListSmoothly(window.currentItems);
|
||||
//showToast('Kolejność produktów zaktualizowana', 'info');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
socket.on('full_list', function (data) {
|
||||
const itemsContainer = document.getElementById('items');
|
||||
|
||||
@@ -112,6 +126,7 @@ socket.on('full_list', function (data) {
|
||||
|
||||
const isDifferent = isListDifferent(oldItems, data.items);
|
||||
|
||||
window.currentItems = data.items;
|
||||
updateListSmoothly(data.items);
|
||||
toggleEmptyPlaceholder();
|
||||
|
||||
@@ -119,4 +134,12 @@ socket.on('full_list', function (data) {
|
||||
showToast('Lista została zaktualizowana', 'info');
|
||||
}
|
||||
didReceiveFirstFullList = true;
|
||||
});
|
||||
|
||||
socket.on('item_marked_not_purchased', data => {
|
||||
socket.emit('request_full_list', { list_id: window.LIST_ID });
|
||||
});
|
||||
|
||||
socket.on('item_unmarked_not_purchased', data => {
|
||||
socket.emit('request_full_list', { list_id: window.LIST_ID });
|
||||
});
|
||||
83
static/js/sort_mode.js
Normal file
83
static/js/sort_mode.js
Normal file
@@ -0,0 +1,83 @@
|
||||
let sortable = null;
|
||||
let isSorting = false;
|
||||
|
||||
function enableSortMode() {
|
||||
if (sortable || isSorting) return;
|
||||
isSorting = true;
|
||||
localStorage.setItem('sortModeEnabled', 'true');
|
||||
|
||||
const itemsContainer = document.getElementById('items');
|
||||
const listId = window.LIST_ID;
|
||||
|
||||
if (!itemsContainer || !listId) return;
|
||||
|
||||
sortable = Sortable.create(itemsContainer, {
|
||||
animation: 150,
|
||||
handle: '.drag-handle',
|
||||
ghostClass: 'drag-ghost',
|
||||
filter: 'input, button',
|
||||
preventOnFilter: false,
|
||||
onEnd: function () {
|
||||
const order = Array.from(itemsContainer.children)
|
||||
.map(li => parseInt(li.id.replace('item-', '')))
|
||||
.filter(id => !isNaN(id));
|
||||
|
||||
fetch('/reorder_items', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ list_id: listId, order })
|
||||
}).then(() => {
|
||||
showToast('Zapisano nową kolejność', 'success');
|
||||
|
||||
if (window.currentItems) {
|
||||
window.currentItems = order.map(id =>
|
||||
window.currentItems.find(item => item.id === id)
|
||||
);
|
||||
updateListSmoothly(window.currentItems);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const btn = document.getElementById('sort-toggle-btn');
|
||||
if (btn) {
|
||||
btn.textContent = '✔️ Zakończ sortowanie';
|
||||
btn.classList.remove('btn-outline-warning');
|
||||
btn.classList.add('btn-outline-success');
|
||||
}
|
||||
|
||||
if (window.currentItems) {
|
||||
updateListSmoothly(window.currentItems);
|
||||
}
|
||||
}
|
||||
|
||||
function disableSortMode() {
|
||||
if (sortable) {
|
||||
sortable.destroy();
|
||||
sortable = null;
|
||||
}
|
||||
isSorting = false;
|
||||
localStorage.removeItem('sortModeEnabled');
|
||||
|
||||
const btn = document.getElementById('sort-toggle-btn');
|
||||
if (btn) {
|
||||
btn.textContent = '✳️ Zmień kolejność';
|
||||
btn.classList.remove('btn-outline-success');
|
||||
btn.classList.add('btn-outline-warning');
|
||||
}
|
||||
|
||||
if (window.currentItems) {
|
||||
updateListSmoothly(window.currentItems);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSortMode() {
|
||||
isSorting ? disableSortMode() : enableSortMode();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const wasSorting = localStorage.getItem('sortModeEnabled') === 'true';
|
||||
if (wasSorting) {
|
||||
enableSortMode();
|
||||
}
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const toggleBtn = document.getElementById("tempToggle");
|
||||
const hiddenInput = document.getElementById("temporaryHidden");
|
||||
|
||||
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
updateToggle(active);
|
||||
|
||||
// Obsługa kliknięcia
|
||||
toggleBtn.addEventListener("click", function() {
|
||||
toggleBtn.addEventListener("click", function () {
|
||||
active = !active;
|
||||
toggleBtn.setAttribute("data-active", active ? "1" : "0");
|
||||
hiddenInput.value = active ? "1" : "0";
|
||||
|
||||
90
static/js/user_expenses.js
Normal file
90
static/js/user_expenses.js
Normal file
@@ -0,0 +1,90 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
let expensesChart = null;
|
||||
const rangeLabel = document.getElementById("chartRangeLabel");
|
||||
|
||||
function loadExpenses(range = "monthly", startDate = null, endDate = null) {
|
||||
let url = '/user/expenses_data?range=' + range;
|
||||
if (startDate && endDate) {
|
||||
url += `&start_date=${startDate}&end_date=${endDate}`;
|
||||
}
|
||||
|
||||
fetch(url, { cache: "no-store" })
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const ctx = document.getElementById('expensesChart').getContext('2d');
|
||||
|
||||
if (expensesChart) {
|
||||
expensesChart.destroy();
|
||||
}
|
||||
|
||||
expensesChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.labels,
|
||||
datasets: [{
|
||||
label: 'Suma wydatków [PLN]',
|
||||
data: data.expenses,
|
||||
backgroundColor: '#0d6efd'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (startDate && endDate) {
|
||||
rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
|
||||
} else {
|
||||
let labelText = "";
|
||||
if (range === "monthly") labelText = "Widok: miesięczne";
|
||||
else if (range === "quarterly") labelText = "Widok: kwartalne";
|
||||
else if (range === "halfyearly") labelText = "Widok: półroczne";
|
||||
else if (range === "yearly") labelText = "Widok: roczne";
|
||||
rangeLabel.textContent = labelText;
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Błąd pobierania danych:", error);
|
||||
});
|
||||
}
|
||||
|
||||
// Inicjalizacja zakresu dat
|
||||
const startDateInput = document.getElementById("startDate");
|
||||
const endDateInput = document.getElementById("endDate");
|
||||
const today = new Date();
|
||||
const lastWeek = new Date(today);
|
||||
lastWeek.setDate(today.getDate() - 7);
|
||||
const formatDate = (d) => d.toISOString().split('T')[0];
|
||||
startDateInput.value = formatDate(lastWeek);
|
||||
endDateInput.value = formatDate(today);
|
||||
|
||||
// Załaduj początkowy widok
|
||||
loadExpenses();
|
||||
|
||||
// Przycisk własnego zakresu
|
||||
document.getElementById('customRangeBtn').addEventListener('click', function () {
|
||||
const startDate = startDateInput.value;
|
||||
const endDate = endDateInput.value;
|
||||
if (startDate && endDate) {
|
||||
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
||||
loadExpenses('custom', startDate, endDate);
|
||||
} else {
|
||||
alert("Proszę wybrać obie daty!");
|
||||
}
|
||||
});
|
||||
|
||||
// Zakresy predefiniowane
|
||||
document.querySelectorAll('.range-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
const range = this.getAttribute('data-range');
|
||||
loadExpenses(range);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,4 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var resetPasswordModal = document.getElementById('resetPasswordModal');
|
||||
resetPasswordModal.addEventListener('show.bs.modal', function (event) {
|
||||
var button = event.relatedTarget;
|
||||
|
||||
2
static/lib/js/Sortable.min.js
vendored
Normal file
2
static/lib/js/Sortable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -10,7 +10,8 @@
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded mb-4">
|
||||
<div class="container-fluid p-0">
|
||||
<a class="navbar-brand" href="#">Funkcje:</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#adminNavbar" aria-controls="adminNavbar" aria-expanded="false" aria-label="Przełącz nawigację">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#adminNavbar"
|
||||
aria-controls="adminNavbar" aria-expanded="false" aria-label="Przełącz nawigację">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
@@ -20,18 +21,10 @@
|
||||
<a class="nav-link" href="/admin/users">👥 Zarządzanie użytkownikami</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/admin/receipts/all">📸 Paragony</a>
|
||||
<a class="nav-link" href="/admin/receipts/all">📸 Wszystkie paragony</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/admin/products">🛍️ Produkty</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-danger" href="#" id="clearDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
🗑️ Czyszczenie
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item text-danger" href="/admin/delete_all_items">Usuń wszystkie produkty</a></li>
|
||||
</ul>
|
||||
<a class="nav-link" href="/admin/products">🛍️ Produkty i sugestie</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -57,7 +50,7 @@
|
||||
<h5>🔥 Najczęściej kupowane produkty:</h5>
|
||||
<ul class="mb-0">
|
||||
{% for name, count in top_products %}
|
||||
<li>{{ name }} — {{ count }}×</li>
|
||||
<li>{{ name }} — {{ count }}×</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -74,7 +67,8 @@
|
||||
<li><strong>Obecny rok:</strong> {{ '%.2f'|format(year_expense_sum) }} PLN</li>
|
||||
<li><strong>Całkowite:</strong> {{ '%.2f'|format(total_expense_sum) }} PLN</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal" data-bs-target="#expensesChartModal" id="loadExpensesBtn">
|
||||
<button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal"
|
||||
data-bs-target="#expensesChartModal" id="loadExpensesBtn">
|
||||
📊 Pokaż wykres wydatków
|
||||
</button>
|
||||
</div>
|
||||
@@ -82,124 +76,125 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="mt-4">📄 Wszystkie listy zakupowe</h3>
|
||||
<form method="post" action="{{ url_for('delete_selected_lists') }}">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="select-all"></th>
|
||||
<th>ID</th>
|
||||
<th>Tytuł</th>
|
||||
<th>Status</th>
|
||||
<th>Utworzono</th>
|
||||
<th>Właściciel</th>
|
||||
<th>Produkty</th>
|
||||
<th>Wypełnienie</th>
|
||||
<th>Komentarze</th>
|
||||
<th>Paragony</th>
|
||||
<th>Wydatki</th>
|
||||
<th>Akcje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for e in enriched_lists %}
|
||||
{% set l = e.list %}
|
||||
<tr>
|
||||
<td><input type="checkbox" name="list_ids" value="{{ l.id }}"></td>
|
||||
<td>{{ l.id }}</td>
|
||||
<td class="fw-bold">
|
||||
<a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if l.is_archived %}
|
||||
<h3 class="mt-4">📄 Wszystkie listy zakupowe</h3>
|
||||
<form method="post" action="{{ url_for('delete_selected_lists') }}">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><input type="checkbox" id="select-all"></th>
|
||||
<th>ID</th>
|
||||
<th>Tytuł</th>
|
||||
<th>Status</th>
|
||||
<th>Utworzono</th>
|
||||
<th>Właściciel</th>
|
||||
<th>Produkty</th>
|
||||
<th>Wypełnienie</th>
|
||||
<th>Komentarze</th>
|
||||
<th>Paragony</th>
|
||||
<th>Wydatki</th>
|
||||
<th>Akcje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for e in enriched_lists %}
|
||||
{% set l = e.list %}
|
||||
<tr>
|
||||
<td><input type="checkbox" name="list_ids" value="{{ l.id }}"></td>
|
||||
<td>{{ l.id }}</td>
|
||||
<td class="fw-bold">
|
||||
<a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{% if l.is_archived %}
|
||||
<span class="badge bg-secondary">Archiwalna</span>
|
||||
{% elif l.is_temporary and l.expires_at and l.expires_at < now %}
|
||||
{% elif e.expired %}
|
||||
<span class="badge bg-warning text-dark">Wygasła</span>
|
||||
{% else %}
|
||||
{% else %}
|
||||
<span class="badge bg-success">Aktywna</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
|
||||
<td>
|
||||
{% if l.owner_id %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
|
||||
<td>
|
||||
{% if l.owner_id %}
|
||||
{{ l.owner_id }} / {{ l.owner.username if l.owner else 'Brak użytkownika' }}
|
||||
{% else %}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ e.total_count }}</td>
|
||||
<td>{{ e.purchased_count }}/{{ e.total_count }} ({{ e.percent }}%)</td>
|
||||
<td>{{ e.comments_count }}</td>
|
||||
<td>{{ e.receipts_count }}</td>
|
||||
<td>
|
||||
{% if e.total_expense > 0 %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ e.total_count }}</td>
|
||||
<td>{{ e.purchased_count }}/{{ e.total_count }} ({{ e.percent }}%)</td>
|
||||
<td>{{ e.comments_count }}</td>
|
||||
<td>{{ e.receipts_count }}</td>
|
||||
<td>
|
||||
{% if e.total_expense > 0 %}
|
||||
{{ '%.2f'|format(e.total_expense) }} PLN
|
||||
{% else %}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="d-flex flex-wrap gap-1">
|
||||
<a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-primary">✏️ Edytuj</a>
|
||||
<a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-danger">🗑️ Usuń</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="d-flex flex-wrap gap-1">
|
||||
<a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-primary">✏️ Edytuj</a>
|
||||
<a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-danger">🗑️ Usuń</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
|
||||
</form>
|
||||
|
||||
<div class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content bg-dark text-white rounded">
|
||||
<div class="modal-header border-0">
|
||||
<div>
|
||||
<h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
|
||||
<small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-0">
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
<button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
|
||||
<div class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content bg-dark text-white rounded">
|
||||
<div class="modal-header border-0">
|
||||
<div>
|
||||
<h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
|
||||
<small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-0">
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
<button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">Od</span>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">Do</span>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
|
||||
<button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
|
||||
</div>
|
||||
<div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">Od</span>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">Do</span>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
|
||||
<button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
|
||||
</div>
|
||||
|
||||
<div class="bg-dark rounded p-2">
|
||||
<canvas id="expensesChart" height="100"></canvas>
|
||||
<div class="bg-dark rounded p-2">
|
||||
<canvas id="expensesChart" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
|
||||
<script>
|
||||
document.getElementById('select-all').addEventListener('click', function(){
|
||||
const checkboxes = document.querySelectorAll('input[name="list_ids"]');
|
||||
checkboxes.forEach(cb => cb.checked = this.checked);
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
|
||||
<script>
|
||||
document.getElementById('select-all').addEventListener('click', function () {
|
||||
const checkboxes = document.querySelectorAll('input[name="list_ids"]');
|
||||
checkboxes.forEach(cb => cb.checked = this.checked);
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
<div class="info-bar-fixed">
|
||||
Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }}
|
||||
</div>
|
||||
<div class="info-bar-fixed">
|
||||
Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }}
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -12,39 +12,65 @@
|
||||
<h4 class="card-title">📄 Podstawowe informacje</h4>
|
||||
<form method="post" class="mt-3">
|
||||
<input type="hidden" name="action" value="save">
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Nazwa listy</label>
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title" value="{{ list.title }}" required>
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title"
|
||||
value="{{ list.title }}" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="amount" class="form-label">Całkowity wydatek (PLN)</label>
|
||||
<input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary rounded" id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
|
||||
<input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary rounded"
|
||||
id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="owner_id" class="form-label">Właściciel</label>
|
||||
<select class="form-select bg-dark text-white border-secondary" id="owner_id" name="owner_id">
|
||||
{% for user in users %}
|
||||
<option value="{{ user.id }}" {% if list.owner_id == user.id %}selected{% endif %}>{{ user.username }}</option>
|
||||
<option value="{{ user.id }}" {% if list.owner_id==user.id %}selected{% endif %}>{{ user.username }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived %}checked{% endif %}>
|
||||
<input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived %}checked{%
|
||||
endif %}>
|
||||
<label class="form-check-label" for="archived">Archiwalna</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-4">
|
||||
<input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{% endif %}>
|
||||
<input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{% endif
|
||||
%}>
|
||||
<label class="form-check-label" for="public">Publiczna</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="temporary" name="temporary" {% if list.is_temporary
|
||||
%}checked{% endif %}>
|
||||
<label class="form-check-label" for="temporary">Tymczasowa</label>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="expires_date" class="form-label">Data wygaśnięcia</label>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
|
||||
name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="expires_time" class="form-label">Godzina wygaśnięcia</label>
|
||||
<input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
|
||||
name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Link do udostępnienia</label>
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" readonly value="{{ request.url_root }}share/{{ list.share_token }}">
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" readonly
|
||||
value="{{ request.url_root }}share/{{ list.share_token }}">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success me-2">💾 Zapisz zmiany</button>
|
||||
@@ -58,67 +84,99 @@
|
||||
<form method="post" class="row g-2 mb-3">
|
||||
<input type="hidden" name="action" value="add_item">
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" name="item_name" placeholder="Nazwa produktu" required>
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary rounded" name="item_name"
|
||||
placeholder="Nazwa produktu" required>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<input type="number" class="form-control bg-dark text-white border-secondary rounded" name="quantity" min="1" value="1">
|
||||
<input type="number" class="form-control bg-dark text-white border-secondary rounded" name="quantity" min="1"
|
||||
value="1">
|
||||
</div>
|
||||
<div class="col-md-3 d-grid">
|
||||
<button type="submit" class="btn btn-outline-success">➕ Dodaj</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-bordered align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Nazwa</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Oznaczenie</th>
|
||||
<th scope="col">Usuń</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ item.name }}</strong>
|
||||
<small class="text-muted">(x{{ item.quantity }})</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if item.purchased %}
|
||||
<span class="badge bg-success">✔️ Kupiony</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Nieoznaczony</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-inline">
|
||||
<input type="hidden" name="action" value="toggle_purchased">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-bordered align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Nazwa</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Oznaczenie</th>
|
||||
<th scope="col">Usuń</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ item.name }}</strong>
|
||||
<small class="text-muted">(x{{ item.quantity }})</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if item.purchased %}
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm w-100">🚫 Odznacz</button>
|
||||
<span class="badge bg-success">✔️ Kupiony</span>
|
||||
{% elif item.not_purchased %}
|
||||
<span class="badge bg-warning text-dark">⚠️ Nie kupione</span>
|
||||
{% else %}
|
||||
<button type="submit" class="btn btn-outline-success btn-sm w-100">✅ Oznacz</button>
|
||||
<span class="badge bg-secondary">Nieoznaczony</span>
|
||||
{% endif %}
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-inline">
|
||||
<input type="hidden" name="action" value="delete_item">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
<button type="submit" class="btn btn-danger btn-sm w-100">🗑️ Usuń</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-muted">Brak produktów.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
|
||||
<input type="hidden" name="action" value="toggle_purchased">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
{% if not item.not_purchased %}
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
|
||||
<input type="hidden" name="action" value="toggle_purchased">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
{% if item.purchased %}
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm">🚫 Odznacz</button>
|
||||
{% else %}
|
||||
<button type="submit" class="btn btn-outline-success btn-sm">✅ Oznacz</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1 mt-1">
|
||||
<input type="hidden" name="action" value="mark_not_purchased">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
<button type="submit" class="btn btn-outline-warning btn-sm">⚠️ Nie kupione</button>
|
||||
</form>
|
||||
|
||||
{% if item.not_purchased %}
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}"
|
||||
class="d-grid gap-1 mt-3 border-top pt-2">
|
||||
<input type="hidden" name="action" value="unmark_not_purchased">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
<button type="submit" class="btn btn-outline-success btn-sm">✅ Przywróć na liste</button>
|
||||
</form>
|
||||
|
||||
{% if item.not_purchased_reason %}
|
||||
<div class="mt-2 text-warning small border-top pt-2">
|
||||
<strong>Powód:</strong> {{ item.not_purchased_reason }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-inline">
|
||||
<input type="hidden" name="action" value="delete_item">
|
||||
<input type="hidden" name="item_id" value="{{ item.id }}">
|
||||
<button type="submit" class="btn btn-danger btn-sm w-100">🗑️ Usuń</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="4" class="text-center text-muted">Brak produktów.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,32 +193,35 @@
|
||||
|
||||
<div class="row g-3">
|
||||
{% for img in receipts %}
|
||||
{% set file_path = upload_folder ~ '/' ~ img %}
|
||||
{% set file_size = (file_path | filesizeformat) %}
|
||||
{% set upload_time = (file_path | filemtime) %}
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<a href="{{ url_for('uploaded_file', filename=img) }}" data-lightbox="receipts" data-title="{{ img }}" class="glightbox">
|
||||
<img src="{{ url_for('uploaded_file', filename=img) }}" class="card-img-top" style="object-fit: cover; height: 200px;">
|
||||
</a>
|
||||
<div class="card-body text-center">
|
||||
<p class="small text-truncate mb-1">{{ img }}</p>
|
||||
<p class="small mb-1">Rozmiar: {{ file_size }}</p>
|
||||
<p class="small mb-1">Wgrano: {{ upload_time.strftime('%Y-%m-%d %H:%M') }}</p>
|
||||
<a href="{{ url_for('delete_receipt', filename=img) }}?next={{ url_for('edit_list', list_id=list.id) }}" class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
|
||||
</div>
|
||||
{% set file_path = upload_folder ~ '/' ~ img %}
|
||||
{% set file_size = (file_path | filesizeformat) %}
|
||||
{% set upload_time = (file_path | filemtime) %}
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<a href="{{ url_for('uploaded_file', filename=img) }}" data-lightbox="receipts" data-title="{{ img }}"
|
||||
class="glightbox">
|
||||
<img src="{{ url_for('uploaded_file', filename=img) }}" class="card-img-top"
|
||||
style="object-fit: cover; height: 200px;">
|
||||
</a>
|
||||
<div class="card-body text-center">
|
||||
<p class="small text-truncate mb-1">{{ img }}</p>
|
||||
<p class="small mb-1">Rozmiar: {{ file_size }}</p>
|
||||
<p class="small mb-1">Wgrano: {{ upload_time.strftime('%Y-%m-%d %H:%M') }}</p>
|
||||
<a href="{{ url_for('delete_receipt', filename=img) }}?next={{ url_for('edit_list', list_id=list.id) }}"
|
||||
class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if not receipts %}
|
||||
<div class="alert alert-info text-center mt-3" role="alert">
|
||||
Brak paragonów.
|
||||
</div>
|
||||
<div class="alert alert-info text-center mt-3" role="alert">
|
||||
Brak paragonów.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -30,18 +30,20 @@
|
||||
<td class="fw-bold">{{ item.name }}</td>
|
||||
<td>
|
||||
{% if item.added_by %}
|
||||
{{ users_dict.get(item.added_by, 'Nieznany') }}
|
||||
{{ users_dict.get(item.added_by, 'Nieznany') }}
|
||||
{% else %}
|
||||
Gość
|
||||
Gość
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% set suggestion = suggestions_dict.get(item.name.lower()) %}
|
||||
{% if suggestion %}
|
||||
✅ Istnieje (ID: {{ suggestion.id }})
|
||||
<button class="btn btn-sm btn-outline-danger ms-1 delete-suggestion-btn" data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
|
||||
✅ Istnieje (ID: {{ suggestion.id }})
|
||||
<button class="btn btn-sm btn-outline-danger ms-1 delete-suggestion-btn"
|
||||
data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
|
||||
{% else %}
|
||||
<button class="btn btn-sm btn-outline-primary sync-btn" data-item-id="{{ item.id }}">🔄 Synchronizuj</button>
|
||||
<button class="btn btn-sm btn-outline-primary sync-btn" data-item-id="{{ item.id }}">🔄
|
||||
Synchronizuj</button>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
@@ -77,15 +79,16 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for suggestion in suggestions_dict.values() %}
|
||||
{% if suggestion.name.lower() not in item_names %}
|
||||
<tr>
|
||||
<td>{{ suggestion.id }}</td>
|
||||
<td class="fw-bold">{{ suggestion.name }}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-danger delete-suggestion-btn" data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if suggestion.name.lower() not in item_names %}
|
||||
<tr>
|
||||
<td>{{ suggestion.id }}</td>
|
||||
<td class="fw-bold">{{ suggestion.name }}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-outline-danger delete-suggestion-btn"
|
||||
data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if suggestions_dict|length == 0 %}
|
||||
<tr>
|
||||
@@ -101,4 +104,4 @@
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -9,33 +9,37 @@
|
||||
|
||||
<div class="row g-3">
|
||||
{% for img in image_files %}
|
||||
{% set list_id = img.split('_')[1] if '_' in img else None %}
|
||||
{% set file_path = upload_folder ~ '/' ~ img %}
|
||||
{% set file_size = (file_path | filesizeformat) %}
|
||||
{% set upload_time = (file_path | filemtime) %}
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<a href="{{ url_for('uploaded_file', filename=img) }}" class="glightbox" data-gallery="receipts" data-title="{{ img }}">
|
||||
<img src="{{ url_for('uploaded_file', filename=img) }}" class="card-img-top" style="object-fit: cover; height: 200px;">
|
||||
</a>
|
||||
<div class="card-body text-center">
|
||||
<p class="small text-truncate mb-1">{{ img }}</p>
|
||||
<p class="small mb-1">Rozmiar: {{ file_size }}</p>
|
||||
<p class="small mb-1">Wgrano: {{ upload_time.strftime('%Y-%m-%d %H:%M') }}</p>
|
||||
{% if list_id %}
|
||||
<a href="{{ url_for('edit_list', list_id=list_id|int) }}" class="btn btn-sm btn-outline-light w-100 mb-2">✏️ Edytuj listę #{{ list_id }}</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('delete_receipt', filename=img) }}?next={{ request.path }}" class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
|
||||
</div>
|
||||
{% set list_id = img.split('_')[1] if '_' in img else None %}
|
||||
{% set file_path = upload_folder ~ '/' ~ img %}
|
||||
{% set file_size = (file_path | filesizeformat) %}
|
||||
{% set upload_time = (file_path | filemtime) %}
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="card bg-dark text-white h-100">
|
||||
<a href="{{ url_for('uploaded_file', filename=img) }}" class="glightbox" data-gallery="receipts"
|
||||
data-title="{{ img }}">
|
||||
<img src="{{ url_for('uploaded_file', filename=img) }}" class="card-img-top"
|
||||
style="object-fit: cover; height: 200px;">
|
||||
</a>
|
||||
<div class="card-body text-center">
|
||||
<p class="small text-truncate mb-1">{{ img }}</p>
|
||||
<p class="small mb-1">Rozmiar: {{ file_size }}</p>
|
||||
<p class="small mb-1">Wgrano: {{ upload_time.strftime('%Y-%m-%d %H:%M') }}</p>
|
||||
{% if list_id %}
|
||||
<a href="{{ url_for('edit_list', list_id=list_id|int) }}" class="btn btn-sm btn-outline-light w-100 mb-2">✏️
|
||||
Edytuj listę #{{ list_id }}</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('delete_receipt', filename=img) }}?next={{ request.path }}"
|
||||
class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if not image_files %}
|
||||
<div class="alert alert-info text-center mt-4" role="alert">
|
||||
Nie wgrano żadnych paragonów.
|
||||
</div>
|
||||
<div class="alert alert-info text-center mt-4" role="alert">
|
||||
Nie wgrano żadnych paragonów.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -14,10 +14,12 @@
|
||||
<form method="post" action="{{ url_for('add_user') }}">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="username" class="form-control bg-dark text-white border-secondary rounded" placeholder="Nazwa użytkownika" required>
|
||||
<input type="text" name="username" class="form-control bg-dark text-white border-secondary rounded"
|
||||
placeholder="Nazwa użytkownika" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="password" name="password" class="form-control bg-dark text-white border-secondary rounded" placeholder="Hasło" required>
|
||||
<input type="password" name="password" class="form-control bg-dark text-white border-secondary rounded"
|
||||
placeholder="Hasło" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="submit" class="btn btn-outline-success w-100">Dodaj użytkownika</button>
|
||||
@@ -43,24 +45,20 @@
|
||||
<td class="fw-bold">{{ user.username }}</td>
|
||||
<td>
|
||||
{% if user.is_admin %}
|
||||
<span class="badge bg-primary">Admin</span>
|
||||
<span class="badge bg-primary">Admin</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Użytkownik</span>
|
||||
<span class="badge bg-secondary">Użytkownik</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class="btn btn-sm btn-outline-warning me-1"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#resetPasswordModal"
|
||||
data-user-id="{{ user.id }}"
|
||||
data-username="{{ user.username }}">
|
||||
<button class="btn btn-sm btn-outline-warning me-1" data-bs-toggle="modal" data-bs-target="#resetPasswordModal"
|
||||
data-user-id="{{ user.id }}" data-username="{{ user.username }}">
|
||||
🔑 Ustaw hasło
|
||||
</button>
|
||||
{% if not user.is_admin %}
|
||||
<a href="/admin/promote_user/{{ user.id }}" class="btn btn-sm btn-outline-info">⬆️ Ustaw admina</a>
|
||||
<a href="/admin/promote_user/{{ user.id }}" class="btn btn-sm btn-outline-info">⬆️ Ustaw admina</a>
|
||||
{% else %}
|
||||
<a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-secondary">⬇️ Usuń admina</a>
|
||||
<a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-secondary">⬇️ Usuń admina</a>
|
||||
{% endif %}
|
||||
<a href="/admin/delete_user/{{ user.id }}" class="btn btn-sm btn-outline-danger me-1">🗑️ Usuń</a>
|
||||
</td>
|
||||
@@ -70,7 +68,8 @@
|
||||
</table>
|
||||
|
||||
<!-- Modal resetowania hasła -->
|
||||
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
|
||||
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark text-white">
|
||||
<form method="post" id="resetPasswordForm">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
@@ -11,84 +12,85 @@
|
||||
{% endif %}
|
||||
<link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="bg-dark text-white">
|
||||
|
||||
<nav class="navbar navbar-dark bg-dark mb-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold fs-4 text-success" href="/">
|
||||
🛒 <span class="text-warning">Lista</span> Zakupów
|
||||
</a>
|
||||
<nav class="navbar navbar-dark bg-dark mb-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold fs-4 text-success" href="/">
|
||||
🛒 <span class="text-warning">Lista</span> Zakupów
|
||||
</a>
|
||||
|
||||
{% if has_authorized_cookie and not is_blocked %}
|
||||
{% if has_authorized_cookie and not is_blocked %}
|
||||
{% if current_user.is_authenticated %}
|
||||
<div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
|
||||
<span class="me-1">Zalogowany:</span>
|
||||
<span class="badge bg-success">{{ current_user.username }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
|
||||
<span class="me-1">Zalogowany:</span>
|
||||
<span class="badge bg-success">{{ current_user.username }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
|
||||
<span class="me-1">Przeglądasz jako</span>
|
||||
<span class="badge bg-info">gość</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
|
||||
<span class="me-1">Przeglądasz jako</span>
|
||||
<span class="badge bg-info">gość</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if not is_blocked %}
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
{% if request.endpoint and request.endpoint != 'system_auth' %}
|
||||
{% if current_user.is_authenticated and current_user.is_admin %}
|
||||
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-warning btn-sm">⚙️ Panel admina</a>
|
||||
{% endif %}
|
||||
{% if not is_blocked and request.endpoint and request.endpoint != 'system_auth' %}
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
{% if current_user.is_authenticated %}
|
||||
<a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪 Wyloguj</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
|
||||
{% if current_user.is_admin %}
|
||||
<a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">⚙️</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('user_expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
|
||||
<a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<div class="container px-2">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container px-2">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
|
||||
|
||||
<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
|
||||
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
|
||||
{% if not is_blocked %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
|
||||
{% if not is_blocked %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
{% with messages = get_flashed_messages(with_categories = true) %}
|
||||
{% for category, message in messages %}
|
||||
{% set cat = 'info' if not category else ('danger' if category == 'error' else category) %}
|
||||
{% if message == 'Please log in to access this page.' %}
|
||||
showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
|
||||
{% else %}
|
||||
showToast({{ message|tojson }}, "{{ cat }}");
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% set cat = 'info' if not category else ('danger' if category == 'error' else category) %}
|
||||
{% if message == 'Please log in to access this page.' %}
|
||||
showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
|
||||
{% else %}
|
||||
showToast({{ message| tojson }}, "{{ cat }}");
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
});
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}"></script>
|
||||
{% if request.endpoint != 'system_auth' %}
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='functions.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='live.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}"></script>
|
||||
{% endif %}
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
|
||||
<script>
|
||||
let lightbox = GLightbox({
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}"></script>
|
||||
{% if request.endpoint != 'system_auth' %}
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='functions.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='live.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}"></script>
|
||||
{% endif %}
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
|
||||
<script>
|
||||
let lightbox = GLightbox({
|
||||
selector: '.glightbox'
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
{% block scripts %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
@@ -1,14 +1,91 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
|
||||
<h2>Edytuj listę: {{ list.title }}</h2>
|
||||
{% block content %}
|
||||
<h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>
|
||||
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<label for="title" class="form-label">Ustaw nazwe</label>
|
||||
<input type="text" name="title" id="title" class="form-control" value="{{ list.title }}" required>
|
||||
<label for="title" class="form-label">Nazwa listy</label>
|
||||
<input type="text" name="title" id="title" class="form-control bg-dark text-white border-secondary rounded"
|
||||
value="{{ list.title }}" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Zapisz</button>
|
||||
<a href="{{ url_for('main_page') }}" class="btn btn-secondary">Anuluj</a>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input rounded" type="checkbox" name="is_public" id="is_public" {% if list.is_public
|
||||
%}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_public">Lista publiczna</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input rounded" type="checkbox" name="is_temporary" id="is_temporary" {% if
|
||||
list.is_temporary %}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_temporary">Lista tymczasowa</label>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="expires_date" class="form-label">Data wygaśnięcia</label>
|
||||
<input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
|
||||
name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="expires_time" class="form-label">Godzina wygaśnięcia</label>
|
||||
<input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
|
||||
name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" name="is_archived" id="is_archived" {% if list.is_archived
|
||||
%}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_archived">Zarchiwizowana</label>
|
||||
</div>
|
||||
|
||||
<div class="btn-group mt-4" role="group">
|
||||
<button type="submit" class="btn btn-outline-success">Zapisz</button>
|
||||
<a href="{{ url_for('main_page') }}" class="btn btn-outline-light">Anuluj</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<hr class="my-3">
|
||||
<!-- Trigger przycisk -->
|
||||
<div class="btn-group mt-4" role="group">
|
||||
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
|
||||
🗑️ Usuń tę listę
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- MODAL -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content bg-dark border-danger text-white">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title text-danger" id="deleteModalLabel">Potwierdź usunięcie</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Aby usunąć listę <strong>{{ list.title }}</strong>, wpisz <code>usuń</code> i poczekaj 2 sekundy:</p>
|
||||
<input type="text" id="confirm-delete-input" class="form-control bg-dark text-white border-warning"
|
||||
placeholder="usuń">
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
|
||||
<button id="confirm-delete-btn" class="btn btn-outline-danger" disabled>🗑️ Usuń</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
|
||||
|
||||
|
||||
<!-- Hidden delete form -->
|
||||
<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}"></script>
|
||||
{% endblock %}
|
||||
@@ -13,4 +13,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -3,18 +3,18 @@
|
||||
{% block content %}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
|
||||
<h2 class="mb-2">
|
||||
Lista: <strong>{{ list.title }}</strong>
|
||||
{% if list.is_archived %}
|
||||
<span class="badge bg-secondary ms-2">(Archiwalna)</span>
|
||||
{% endif %}</h2>
|
||||
<h2 class="mb-2">
|
||||
Lista: <strong>{{ list.title }}</strong>
|
||||
{% if list.is_archived %}
|
||||
<span class="badge bg-secondary ms-2">(Archiwalna)</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
|
||||
<a href="/" class="btn btn-outline-secondary">← Powrót do list</a>
|
||||
<a href="/" class="btn btn-outline-secondary">← Powrót do list</a>
|
||||
</div>
|
||||
|
||||
<a href="{{ request.url_root }}share/{{ list.share_token }}"
|
||||
class="btn btn-primary btn-sm w-100 mb-3"
|
||||
{% if not list.is_public %}disabled{% endif %}>
|
||||
<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-primary btn-sm w-100 mb-3" {% if not
|
||||
list.is_public %}disabled{% endif %}>
|
||||
✅ Otwórz tryb zakupowy / odznaczania produktów
|
||||
</a>
|
||||
<div id="share-card" class="card bg-dark text-white mb-4">
|
||||
@@ -22,26 +22,28 @@ Lista: <strong>{{ list.title }}</strong>
|
||||
<div class="mb-2">
|
||||
<strong id="share-header">
|
||||
{% if list.is_public %}
|
||||
🔗 Udostępnij link:
|
||||
🔗 Udostępnij link:
|
||||
{% else %}
|
||||
🙈 Lista jest ukryta przed gośćmi
|
||||
🙈 Lista jest ukryta przed gośćmi
|
||||
{% endif %}
|
||||
</strong>
|
||||
<span id="share-url" class="badge bg-secondary text-wrap" style="font-size: 0.7rem; {% if not list.is_public %}display: none;{% endif %}">
|
||||
<span id="share-url" class="badge bg-secondary text-wrap"
|
||||
style="font-size: 0.7rem; {% if not list.is_public %}display: none;{% endif %}">
|
||||
{{ request.url_root }}share/{{ list.share_token }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex flex-column flex-md-row gap-2">
|
||||
<button id="copyBtn" class="btn btn-success btn-sm flex-fill"
|
||||
onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')"
|
||||
{% if not list.is_public %}disabled{% endif %}>
|
||||
onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')" {% if not list.is_public %}disabled{%
|
||||
endif %}>
|
||||
📋 Skopiuj / Udostępnij
|
||||
</button>
|
||||
<button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill" onclick="toggleVisibility({{ list.id }})">
|
||||
<button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill"
|
||||
onclick="toggleVisibility({{ list.id }})">
|
||||
{% if list.is_public %}
|
||||
🙈 Ukryj listę
|
||||
🙈 Ukryj listę
|
||||
{% else %}
|
||||
👁️ Udostępnij ponownie
|
||||
👁️ Udostępnij ponownie
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
@@ -57,65 +59,94 @@ Lista: <strong>{{ list.title }}</strong>
|
||||
</h5>
|
||||
|
||||
<div class="progress progress-dark position-relative">
|
||||
<div id="progress-bar"
|
||||
class="progress-bar bg-warning text-dark"
|
||||
role="progressbar"
|
||||
style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div id="progress-bar" class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
|
||||
<span id="progress-label" class="progress-label small fw-bold
|
||||
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
|
||||
{{ percent|round(0) }}%
|
||||
{{ percent|round(0) }}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if total_expense > 0 %}
|
||||
<div id="total-expense2" class="text-success fw-bold mb-3">
|
||||
💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
|
||||
</div>
|
||||
<div id="total-expense2" class="text-success fw-bold mb-3">
|
||||
💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="total-expense2" class="text-success fw-bold mb-3">
|
||||
💸 Łącznie wydano: 0.00 PLN
|
||||
</div>
|
||||
<div id="total-expense2" class="text-success fw-bold mb-3">
|
||||
💸 Łącznie wydano: 0.00 PLN
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-check form-switch mb-3 d-flex justify-content-end">
|
||||
<input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
|
||||
<label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
|
||||
<button id="sort-toggle-btn" class="btn btn-sm btn-outline-warning" onclick="toggleSortMode()">
|
||||
✳️ Zmień kolejność
|
||||
</button>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
|
||||
<label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="items" class="list-group mb-3">
|
||||
<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
|
||||
{% for item in items %}
|
||||
<li data-name="{{ item.name|lower }}" id="item-{{ item.id }}" class="list-group-item d-flex justify-content-between align-items-center flex-wrap {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">
|
||||
<div class="d-flex align-items-center flex-wrap gap-2 flex-grow-1">
|
||||
<input class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
|
||||
<span id="name-{{ item.id }}" class="{% if item.purchased %}text-white{% else %}text-white{% endif %}">
|
||||
{{ item.name }}
|
||||
{% if item.quantity and item.quantity > 1 %}
|
||||
<span class="badge bg-secondary">x{{ item.quantity }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if item.note %}
|
||||
<small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mt-2 mt-md-0 d-flex gap-1">
|
||||
<button class="btn btn-sm btn-outline-warning"
|
||||
{% if list.is_archived %}disabled{% else %}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})"{% endif %}>
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger"
|
||||
{% if list.is_archived %}disabled{% else %}onclick="deleteItem({{ item.id }})"{% endif %}>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
<li data-name="{{ item.name|lower }}" id="item-{{ item.id }}"
|
||||
class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item
|
||||
{% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}"
|
||||
data-is-share="{{ 'true' if is_share else 'false' }}">
|
||||
|
||||
<div class="d-flex align-items-center gap-3 flex-grow-1">
|
||||
|
||||
<input id="checkbox-{{ item.id }}" class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif
|
||||
%} {% if list.is_archived or item.not_purchased %}disabled{% endif %}>
|
||||
|
||||
<span id="name-{{ item.id }}" class="text-white">
|
||||
{{ item.name }}
|
||||
{% if item.quantity and item.quantity > 1 %}
|
||||
<span class="badge bg-secondary">x{{ item.quantity }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
{% if item.note %}
|
||||
<small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
|
||||
{% endif %}
|
||||
|
||||
{% if item.not_purchased_reason %}
|
||||
<small class="text-dark ms-4">[ <b>Powód: {{ item.not_purchased_reason }}</b> ]</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
{% if item.not_purchased %}
|
||||
<button type="button" class="btn btn-outline-success" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>
|
||||
✅ Przywróć
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>
|
||||
⚠️
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if not is_share %}
|
||||
<button type="button" class="btn btn-outline-warning" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})" {% endif %}>
|
||||
✏️
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="deleteItem({{ item.id }})" {% endif %}>
|
||||
🗑️
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% else %}
|
||||
<li id="empty-placeholder"
|
||||
class="list-group-item bg-dark text-secondary text-center w-100">
|
||||
Brak produktów w tej liście.
|
||||
</li>
|
||||
<li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">
|
||||
Brak produktów w tej liście.
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -128,8 +159,10 @@ Lista: <strong>{{ list.title }}</strong>
|
||||
</div>
|
||||
<div class="col-12 col-md-10">
|
||||
<div class="input-group w-100">
|
||||
<input type="text" id="newItem" name="name" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość" required>
|
||||
<input type="number" id="newQuantity" name="quantity" class="form-control bg-dark text-white border-secondary" placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
|
||||
<input type="text" id="newItem" name="name" class="form-control bg-dark text-white border-secondary"
|
||||
placeholder="Dodaj produkt i ilość" required>
|
||||
<input type="number" id="newQuantity" name="quantity" class="form-control bg-dark text-white border-secondary"
|
||||
placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
|
||||
<button type="button" class="btn btn-success rounded-end" onclick="addItem({{ list.id }})">➕ Dodaj</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,17 +175,18 @@ Lista: <strong>{{ list.title }}</strong>
|
||||
|
||||
<div class="row g-3 mt-2" id="receiptGallery">
|
||||
{% if receipt_files %}
|
||||
{% for file in receipt_files %}
|
||||
<div class="col-6 col-md-4 col-lg-3 text-center">
|
||||
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
|
||||
<img src="{{ url_for('uploaded_file', filename=file) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for file in receipt_files %}
|
||||
<div class="col-6 col-md-4 col-lg-3 text-center">
|
||||
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
|
||||
<img src="{{ url_for('uploaded_file', filename=file) }}"
|
||||
class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="alert alert-info text-center w-100" role="alert">
|
||||
Brak wgranych paragonów do tej listy.
|
||||
</div>
|
||||
<div class="alert alert-info text-center w-100" role="alert">
|
||||
Brak wgranych paragonów do tej listy.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -176,11 +210,19 @@ Lista: <strong>{{ list.title }}</strong>
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}"></script>
|
||||
<script>
|
||||
const isShare = document.getElementById('items').dataset.isShare === 'true';
|
||||
window.IS_SHARE = isShare;
|
||||
window.LIST_ID = {{ list.id }};
|
||||
</script>
|
||||
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='mass_add.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='sort_mode.js') }}"></script>
|
||||
<script>
|
||||
setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -7,16 +7,16 @@
|
||||
|
||||
|
||||
{% if list.is_archived %}
|
||||
<span class="badge bg-secondary ms-2">(Archiwalna)</span>
|
||||
<span class="badge bg-secondary ms-2">(Archiwalna)</span>
|
||||
{% endif %}
|
||||
{% if total_expense > 0 %}
|
||||
<span id="total-expense1" class="badge bg-success ms-2">
|
||||
💸 {{ '%.2f'|format(total_expense) }} PLN
|
||||
</span>
|
||||
<span id="total-expense1" class="badge bg-success ms-2">
|
||||
💸 {{ '%.2f'|format(total_expense) }} PLN
|
||||
</span>
|
||||
{% else %}
|
||||
<span id="total-expense" class="badge bg-secondary ms-2" style="display: none;">
|
||||
💸 0.00 PLN
|
||||
</span>
|
||||
<span id="total-expense" class="badge bg-secondary ms-2" style="display: none;">
|
||||
💸 0.00 PLN
|
||||
</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
|
||||
@@ -25,81 +25,113 @@
|
||||
<label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
|
||||
</div>
|
||||
|
||||
<ul id="items" class="list-group mb-3">
|
||||
<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
|
||||
{% for item in items %}
|
||||
<li data-name="{{ item.name|lower }}" id="item-{{ item.id }}" class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}"> <div class="d-flex align-items-center gap-3 flex-grow-1">
|
||||
<input class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
|
||||
<span id="name-{{ item.id }}" class="{% if item.purchased %}text-white{% else %}text-white{% endif %}">
|
||||
|
||||
<li data-name="{{ item.name|lower }}" id="item-{{ item.id }}"
|
||||
class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item
|
||||
{% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}">
|
||||
|
||||
<div class="d-flex align-items-center gap-3 flex-grow-1">
|
||||
|
||||
<input id="checkbox-{{ item.id }}" class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif
|
||||
%} {% if list.is_archived or item.not_purchased %}disabled{% endif %}>
|
||||
|
||||
<span id="name-{{ item.id }}" class="text-white">
|
||||
{{ item.name }}
|
||||
{% if item.quantity and item.quantity > 1 %}
|
||||
<span class="badge bg-secondary">x{{ item.quantity }}</span>
|
||||
<span class="badge bg-secondary">x{{ item.quantity }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
{% if item.note %}
|
||||
<small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
|
||||
<small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
|
||||
{% endif %}
|
||||
{% if item.not_purchased_reason %}
|
||||
<small class="text-dark ms-4">[ <b>Powód: {{ item.not_purchased_reason }}</b> ]</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-info"
|
||||
{% if list.is_archived %}disabled{% else %}onclick="openNoteModal(event, {{ item.id }})"{% endif %}>
|
||||
📝
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
{% if item.not_purchased %}
|
||||
<button type="button" class="btn btn-outline-success" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>
|
||||
✅ Przywróć
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>
|
||||
⚠️
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
|
||||
%}onclick="openNoteModal(event, {{ item.id }})" {% endif %}>
|
||||
📝
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
{% else %}
|
||||
<li id="empty-placeholder"
|
||||
class="list-group-item bg-dark text-secondary text-center w-100">
|
||||
Brak produktów w tej liście.
|
||||
</li>
|
||||
<li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">
|
||||
Brak produktów w tej liście.
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% if not list.is_archived %}
|
||||
<div class="input-group mb-2">
|
||||
<input id="newItem" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość">
|
||||
<input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary" placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
|
||||
<button onclick="addItem({{ list.id }})" class="btn btn-success rounded-end">➕ Dodaj</button>
|
||||
</div>
|
||||
<div class="input-group mb-2">
|
||||
<input id="newItem" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość">
|
||||
<input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary" placeholder="Ilość"
|
||||
min="1" value="1" style="max-width: 90px;">
|
||||
<button onclick="addItem({{ list.id }})" class="btn btn-success rounded-end">➕ Dodaj</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not list.is_archived %}
|
||||
<hr>
|
||||
<h5>💰 Dodaj wydatek</h5>
|
||||
<div class="input-group mb-2">
|
||||
<input id="expenseAmount" type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary" placeholder="Kwota (PLN)">
|
||||
<button onclick="submitExpense({{ list.id }})" class="btn btn-success rounded-end">💾 Zapisz</button>
|
||||
</div>
|
||||
<hr>
|
||||
<h5>💰 Dodaj wydatek</h5>
|
||||
<div class="input-group mb-2">
|
||||
<input id="expenseAmount" type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary"
|
||||
placeholder="Kwota (PLN)">
|
||||
<button onclick="submitExpense({{ list.id }})" class="btn btn-success rounded-end">💾 Zapisz</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
|
||||
<p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
|
||||
|
||||
<button class="btn btn-outline-light mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
|
||||
<button class="btn btn-outline-light mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#receiptSection"
|
||||
aria-expanded="false" aria-controls="receiptSection">
|
||||
📄 Pokaż sekcję paragonów
|
||||
</button>
|
||||
<div class="collapse" id="receiptSection">
|
||||
{% set receipt_pattern = 'list_' ~ list.id %}
|
||||
{% set receipt_pattern = 'list_' ~ list.id %}
|
||||
|
||||
<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
|
||||
<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
|
||||
|
||||
<div class="row g-3 mt-2" id="receiptGallery">
|
||||
{% if receipt_files %}
|
||||
<div class="row g-3 mt-2" id="receiptGallery">
|
||||
{% if receipt_files %}
|
||||
{% for file in receipt_files %}
|
||||
<div class="col-6 col-md-4 col-lg-3 text-center">
|
||||
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
|
||||
<img src="{{ url_for('uploaded_file', filename=file) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3 text-center">
|
||||
<a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
|
||||
<img src="{{ url_for('uploaded_file', filename=file) }}"
|
||||
class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% else %}
|
||||
<div class="alert alert-info text-center w-100" role="alert">
|
||||
Brak wgranych paragonów do tej listy.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not list.is_archived %}
|
||||
{% if not list.is_archived %}
|
||||
<hr>
|
||||
<h5>📤 Dodaj zdjęcie paragonu</h5>
|
||||
<form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data" class="text-center">
|
||||
<label for="receiptInput" class="btn btn-outline-light w-100 py-3 mb-2 d-flex align-items-center justify-content-center gap-2">
|
||||
<form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post"
|
||||
enctype="multipart/form-data" class="text-center">
|
||||
<label for="receiptInput"
|
||||
class="btn btn-outline-light w-100 py-3 mb-2 d-flex align-items-center justify-content-center gap-2">
|
||||
<i class="bi bi-upload"></i> 📸 <span id="fileLabel">Wybierz zdjęcie paragonu</span>
|
||||
</label>
|
||||
<input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="receiptInput">
|
||||
@@ -108,7 +140,7 @@
|
||||
<div id="progressBar" class="progress-bar bg-success fw-bold" role="progressbar" style="width: 0%;">0%</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -122,7 +154,8 @@
|
||||
</div>
|
||||
<form id="noteForm" onsubmit="submitNote(event)">
|
||||
<div class="modal-body">
|
||||
<textarea id="noteText" class="form-control" rows="4" placeholder="Np. 'Nie było, zamieniłem na inny'"></textarea>
|
||||
<textarea id="noteText" class="form-control" rows="4"
|
||||
placeholder="Np. 'Nie było, zamieniłem na inny'"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
|
||||
@@ -134,14 +167,23 @@
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const isShare = document.getElementById('items').dataset.isShare === 'true';
|
||||
window.IS_SHARE = isShare;
|
||||
window.LIST_ID = {{ list.id }};
|
||||
if (typeof isSorting === 'undefined') {
|
||||
var isSorting = false;
|
||||
}
|
||||
</script>
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='notes.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='clickable_row.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='receipt_section.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
|
||||
|
||||
<script>
|
||||
setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -9,10 +9,12 @@
|
||||
<div class="card-body">
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<input type="text" name="username" placeholder="Login" class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
<input type="text" name="username" placeholder="Login"
|
||||
class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="password" name="password" placeholder="Hasło" class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
<input type="password" name="password" placeholder="Hasło"
|
||||
class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success w-100">🔑 Zaloguj</button>
|
||||
</form>
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
{% block content %}
|
||||
|
||||
{% if not current_user.is_authenticated %}
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
Jesteś w trybie gościa. Możesz tylko przeglądać listy udostępnione publicznie.
|
||||
</div>
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
Jesteś w trybie gościa. Możesz tylko przeglądać listy udostępnione publicznie.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
@@ -17,15 +17,10 @@
|
||||
<div class="card-body">
|
||||
<form action="/create" method="post">
|
||||
<div class="input-group mb-3">
|
||||
<input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required class="form-control bg-dark text-white border-secondary">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary rounded-end"
|
||||
id="tempToggle"
|
||||
data-active="0"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
|
||||
<input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
|
||||
class="form-control bg-dark text-white border-secondary">
|
||||
<button type="button" class="btn btn-outline-secondary rounded-end" id="tempToggle" data-active="0"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
|
||||
Tymczasowa
|
||||
</button>
|
||||
<input type="hidden" name="temporary" id="temporaryHidden" value="0">
|
||||
@@ -37,87 +32,86 @@
|
||||
{% endif %}
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
|
||||
Twoje listy
|
||||
<button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#archivedModal">
|
||||
📁 Zarchiwizowane
|
||||
</button>
|
||||
</h3>
|
||||
{% if user_lists %}
|
||||
<ul class="list-group mb-4">
|
||||
{% for l in user_lists %}
|
||||
{% set purchased_count = l.purchased_count %}
|
||||
{% set total_count = l.total_count %}
|
||||
{% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
|
||||
<li class="list-group-item bg-dark text-white">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap w-100">
|
||||
<span class="fw-bold">{{ l.title }} (Autor: Ty)</span>
|
||||
<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
|
||||
Twoje listy
|
||||
<button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal"
|
||||
data-bs-target="#archivedModal">
|
||||
📁 Zarchiwizowane
|
||||
</button>
|
||||
</h3>
|
||||
{% if user_lists %}
|
||||
<ul class="list-group mb-4">
|
||||
{% for l in user_lists %}
|
||||
{% set purchased_count = l.purchased_count %}
|
||||
{% set total_count = l.total_count %}
|
||||
{% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
|
||||
<li class="list-group-item bg-dark text-white">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap w-100">
|
||||
<span class="fw-bold">{{ l.title }} (Autor: Ty)</span>
|
||||
|
||||
<div class="d-flex flex-wrap mt-2 mt-md-0">
|
||||
<a href="/list/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">📄 Otwórz</a>
|
||||
<a href="/copy/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">📋 Kopiuj</a>
|
||||
<a href="/edit_my_list/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">✏️ Edytuj</a>
|
||||
<a href="/toggle_archive_list/{{ l.id }}?archive=true" class="btn btn-sm btn-outline-light me-1 mb-1">🗄️ Archiwizuj</a>
|
||||
{% if l.is_public %}
|
||||
<a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">🙈 Ukryj</a>
|
||||
{% else %}
|
||||
<a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">👁️ Odkryj</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress progress-dark progress-thin mt-2 position-relative">
|
||||
<div class="progress-bar bg-warning text-dark"
|
||||
role="progressbar"
|
||||
style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<span class="progress-label small fw-bold
|
||||
<div class="btn-group mt-2 mt-md-0" role="group">
|
||||
<a href="/list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
|
||||
<a href="/copy/{{ l.id }}" class="btn btn-sm btn-outline-light">📋 Kopiuj</a>
|
||||
<a href="/edit_my_list/{{ l.id }}" class="btn btn-sm btn-outline-light">✏️ Edytuj</a>
|
||||
<a href="/toggle_archive_list/{{ l.id }}?archive=true" class="btn btn-sm btn-outline-light">🗄️ Archiwizuj</a>
|
||||
{% if l.is_public %}
|
||||
<a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light">🙈 Ukryj</a>
|
||||
{% else %}
|
||||
<a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light">👁️ Odkryj</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-dark progress-thin mt-2 position-relative">
|
||||
<div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<span class="progress-label small fw-bold
|
||||
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
|
||||
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
|
||||
{% if l.total_expense > 0 %}
|
||||
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p><span class="badge rounded-pill bg-secondary opacity-75">Nie masz jeszcze żadnych list. Utwórz pierwszą, korzystając z formularza powyżej!</span></p>
|
||||
{% endif %}
|
||||
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
|
||||
{% if l.total_expense > 0 %}
|
||||
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p><span class="badge rounded-pill bg-secondary opacity-75">Nie masz jeszcze żadnych list. Utwórz pierwszą, korzystając
|
||||
z formularza powyżej!</span></p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<h3 class="mt-4">Publiczne listy innych użytkowników</h3>
|
||||
{% if public_lists %}
|
||||
<ul class="list-group">
|
||||
{% for l in public_lists %}
|
||||
{% set purchased_count = l.purchased_count %}
|
||||
{% set total_count = l.total_count %}
|
||||
{% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
|
||||
<li class="list-group-item bg-dark text-white">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap w-100">
|
||||
<span class="fw-bold">{{ l.title }} (Autor: {{ l.owner.username }})</span>
|
||||
<a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
|
||||
</div>
|
||||
<div class="progress progress-dark progress-thin mt-2 position-relative">
|
||||
<div class="progress-bar bg-warning text-dark"
|
||||
role="progressbar"
|
||||
style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<span class="progress-label small fw-bold
|
||||
<ul class="list-group">
|
||||
{% for l in public_lists %}
|
||||
{% set purchased_count = l.purchased_count %}
|
||||
{% set total_count = l.total_count %}
|
||||
{% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
|
||||
<li class="list-group-item bg-dark text-white">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap w-100">
|
||||
<span class="fw-bold">{{ l.title }} (Autor: {{ l.owner.username }})</span>
|
||||
<a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
|
||||
</div>
|
||||
<div class="progress progress-dark progress-thin mt-2 position-relative">
|
||||
<div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
|
||||
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
<span class="progress-label small fw-bold
|
||||
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
|
||||
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
|
||||
{% if l.total_expense > 0 %}
|
||||
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
|
||||
{% if l.total_expense > 0 %}
|
||||
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p><span class="badge rounded-pill bg-secondary opacity-75">Brak dostępnych list publicznych do wyświetlenia</span></p>
|
||||
<p><span class="badge rounded-pill bg-secondary opacity-75">Brak dostępnych list publicznych do wyświetlenia</span></p>
|
||||
{% endif %}
|
||||
|
||||
<div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" aria-hidden="true">
|
||||
@@ -129,18 +123,19 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% if archived_lists %}
|
||||
<ul class="list-group">
|
||||
{% for l in archived_lists %}
|
||||
<li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap">
|
||||
<span>{{ l.title }}</span>
|
||||
<a href="/toggle_archive_list/{{ l.id }}?archive=false" class="btn btn-sm btn-outline-success">♻️ Przywróć</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="list-group">
|
||||
{% for l in archived_lists %}
|
||||
<li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap">
|
||||
<span>{{ l.title }}</span>
|
||||
<a href="/toggle_archive_list/{{ l.id }}?archive=false" class="btn btn-sm btn-outline-success">♻️
|
||||
Przywróć</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
Nie masz żadnych zarchiwizowanych list.
|
||||
</div>
|
||||
<div class="alert alert-info text-center" role="alert">
|
||||
Nie masz żadnych zarchiwizowanych list.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -154,4 +149,4 @@
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -10,7 +10,8 @@
|
||||
<div class="card-body">
|
||||
<form method="post">
|
||||
<div class="mb-3">
|
||||
<input type="password" name="password" placeholder="Hasło" class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
<input type="password" name="password" placeholder="Hasło"
|
||||
class="form-control bg-dark text-white border-secondary rounded" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success w-100">🔓 Wejdź</button>
|
||||
</form>
|
||||
@@ -19,9 +20,9 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelector('input[name="password"]').focus();
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelector('input[name="password"]').focus();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
84
templates/user_expenses.html
Normal file
84
templates/user_expenses.html
Normal file
@@ -0,0 +1,84 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}📊 Twoje wydatki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
|
||||
<h2 class="mb-2">Statystyki wydatków</h2>
|
||||
<a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs mb-3" id="expenseTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="table-tab" data-bs-toggle="tab" data-bs-target="#tableTab" type="button"
|
||||
role="tab">
|
||||
📄 Tabela
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chartTab" type="button" role="tab">
|
||||
📊 Wykres
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="expenseTabsContent">
|
||||
<!-- Tabela -->
|
||||
<div class="tab-pane fade show active" id="tableTab" role="tabpanel">
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-body">
|
||||
{% if expense_table %}
|
||||
<div class="row g-4">
|
||||
{% for row in expense_table %}
|
||||
<div class="col-12 col-sm-6 col-lg-4">
|
||||
<div class="card bg-dark text-white border border-secondary h-100 shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-truncate" title="{{ row.title }}">{{ row.title }}</h5>
|
||||
<p class="mb-1">💸 <strong>{{ '%.2f'|format(row.amount) }} PLN</strong></p>
|
||||
<p class="mb-0">📅 {{ row.added_at.strftime('%Y-%m-%d') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-info text-center mb-0">Brak wydatków do wyświetlenia.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wykres -->
|
||||
<div class="tab-pane fade" id="chartTab" role="tabpanel">
|
||||
<div class="card bg-dark text-white mb-4">
|
||||
<div class="card-body">
|
||||
<p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
|
||||
<canvas id="expensesChart" height="120"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2 mb-4">
|
||||
<button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📆 Kwartalne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
|
||||
<button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📈 Roczne</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<input type="date" id="startDate" class="form-control bg-dark text-white border-secondary">
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<input type="date" id="endDate" class="form-control bg-dark text-white border-secondary">
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<button class="btn btn-outline-light w-100" id="customRangeBtn">📊 Zakres własny</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
|
||||
<script src="{{ url_for('static_bp.serve_js', filename='user_expenses.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user