const path = window.location.pathname // Setting up interactivity according to the current page if (path == '/login') { trim_inputs_on_blur() } else if (path == '/payment') { // Payment creation trim_inputs_on_blur() auto_fill_category() } else if (path.startsWith('/payment/')) { // Payment modification trim_inputs_on_blur() auto_fill_category() control_remove_button() } else if (path == '/income') { // Income creation trim_inputs_on_blur() } else if (path.startsWith('/income/')) { // Income modification trim_inputs_on_blur() control_remove_button() } else if (path == '/category') { // Category creation trim_inputs_on_blur() } else if (path.startsWith('/category/')) { // Category modification trim_inputs_on_blur() control_remove_button() } else if (path == '/balance') { } else if (path == '/statistics') { show_statistics() } // Functions function trim_inputs_on_blur() { document.querySelectorAll('input').forEach(function (input) { input.addEventListener('blur', function () { input.value = input.value.trim() }) }) } function control_remove_button() { const removeInput = document.getElementById('remove-input') const removeButton = document.getElementById('remove-button') if (removeInput && removeButton) { removeInput.addEventListener('input', function() { if (removeInput.value.trim() == removeInput.getAttribute('data-name')) { removeButton.removeAttribute('disabled') } else { removeButton.setAttribute('disabled', true) } }) } } function auto_fill_category() { const name = document.getElementById('name') const category = document.getElementById('category_id') function onNameChange() { const query = name.value.trim() if (query) { const xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { category.value = this.responseText } } xhttp.open('GET', `/payment/category?payment_name=${query}`, true) xhttp.send() } } name.addEventListener('input', debounce(onNameChange, 500)) } function show_statistics() { const categories = JSON.parse(document.getElementById('categories').textContent) const incomes = JSON.parse(document.getElementById('incomes').textContent) const payments = JSON.parse(document.getElementById('payments').textContent) const dates = incomes.map(function (i) { return i.date }) const datasets = [ { label: 'Revenus', data: incomes.map(function (i) { return i.amount }), fill: false, backgroundColor: '#222222', borderColor: '#222222' } ] const total_payments = {}; const categories_payments = {} payments.forEach(function (p) { if (categories_payments[p.category_id] === undefined) { categories_payments[p.category_id] = {} } categories_payments[p.category_id][p.start_date] = p.cost if (total_payments[p.start_date] === undefined) { total_payments[p.start_date] = 0 } total_payments[p.start_date] += p.cost }) datasets.push({ label: 'Total des paiements', data: dates.map(function (d) { return total_payments[d] || 0 }), fill: false, backgroundColor: '#555555', borderColor: '#555555' }) Object.keys(categories_payments).forEach(function (category_id) { const category_payments = categories_payments[category_id] const category = categories.find(function (c) { return c.id == category_id }) datasets.push({ label: category.name, data: dates.map(function (d) { return category_payments[d] || 0 }), fill: false, backgroundColor: category.color, borderColor: category.color, }) }) const chart = new Chart(document.getElementById('g-Chart__Canvas').getContext('2d'), { type: 'line', data: { labels: dates, datasets }, options: { responsive: true, tooltips: { mode: 'nearest', intersect: false, callbacks: { title: function(tooltipItem, data) { return capitalize(prettyPrintMonth(tooltipItem[0].xLabel)) }, label: function(tooltipItem, data) { let label = data.datasets[tooltipItem.datasetIndex].label || '' if (label) { label += ': ' } label += `${tooltipItem.yLabel} €` return label } } }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [ { ticks: { callback: prettyPrintMonth } } ], yAxes: [ { ticks: { beginAtZero: true, callback: function(value) { return `${value} €` } } } ] } } }) } function debounce(callback, delay) { let timeout return function() { clearTimeout(timeout) timeout = setTimeout(callback, delay) } } function prettyPrintMonth(isoDate) { xs = isoDate.split('-') months = [ 'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre' ] return `${months[parseInt(xs[1]) - 1]} ${xs[0]}` } function capitalize(str) { return str.replace(/^\w/, function (c) { return c.toUpperCase() }) }