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

podzial dzienny

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-09-17 21:24:52 +02:00
parent d87a0aacfb
commit ad219cdf4b
2 changed files with 58 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
static/js/expense_chart.js
View File

@@ -173,15 +173,52 @@ document.addEventListener("DOMContentLoaded", function () {
loadExpenses("currentmonth");
}
document.getElementById('toggleDailySplit').addEventListener('click', function() {
// Pobierz aktualne daty jeśli są ustawione w inputach
const startDateInput = document.getElementById('startDate');
const endDateInput = document.getElementById('endDate');
let startDate = startDateInput ? startDateInput.value : null;
let endDate = endDateInput ? endDateInput.value : null;
// Wywołaj funkcję z "daily" jako typ zakresu
loadExpenses('daily', startDate, endDate);
// podzial casu
const toggleMonthlySplit = document.getElementById('toggleMonthlySplit');
const toggleDailySplit = document.getElementById('toggleDailySplit');
const toggleCategorySplit = document.getElementById('toggleCategorySplit');
toggleMonthlySplit.addEventListener('click', function() {
this.classList.add('btn-primary');
this.classList.remove('btn-outline-light');
this.setAttribute('aria-pressed', 'true');
toggleDailySplit.classList.remove('btn-primary');
toggleDailySplit.classList.add('btn-outline-light');
toggleDailySplit.setAttribute('aria-pressed', 'false');
loadExpenses('monthly');
});
toggleDailySplit.addEventListener('click', function() {
this.classList.add('btn-primary');
this.classList.remove('btn-outline-light');
this.setAttribute('aria-pressed', 'true');
toggleMonthlySplit.classList.remove('btn-primary');
toggleMonthlySplit.classList.add('btn-outline-light');
toggleMonthlySplit.setAttribute('aria-pressed', 'false');
loadExpenses('daily');
});
toggleCategorySplit.addEventListener('click', function() {
const isActive = this.classList.contains('btn-primary');
if (isActive) {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-light');
this.setAttribute('aria-pressed', 'false');
// Wyłącz podział na kategorie
loadExpenses(); // bez podziału na kategorie
} else {
this.classList.add('btn-primary');
this.classList.remove('btn-outline-light');
this.setAttribute('aria-pressed', 'true');
// Włącz podział na kategorie
loadExpenses({ bycategory: true });
}
});
});

20
templates/expenses.html
View File

@@ -133,14 +133,20 @@
<div class="card bg-dark text-white mb-4">
<div class="card-body">
<div class="d-flex gap-2 mb-2">
<button class="btn btn-outline-light flex-fill py-2 mb-0 d-flex align-items-center justify-content-center gap-2" id="toggleCategorySplit">
Pokaż podział na kategorie
</button>
<button class="btn btn-outline-light flex-fill py-2 mb-0 d-flex align-items-center justify-content-center gap-2" id="toggleDailySplit">
Pokaż podział dzienny
</button>
<div class="d-flex gap-3 mb-3">
<div>
<h6 class="text-white">Podział według czasu</h6>
<div class="btn-group" role="group" aria-label="Podział czasu">
<button type="button" class="btn btn-outline-light" id="toggleMonthlySplit" aria-pressed="true">Pokaż podział miesięczny</button>
<button type="button" class="btn btn-outline-light" id="toggleDailySplit" aria-pressed="false">Pokaż podział dzienny</button>
</div>
</div>
<div>
<h6 class="text-white">Podział według kategorii</h6>
<button class="btn btn-outline-light" id="toggleCategorySplit" aria-pressed="false">Pokaż podział na kategorie</button>
</div>
</div>
<p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
<canvas id="expensesChart" height="120"></canvas>