From 174161b6677def15a119dbcc023e6101b22d0226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Wed, 17 Sep 2025 21:44:56 +0200 Subject: [PATCH] podzial dzienny --- static/js/expense_chart.js | 91 +++++++------------------------------- 1 file changed, 16 insertions(+), 75 deletions(-) diff --git a/static/js/expense_chart.js b/static/js/expense_chart.js index cfeb5f4..2d258e3 100644 --- a/static/js/expense_chart.js +++ b/static/js/expense_chart.js @@ -7,9 +7,6 @@ document.addEventListener("DOMContentLoaded", function () { window.selectedCategoryId = ""; } - // Przechowywany aktualny zakres czasu, domyślnie bieżący miesiąc - let currentRange = "currentmonth"; - function loadExpenses(range = "currentmonth", startDate = null, endDate = null) { let url = '/expenses_data?range=' + range; @@ -30,8 +27,6 @@ document.addEventListener("DOMContentLoaded", function () { url += '&by_category=true'; } - currentRange = range; // Aktualizuj globalny zakres czasu - fetch(url, { cache: "no-store" }) .then(response => response.json()) .then(data => { @@ -101,28 +96,25 @@ document.addEventListener("DOMContentLoaded", function () { else if (range === "quarterly") labelText = "Widok: kwartalne"; else if (range === "halfyearly") labelText = "Widok: półroczne"; else if (range === "yearly") labelText = "Widok: roczne"; - else if (range === "daily") labelText = "Widok: dzienne"; - else if (range === "custom") labelText = "Widok: własny zakres"; rangeLabel.textContent = labelText; } }) .catch(error => console.error("Błąd pobierania danych:", error)); } - // Udostępnienie globalne + // Udostępnienie globalne, żeby inne skrypty mogły wywołać reload window.loadExpenses = loadExpenses; - // Przyciski podziału kategorii const toggleBtn = document.getElementById("toggleCategorySplit"); toggleBtn.addEventListener("click", function () { categorySplit = !categorySplit; - // Znajdź aktywny przycisk podziału czasu (toggleDailySplit lub toggleMonthlySplit) - let activeTimeSplit = 'currentmonth'; + // Znajdź aktualnie aktywny przycisk podziału czasu + let activeRange = 'currentmonth'; // domyślna wartość if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) { - activeTimeSplit = 'daily'; + activeRange = 'daily'; } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) { - activeTimeSplit = 'monthly'; + activeRange = 'monthly'; } if (categorySplit) { @@ -134,24 +126,17 @@ document.addEventListener("DOMContentLoaded", function () { this.classList.remove("btn-outline-info"); this.classList.add("btn-outline-warning"); } - - // Zachowaj podświetlenie na aktywnym przycisku zakresu czasu - document.querySelectorAll(".range-btn").forEach(b => b.classList.remove("active")); - document.querySelector(`.range-btn[data-range="${currentRange}"]`)?.classList.add("active"); - - loadExpenses(activeTimeSplit); + loadExpenses(activeRange); }); - // Inicjalizacja tekstu i klas dla przycisku podziału kategorii + toggleBtn.textContent = "🔵 Pokaż całościowo"; toggleBtn.classList.remove("btn-outline-warning"); toggleBtn.classList.add("btn-outline-info"); - // Pola wyboru dat const startDateInput = document.getElementById("startDate"); const endDateInput = document.getElementById("endDate"); - // Domyślne ustawienie dat (ostatni tydzień) const today = new Date(); const lastWeek = new Date(today); lastWeek.setDate(today.getDate() - 7); @@ -159,26 +144,22 @@ document.addEventListener("DOMContentLoaded", function () { startDateInput.value = formatDate(lastWeek); endDateInput.value = formatDate(today); - // Obsługa własnego zakresu dat 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')); - currentRange = 'custom'; loadExpenses('custom', startDate, endDate); } else { alert("Proszę wybrać obie daty!"); } }); - // Obsługa przycisków zakresu czasu 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'); - currentRange = range; if (range === "currentmonth") { const today = new Date(); @@ -193,60 +174,20 @@ document.addEventListener("DOMContentLoaded", function () { // Automatyczne ładowanie danych po przełączeniu na zakładkę Wykres document.getElementById('chart-tab').addEventListener('shown.bs.tab', function () { - // Sprawdź, który przycisk podziału czasu jest aktywny - let activeTimeSplit = 'currentmonth'; + // Sprawdź jaki tryb jest aktywny (domyślnie dzienny lub miesięczny) if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) { - activeTimeSplit = 'daily'; + loadExpenses('daily'); } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) { - activeTimeSplit = 'monthly'; + loadExpenses('monthly'); + } else { + loadExpenses('currentmonth'); // Albo inna domyślna wartość } - - loadExpenses(activeTimeSplit); }); - // Inicjalizacja domyślna przy ładowaniu strony - // Ustaw toggle podziału czasu na dzienny domyślnie oraz załaduj wykres dzienny - function setActiveTimeSplit(active) { - const toggleMonthlySplit = document.getElementById('toggleMonthlySplit'); - const toggleDailySplit = document.getElementById('toggleDailySplit'); - if (active === 'monthly') { - toggleMonthlySplit.classList.add('btn-primary'); - toggleMonthlySplit.classList.remove('btn-outline-light'); - toggleMonthlySplit.setAttribute('aria-pressed', 'true'); - - toggleDailySplit.classList.remove('btn-primary'); - toggleDailySplit.classList.add('btn-outline-light'); - toggleDailySplit.setAttribute('aria-pressed', 'false'); - } else if (active === 'daily') { - toggleDailySplit.classList.add('btn-primary'); - toggleDailySplit.classList.remove('btn-outline-light'); - toggleDailySplit.setAttribute('aria-pressed', 'true'); - - toggleMonthlySplit.classList.remove('btn-primary'); - toggleMonthlySplit.classList.add('btn-outline-light'); - toggleMonthlySplit.setAttribute('aria-pressed', 'false'); - } - } - - // Przełączanie przycisków podziału czasu - const toggleMonthlySplit = document.getElementById('toggleMonthlySplit'); - const toggleDailySplit = document.getElementById('toggleDailySplit'); - - toggleMonthlySplit.addEventListener('click', function () { - setActiveTimeSplit('monthly'); - currentRange = 'monthly'; - loadExpenses('monthly'); - }); - - toggleDailySplit.addEventListener('click', function () { - setActiveTimeSplit('daily'); - currentRange = 'daily'; - loadExpenses('daily'); - }); - - // Inicjalizacja przy starcie - setActiveTimeSplit('daily'); - loadExpenses('daily'); + // Jeśli jesteśmy od razu na zakładce Wykres + //if (document.getElementById('chart-tab').classList.contains('active')) { + // loadExpenses("currentmonth"); + // } });