podzial dzienny

static/js/expense_chart.js

@@ -7,6 +7,9 @@ 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;
 
@@ -27,6 +30,8 @@ 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 => {
@@ -96,25 +101,28 @@ 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, żeby inne skrypty mogły wywołać reload
+    // Udostępnienie globalne
     window.loadExpenses = loadExpenses;
 
+    // Przyciski podziału kategorii
     const toggleBtn = document.getElementById("toggleCategorySplit");
     toggleBtn.addEventListener("click", function () {
         categorySplit = !categorySplit;
 
-        // Znajdź aktualnie aktywny przycisk podziału czasu
-        let activeRange = 'currentmonth'; // domyślna wartość
+        // Znajdź aktywny przycisk podziału czasu (toggleDailySplit lub toggleMonthlySplit)
+        let activeTimeSplit = 'currentmonth';
         if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) {
-            activeRange = 'daily';
+            activeTimeSplit = 'daily';
         } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) {
-            activeRange = 'monthly';
+            activeTimeSplit = 'monthly';
         }
 
         if (categorySplit) {
@@ -126,16 +134,24 @@ document.addEventListener("DOMContentLoaded", function () {
             this.classList.remove("btn-outline-info");
             this.classList.add("btn-outline-warning");
         }
-        loadExpenses(activeRange);
+
+        // 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);
     });
-    
+
+    // 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);
@@ -143,22 +159,26 @@ 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();
@@ -173,20 +193,60 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // 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)
+        // Sprawdź, który przycisk podziału czasu jest aktywny
+        let activeTimeSplit = 'currentmonth';
         if (document.getElementById('toggleDailySplit').classList.contains('btn-primary')) {
-            loadExpenses('daily');
+            activeTimeSplit = 'daily';
         } else if (document.getElementById('toggleMonthlySplit').classList.contains('btn-primary')) {
-            loadExpenses('monthly');
-        } else {
-            loadExpenses('currentmonth'); // Albo inna domyślna wartość
+            activeTimeSplit = 'monthly';
         }
+
+        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');
 
-    // Jeśli jesteśmy od razu na zakładce Wykres
-   //if (document.getElementById('chart-tab').classList.contains('active')) {
-   //     loadExpenses("currentmonth");
-   // }
+        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');
 
 });