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

podzial dzienny

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-09-17 21:59:23 +02:00
parent cee5e31646
commit e4a33ad6aa
2 changed files with 107 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
static/js/chart_split_controls.js
View File

@@ -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');
}
});

188
static/js/expense_chart.js
View File

@@ -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");
//}
});