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

kolory przyciskow

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-09-18 20:47:37 +02:00
parent 065f67c45e
commit f12272e7d0
3 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/chart_controls.js
View File

@@ -16,8 +16,8 @@ document.addEventListener("DOMContentLoaded", function () {
const daysAgo = (n) => { const d = new Date(); d.setDate(d.getDate() - n); return d; };
function setActiveTimeSplit(active) {
const on = (btn) => { btn.classList.add("btn-primary"); btn.classList.remove("btn-outline-light"); btn.setAttribute("aria-pressed", "true"); };
const off = (btn) => { btn.classList.remove("btn-primary"); btn.classList.add("btn-outline-light"); btn.setAttribute("aria-pressed", "false"); };
const on = (btn) => { btn.classList.add("btn-success btn-sm"); btn.classList.remove("btn-outline-light btn-sm"); btn.setAttribute("aria-pressed", "true"); };
const off = (btn) => { btn.classList.remove("btn-success btn-sm"); btn.classList.add("btn-outline-light btn-sm"); btn.setAttribute("aria-pressed", "false"); };
if (active === "monthly") { on(toggleMonthlySplit); off(toggleDailySplit); }
else { on(toggleDailySplit); off(toggleMonthlySplit); }
}

24
static/js/chart_split_controls.js
View File

@@ -7,20 +7,20 @@ document.addEventListener('DOMContentLoaded', function() {
// Funkcja ustawiająca aktywność przycisków podziału czasu
function setActiveTimeSplit(active) {
if (active === 'monthly') {
toggleMonthlySplit.classList.add('btn-primary');
toggleMonthlySplit.classList.remove('btn-outline-light');
toggleMonthlySplit.classList.add('btn-success btn-sm');
toggleMonthlySplit.classList.remove('btn-outline-light btn-sm');
toggleMonthlySplit.setAttribute('aria-pressed', 'true');
toggleDailySplit.classList.remove('btn-primary');
toggleDailySplit.classList.add('btn-outline-light');
toggleDailySplit.classList.remove('btn-success btn-sm');
toggleDailySplit.classList.add('btn-outline-light btn-sm');
toggleDailySplit.setAttribute('aria-pressed', 'false');
} else if (active === 'daily') {
toggleDailySplit.classList.add('btn-primary');
toggleDailySplit.classList.remove('btn-outline-light');
toggleDailySplit.classList.add('btn-success');
toggleDailySplit.classList.remove('btn-outline-light btn-sm');
toggleDailySplit.setAttribute('aria-pressed', 'true');
toggleMonthlySplit.classList.remove('btn-primary');
toggleMonthlySplit.classList.add('btn-outline-light');
toggleMonthlySplit.classList.remove('btn-success btn-sm');
toggleMonthlySplit.classList.add('btn-outline-light btn-sm');
toggleMonthlySplit.setAttribute('aria-pressed', 'false');
}
}
@@ -40,13 +40,13 @@ document.addEventListener('DOMContentLoaded', function() {
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.classList.remove('btn-success btn-sm');
this.classList.add('btn-outline-light btn-sm');
this.setAttribute('aria-pressed', 'false');
loadExpenses(); // wyłącz podział kategorii
} else {
this.classList.add('btn-primary');
this.classList.remove('btn-outline-light');
this.classList.add('btn-success btn-sm');
this.classList.remove('btn-outline-light btn-sm');
this.setAttribute('aria-pressed', 'true');
loadExpenses({ bycategory: true }); // włącz podział kategorii
}

9
templates/expenses.html
View File

@@ -137,20 +137,19 @@
<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ż
<button type="button" class="btn btn-outline-light btn-sm" id="toggleMonthlySplit" aria-pressed="true">Pokaż
podział miesięczny</button>
<button type="button" class="btn btn-outline-light" id="toggleDailySplit" aria-pressed="false">Pokaż
<button type="button" class="btn btn-outline-light btn-sm" 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
<button class="btn btn-outline-light btn-sm" 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>
</div>
@@ -161,6 +160,8 @@
<button class="btn btn-outline-light range-btn" data-range="last30days">🗓️ Ostatnie 30
dni</button>
<button class="btn btn-outline-light range-btn active" data-range="currentmonth">📅 Bieżący miesiąc</button>
<button class="btn btn-outline-light range-btn" data-range="last60days">🗓️ Ostatnie 60
dni</button>
<button class="btn btn-outline-light range-btn" data-range="monthly">📆 Miesięczne</button>
<button class="btn btn-outline-light range-btn" data-range="quarterly">📊 Kwartalne</button>
<button class="btn btn-outline-light range-btn" data-range="halfyearly">🗓️ Półroczne</button>