From e4a33ad6aaa4c6cd3797b75e21a05fcfccced288 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Wed, 17 Sep 2025 21:59:23 +0200 Subject: [PATCH] podzial dzienny --- static/js/chart_split_controls.js | 138 +++++++++++----------- static/js/expense_chart.js | 188 +++++++----------------------- 2 files changed, 107 insertions(+), 219 deletions(-) diff --git a/static/js/chart_split_controls.js b/static/js/chart_split_controls.js index ef72b57..e99efb6 100644 --- a/static/js/chart_split_controls.js +++ b/static/js/chart_split_controls.js @@ -1,84 +1,76 @@ -document.addEventListener('DOMContentLoaded', function() { - // Znajdź przyciski - const toggleMonthlySplit = document.getElementById('toggleMonthlySplit'); - const toggleDailySplit = document.getElementById('toggleDailySplit'); - const toggleCategorySplit = document.getElementById('toggleCategorySplit'); +document.addEventListener("DOMContentLoaded", function () { + const toggleMonthlySplit = document.getElementById("toggleMonthlySplit"); + const toggleDailySplit = document.getElementById("toggleDailySplit"); + const toggleCategorySplit = document.getElementById("toggleCategorySplit"); - // 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'); + 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"); + } } - } - // Obsługa kliknięć przycisków czasu - toggleMonthlySplit.addEventListener('click', function() { - setActiveTimeSplit('monthly'); + toggleMonthlySplit.addEventListener("click", function () { + setActiveTimeSplit("monthly"); - const startDate = document.getElementById('startDate')?.value || null; - const endDate = document.getElementById('endDate')?.value || null; + const startDate = document.getElementById("startDate")?.value || null; + const endDate = document.getElementById("endDate")?.value || null; + 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('monthly', startDate, endDate); + loadExpenses("custom", startDate, endDate); } else { - loadExpenses('monthly'); + loadExpenses("daily"); } - }); - - toggleDailySplit.addEventListener('click', function() { - setActiveTimeSplit('daily'); - - const startDate = document.getElementById('startDate')?.value || null; - const endDate = document.getElementById('endDate')?.value || null; - - // Przy podziale dziennym, jeśli zakres dat jest podany, użyj 'custom' - if (startDate && endDate) { - loadExpenses('custom', startDate, endDate); - } else { - loadExpenses('daily'); - } - }); - - // 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 { - 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'); - - const startDate = document.getElementById('startDate')?.value || null; - const endDate = document.getElementById('endDate')?.value || null; - - if (startDate && endDate) { - loadExpenses('custom', startDate, endDate); - } else { - loadExpenses('daily'); - } - }); diff --git a/static/js/expense_chart.js b/static/js/expense_chart.js index 0a5df7c..22f5ace 100644 --- a/static/js/expense_chart.js +++ b/static/js/expense_chart.js @@ -1,5 +1,4 @@ document.addEventListener("DOMContentLoaded", function () { - let expensesChart = null; let categorySplit = true; @@ -10,28 +9,25 @@ document.addEventListener("DOMContentLoaded", function () { } function loadExpenses(range = "currentmonth", startDate = null, endDate = null) { - let url = '/expenses_data?range=' + range; + 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}`; + } + } 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'; - } - - // Jeśli zakres to custom, to wymuszamy przekazanie dat jako kompletny URL - if (range === 'custom' && startDate && endDate) { - url = `/expenses_data?range=custom&start_date=${startDate}&end_date=${endDate}`; - if (showAllCheckbox) { - url += showAllCheckbox.checked ? '&show_all=true' : '&show_all=false'; - } else { - url += '&show_all=true'; - } - } else { - if (startDate && endDate) { - url += `&start_date=${startDate}&end_date=${endDate}`; - } + url += "&show_all=true"; } if (window.selectedCategoryId) { @@ -39,65 +35,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 ''; // pomija kategorie o wartości 0 - } - return context.dataset.label + ': ' + context.parsed.y; - } - } + if (context.parsed.y === 0) return ""; + 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 } }, + }, }); } @@ -106,119 +102,19 @@ 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"); - //} });