kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-11-20 08:30:06 +00:00
Code Issues Projects Releases Wiki Activity

Update subscriptions on new index

Browse Source
This commit is contained in:
James Cole
2023-09-16 08:45:19 +02:00
parent 241ad25e2f
commit 518712d9e8
2 changed files with 161 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
resources/assets/v2/pages/dashboard/subscriptions.js
View File

@@ -25,122 +25,161 @@ import {Chart} from 'chart.js';
import {I18n} from "i18n-js"; import {I18n} from "i18n-js";
import {loadTranslations} from "../../support/load-translations.js"; import {loadTranslations} from "../../support/load-translations.js";
const CACHE_KEY = 'dashboard-subscriptions-data'; //const CACHE_KEY = 'dashboard-subscriptions-data';
const SUBSCRIPTION_CACHE_KEY = 'dashboard-subscriptions-data';
let chart = null; // let chart = null;
let chartData = null; // let chartData = null;
let afterPromises = false; let afterPromises = false;
let i18n; // for translating items in the chart. let i18n; // for translating items in the chart.
let apiData = [];
/**
*
*/
function downloadSubscriptions(params) {
console.log('Downloading page ' + params.page + '...');
const getter = new Get();
getter.get(params).then((response) => {
let data = response.data;
let totalPages = parseInt(data.meta.pagination.total_pages);
apiData = [...apiData, ...data.data];
if (totalPages > params.page) {
params.page++;
downloadSubscriptions(params);
}
console.log('Done! ' + apiData.length + ' items downloaded.');
});
}
export default () => ({ export default () => ({
loading: false, loading: false,
autoConversion: false, autoConversion: false,
loadChart() { startSubscriptions() {
if (true === this.loading) { console.log('here we are');
return;
}
this.loading = true;
if (null !== chartData) {
this.drawChart(this.generateOptions(chartData));
this.loading = false;
return;
}
this.getFreshData();
},
drawChart(options) {
if (null !== chart) {
chart.data.datasets = options.data.datasets;
chart.update();
return;
}
chart = new Chart(document.querySelector("#subscriptions-chart"), options);
},
getFreshData() {
const cacheValid = window.store.get('cacheValid'); const cacheValid = window.store.get('cacheValid');
let cachedData = window.store.get(CACHE_KEY); let cachedData = window.store.get(SUBSCRIPTION_CACHE_KEY);
if (cacheValid && typeof cachedData !== 'undefined') { if (cacheValid && typeof cachedData !== 'undefined' && false) {
this.drawChart(this.generateOptions(cachedData)); console.error('cannot handle yet');
this.loading = false;
return; return;
} }
const getter = new Get();
let params = { let params = {
start: format(new Date(window.store.get('start')), 'y-MM-dd'), start: format(new Date(window.store.get('start')), 'y-MM-dd'),
end: format(new Date(window.store.get('end')), 'y-MM-dd') end: format(new Date(window.store.get('end')), 'y-MM-dd'),
page: 1
}; };
downloadSubscriptions(params);
getter.paid(params).then((response) => {
let paidData = response.data;
getter.unpaid(params).then((response) => {
let unpaidData = response.data;
let chartData = {paid: paidData, unpaid: unpaidData};
window.store.set(CACHE_KEY, chartData);
this.drawChart(this.generateOptions(chartData));
this.loading = false;
});
});
}, },
generateOptions(data) {
let options = getDefaultChartSettings('pie');
// console.log(data);
options.data.labels = [i18n.t('firefly.paid'), i18n.t('firefly.unpaid')];
options.data.datasets = [];
let collection = {};
for (let i in data.paid) {
if (data.paid.hasOwnProperty(i)) {
let current = data.paid[i];
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
unpaid: 0,
};
}
// in case of paid, add to "paid":
collection[currencyCode].paid += (parseFloat(amount) * -1);
}
}
// unpaid
for (let i in data.unpaid) {
if (data.unpaid.hasOwnProperty(i)) {
let current = data.unpaid[i];
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
let amount = this.autoConversion ? current.native_sum : current.sum;
if (!collection.hasOwnProperty(currencyCode)) {
collection[currencyCode] = {
paid: 0,
unpaid: 0,
};
}
// console.log(current);
// in case of paid, add to "paid":
collection[currencyCode].unpaid += parseFloat(amount);
}
}
for (let currencyCode in collection) {
if (collection.hasOwnProperty(currencyCode)) {
let current = collection[currencyCode];
options.data.datasets.push(
{
label: currencyCode,
data: [current.paid, current.unpaid],
backgroundColor: [
'rgb(54, 162, 235)', // green (paid)
'rgb(255, 99, 132)', // red (unpaid_
],
//hoverOffset: 4
}
)
}
}
return options; // loadChart() {
}, // if (true === this.loading) {
// return;
// }
// this.loading = true;
//
// if (null !== chartData) {
// //this.drawChart(this.generateOptions(chartData));
// //this.loading = false;
//
// }
// //this.getFreshData();
// },
// drawChart(options) {
// if (null !== chart) {
// // chart.data.datasets = options.data.datasets;
// // chart.update();
//
// }
// // chart = new Chart(document.querySelector("#subscriptions-chart"), options);
// },
// getFreshData() {
// const cacheValid = window.store.get('cacheValid');
// let cachedData = window.store.get(CACHE_KEY);
//
// if (cacheValid && typeof cachedData !== 'undefined') {
// this.drawChart(this.generateOptions(cachedData));
// this.loading = false;
// return;
// }
//
//
// const getter = new Get();
// let params = {
// start: format(new Date(window.store.get('start')), 'y-MM-dd'),
// end: format(new Date(window.store.get('end')), 'y-MM-dd')
// };
//
// getter.paid(params).then((response) => {
// let paidData = response.data;
// getter.unpaid(params).then((response) => {
// let unpaidData = response.data;
// let chartData = {paid: paidData, unpaid: unpaidData};
// window.store.set(CACHE_KEY, chartData);
// this.drawChart(this.generateOptions(chartData));
// this.loading = false;
// });
// });
// },
// generateOptions(data) {
// let options = getDefaultChartSettings('pie');
// // console.log(data);
// options.data.labels = [i18n.t('firefly.paid'), i18n.t('firefly.unpaid')];
// options.data.datasets = [];
// let collection = {};
// for (let i in data.paid) {
// if (data.paid.hasOwnProperty(i)) {
// let current = data.paid[i];
// let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
// let amount = this.autoConversion ? current.native_sum : current.sum;
// if (!collection.hasOwnProperty(currencyCode)) {
// collection[currencyCode] = {
// paid: 0,
// unpaid: 0,
// };
// }
// // in case of paid, add to "paid":
// collection[currencyCode].paid += (parseFloat(amount) * -1);
// }
// }
// // unpaid
// for (let i in data.unpaid) {
// if (data.unpaid.hasOwnProperty(i)) {
// let current = data.unpaid[i];
// let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
// let amount = this.autoConversion ? current.native_sum : current.sum;
// if (!collection.hasOwnProperty(currencyCode)) {
// collection[currencyCode] = {
// paid: 0,
// unpaid: 0,
// };
// }
// // console.log(current);
// // in case of paid, add to "paid":
// collection[currencyCode].unpaid += parseFloat(amount);
// }
// }
// for (let currencyCode in collection) {
// if (collection.hasOwnProperty(currencyCode)) {
// let current = collection[currencyCode];
// options.data.datasets.push(
// {
// label: currencyCode,
// data: [current.paid, current.unpaid],
// backgroundColor: [
// 'rgb(54, 162, 235)', // green (paid)
// 'rgb(255, 99, 132)', // red (unpaid_
// ],
// //hoverOffset: 4
// }
// )
// }
// }
//
// return options;
// },
init() { init() {
@@ -154,7 +193,7 @@ export default () => ({
i18n.locale = values[1]; i18n.locale = values[1];
loadTranslations(i18n, values[1]).then(() => { loadTranslations(i18n, values[1]).then(() => {
if (false === this.loading) { if (false === this.loading) {
this.loadChart(); this.startSubscriptions();
} }
}); });
@@ -166,8 +205,7 @@ export default () => ({
} }
// console.log('subscriptions observe end'); // console.log('subscriptions observe end');
if (false === this.loading) { if (false === this.loading) {
this.chartData = null; this.startSubscriptions();
this.loadChart();
} }
}); });
window.store.observe('autoConversion', (newValue) => { window.store.observe('autoConversion', (newValue) => {
@@ -177,7 +215,7 @@ export default () => ({
// console.log('subscriptions observe autoConversion'); // console.log('subscriptions observe autoConversion');
this.autoConversion = newValue; this.autoConversion = newValue;
if (false === this.loading) { if (false === this.loading) {
this.loadChart(); this.startSubscriptions();
} }
}); });
}, },

19
resources/views/v2/index.blade.php
View File

@@ -179,7 +179,8 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col" x-data="subscriptions">
{{--
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title"><a href="{{ route('subscriptions.index') }}" <h3 class="card-title"><a href="{{ route('subscriptions.index') }}"
@@ -190,6 +191,21 @@
<canvas id="subscriptions-chart"></canvas> <canvas id="subscriptions-chart"></canvas>
</div> </div>
</div> </div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><a href="{{ route('subscriptions.index') }}"
title="{{ __('firefly.go_to_subscriptions') }}">{{ __('firefly.subscriptions') }}
(TODO group)</a>
</h3>
</div>
<div class="card-body" x-data="subscriptions">
Tabel: per item verwacht in deze periode betaald niet betaald<br>
if betaald dan percentage over / onder.
</div>
</div>
--}}
</div> </div>
<div class="col" x-data="piggies"> <div class="col" x-data="piggies">
@@ -217,6 +233,7 @@
</ul> </ul>
</div> </div>
</template> </template>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <div class="card">