From e2761584a3d9a4ffc1d665f50385b2a04e71f72d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Wed, 17 Sep 2025 22:01:13 +0200 Subject: [PATCH] podzial dzienny --- static/js/chart_split_controls.js | 114 ++++++++----------- static/js/expense_chart.js | 178 +++++++++++++++++++++++------- 2 files changed, 184 insertions(+), 108 deletions(-) diff --git a/static/js/chart_split_controls.js b/static/js/chart_split_controls.js index e99efb6..4664fde 100644 --- a/static/js/chart_split_controls.js +++ b/static/js/chart_split_controls.js @@ -1,76 +1,58 @@ -document.addEventListener("DOMContentLoaded", function () { - const toggleMonthlySplit = document.getElementById("toggleMonthlySplit"); - const toggleDailySplit = document.getElementById("toggleDailySplit"); - const toggleCategorySplit = document.getElementById("toggleCategorySplit"); +document.addEventListener('DOMContentLoaded', function() { + // Znajdź przyciski + const toggleMonthlySplit = document.getElementById('toggleMonthlySplit'); + const toggleDailySplit = document.getElementById('toggleDailySplit'); + const toggleCategorySplit = document.getElementById('toggleCategorySplit'); - function setActiveTimeSplit(active) { - if (active === "monthly") { - toggleMonthlySplit.classList.add("btn-primary"); - toggleMonthlySplit.classList.remove("btn-outline-light"); - toggleMonthlySplit.setAttribute("aria-pressed", "true"); + // 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.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"); + 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"); - } + toggleMonthlySplit.classList.remove('btn-primary'); + toggleMonthlySplit.classList.add('btn-outline-light'); + toggleMonthlySplit.setAttribute('aria-pressed', 'false'); } + } - toggleMonthlySplit.addEventListener("click", function () { - setActiveTimeSplit("monthly"); + // Obsługa kliknięć przycisków czasu + toggleMonthlySplit.addEventListener('click', function() { + setActiveTimeSplit('monthly'); + loadExpenses('monthly'); + }); - const startDate = document.getElementById("startDate")?.value || null; - const endDate = document.getElementById("endDate")?.value || null; + toggleDailySplit.addEventListener('click', function() { + setActiveTimeSplit('daily'); + loadExpenses('daily'); + }); - if (startDate && endDate) { - loadExpenses("custom", startDate, endDate); - } else { - loadExpenses("monthly"); - } - }); - - toggleDailySplit.addEventListener("click", function () { - setActiveTimeSplit("daily"); - - const startDate = document.getElementById("startDate")?.value || null; - const endDate = document.getElementById("endDate")?.value || null; - - if (startDate && endDate) { - loadExpenses("custom", startDate, endDate); - } else { - 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"); - loadExpenses(); // wyłącz podział kategorii - } else { - this.classList.add("btn-primary"); - this.classList.remove("btn-outline-light"); - this.setAttribute("aria-pressed", "true"); - loadExpenses({ bycategory: true }); // włącz podział kategorii - } - }); - - // Domyślna inicjalizacja - podział dzienny z uwzględnieniem zakresu dat - setActiveTimeSplit("daily"); - const startDate = document.getElementById("startDate")?.value || null; - const endDate = document.getElementById("endDate")?.value || null; - if (startDate && endDate) { - loadExpenses("custom", startDate, endDate); + // Obsługa kliknięcia przycisku podziału kategorii + 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'); + loadExpenses(); // wyłącz podział kategorii } else { - loadExpenses("daily"); + this.classList.add('btn-primary'); + this.classList.remove('btn-outline-light'); + this.setAttribute('aria-pressed', 'true'); + loadExpenses({ bycategory: true }); // włącz podział kategorii } + }); + + // Inicjalizacja - domyślnie ustaw podział dzienny + setActiveTimeSplit('daily'); + loadExpenses('daily'); }); diff --git a/static/js/expense_chart.js b/static/js/expense_chart.js index 22f5ace..1af97d4 100644 --- a/static/js/expense_chart.js +++ b/static/js/expense_chart.js @@ -1,4 +1,5 @@ document.addEventListener("DOMContentLoaded", function () { + let expensesChart = null; let categorySplit = true; @@ -9,25 +10,18 @@ document.addEventListener("DOMContentLoaded", function () { } function loadExpenses(range = "currentmonth", startDate = null, endDate = null) { - let url; - - // Jeśli mamy wybrany własny zakres to zmieniamy range na 'custom' i wymuszamy przekazywanie dat - if (range === 'custom' && startDate && endDate) { - url = `/expenses_data?range=custom&start_date=${startDate}&end_date=${endDate}`; - } else { - url = '/expenses_data?range=' + range; - - if (startDate && endDate) { - url += `&start_date=${startDate}&end_date=${endDate}`; - } - } + let url = '/expenses_data?range=' + range; const showAllCheckbox = document.getElementById("showAllLists"); if (showAllCheckbox) { - url += showAllCheckbox.checked ? "&show_all=true" : "&show_all=false"; + url += showAllCheckbox.checked ? '&show_all=true' : '&show_all=false'; } else { - url += "&show_all=true"; + url += '&show_all=true'; + } + + if (startDate && endDate) { + url += `&start_date=${startDate}&end_date=${endDate}`; } if (window.selectedCategoryId) { @@ -35,65 +29,65 @@ document.addEventListener("DOMContentLoaded", function () { } if (categorySplit) { - url += "&by_category=true"; + url += '&by_category=true'; } fetch(url, { cache: "no-store" }) .then(response => response.json()) .then(data => { - const ctx = document.getElementById("expensesChart").getContext("2d"); + const ctx = document.getElementById('expensesChart').getContext('2d'); if (expensesChart) { expensesChart.destroy(); } const tooltipOptions = { - mode: "index", + mode: 'index', intersect: false, callbacks: { label: function (context) { - if (context.parsed.y === 0) return ""; - return context.dataset.label + ": " + context.parsed.y; - }, - }, + if (context.parsed.y === 0) { + return ''; // pomija kategorie o wartości 0 + } + return context.dataset.label + ': ' + context.parsed.y; + } + } }; if (categorySplit) { expensesChart = new Chart(ctx, { - type: "bar", + type: 'bar', data: { labels: data.labels, datasets: data.datasets }, options: { responsive: true, plugins: { tooltip: tooltipOptions, - legend: { position: "top" }, + legend: { position: 'top' } }, scales: { x: { stacked: true }, - y: { stacked: true, beginAtZero: true }, - }, - }, + y: { stacked: true, beginAtZero: true } + } + } }); } else { expensesChart = new Chart(ctx, { - type: "bar", + type: 'bar', data: { labels: data.labels, - datasets: [ - { - label: "Suma wydatków [PLN]", - data: data.expenses, - backgroundColor: "#0d6efd", - }, - ], + datasets: [{ + label: 'Suma wydatków [PLN]', + data: data.expenses, + backgroundColor: '#0d6efd' + }] }, options: { responsive: true, plugins: { - tooltip: tooltipOptions, + tooltip: tooltipOptions }, - scales: { y: { beginAtZero: true } }, - }, + scales: { y: { beginAtZero: true } } + } }); } @@ -102,19 +96,119 @@ document.addEventListener("DOMContentLoaded", function () { } else { let labelText = ""; if (range === "last30days") labelText = "Widok: ostatnie 30 dni"; - else if (range === "currentmonth") - labelText = "Widok: bieżący miesiąc"; + else if (range === "currentmonth") labelText = "Widok: bieżący miesiąc"; else 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"; - else if (range === "custom") labelText = "Widok: własny zakres"; - rangeLabel.textContent = labelText; } }) - .catch((error) => console.error("Błąd pobierania danych:", error)); + .catch(error => console.error("Błąd pobierania danych:", error)); } + // Udostępnienie globalne, żeby inne skrypty mogły wywołać reload window.loadExpenses = loadExpenses; + + const toggleBtn = document.getElementById("toggleCategorySplit"); + + toggleBtn.addEventListener("click", function () { + categorySplit = !categorySplit; + + const startDateInput = document.getElementById("startDate"); + const endDateInput = document.getElementById("endDate"); + const startDate = startDateInput ? startDateInput.value : null; + const endDate = endDateInput ? endDateInput.value : null; + + // Wybierz zakres - przy daily ustawiamy range = 'custom', by respektować daty + let activeRange = 'currentmonth'; // default + + if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) { + activeRange = (startDate && endDate) ? 'custom' : 'daily'; + } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) { + activeRange = 'monthly'; + } + + if (categorySplit) { + this.textContent = "🔵 Pokaż całościowo"; + this.classList.remove("btn-outline-warning"); + this.classList.add("btn-outline-info"); + } else { + this.textContent = "🎨 Pokaż podział na kategorie"; + this.classList.remove("btn-outline-info"); + this.classList.add("btn-outline-warning"); + } + + if (startDate && endDate) { + loadExpenses(activeRange, startDate, endDate); + } else { + loadExpenses(activeRange); + } + }); + + + toggleBtn.textContent = "🔵 Pokaż całościowo"; + toggleBtn.classList.remove("btn-outline-warning"); + toggleBtn.classList.add("btn-outline-info"); + + 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); + + 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!"); + } + }); + + 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'); + if (range === "currentmonth") { + const today = new Date(); + const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); + loadExpenses('custom', formatDate(firstDay), formatDate(today)); + } else { + loadExpenses(range); + } + }); + }); + + // Automatyczne ładowanie danych po przełączeniu na zakładkę Wykres + document.getElementById('chart-tab').addEventListener('shown.bs.tab', function () { + // Sprawdź jaki tryb jest aktywny (domyślnie dzienny lub miesięczny) + if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) { + const startDate = startDateInput.value || null; + const endDate = endDateInput.value || null; + + if (startDate && endDate) { + loadExpenses('daily', startDate, endDate); + } else { + loadExpenses('daily'); + } + } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) { + loadExpenses('monthly'); + } else { + loadExpenses('currentmonth'); // Albo inna domyślna wartość + } + }); + + // Jeśli jesteśmy od razu na zakładce Wykres + //if (document.getElementById('chart-tab').classList.contains('active')) { + // loadExpenses("currentmonth"); + //} });