Miroirs/credger
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/credger.git synced 2024-12-26 09:58:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

active accounts list

Browse source
This commit is contained in:
Gwenhael Le Moine 2019-11-25 15:48:35 +01:00
parent 0efc88e71d
commit d52d58eb15
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 44 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
public/pure.html
View file

@ -58,50 +58,57 @@
${dataset.map( line => data_to_donut_segment( line ) ).join("")} ${dataset.map( line => data_to_donut_segment( line ) ).join("")}
</svg>`; </svg>`;
} }
}; };
let current_period; let current_period;
let granularity = 3; let granularity = 3;
const Controls = { const Controls = {
period: { period: {
init: () => Controls.period.set( new Date() ),
set: ( period ) => { set: ( period ) => {
current_period = period; current_period = period;
const months = { 0: 'Janvier', const months = { 0: 'Janvier',
1: 'Février', 1: 'Février',
2: 'Mars', 2: 'Mars',
3: 'Avril', 3: 'Avril',
4: 'Mai', 4: 'Mai',
5: 'Juin', 5: 'Juin',
6: 'Juillet', 6: 'Juillet',
7: 'Août', 7: 'Août',
8: 'Septembre', 8: 'Septembre',
9: 'Octobre', 9: 'Octobre',
10: 'Novembre', 10: 'Novembre',
11: 'Décembre' }; 11: 'Décembre' };
document.querySelector( "#period #display" ).innerHTML = `${months[ current_period.getMonth() ]} ${current_period.getFullYear()}`; document.querySelector( "#period #display" ).innerHTML = `${months[ current_period.getMonth() ]} ${current_period.getFullYear()}`;
monthly(); monthly();
}, },
get: () => current_period, get: () => current_period,
prev: () => { prev: () => {
current_period.setMonth( current_period.getMonth() - 1 ); current_period.setMonth( current_period.getMonth() - 1 );
Controls.period.set( current_period ); Controls.period.set( current_period );
}, },
next: () => { next: () => {
current_period.setMonth( current_period.getMonth() + 1 ); current_period.setMonth( current_period.getMonth() + 1 );
Controls.period.set( current_period ); Controls.period.set( current_period );
}, },
}, },
accounts: { accounts: {
init: async () => { init: async () => {
let accounts = await API.accounts(); let account_to_option = account => `<option value="${account.join(':')}">${account.join(':')}</option>`;
let accounts = await API.accounts();
let select = document.querySelector("select#accounts");
select.innerHTML = '';
let account_to_option = ( account ) => `<option value="${account.join(':')}">${account.join(':')}</option>`; for ( let i = 1 ; i < accounts.reduce( (memo, a) => a.length > memo ? a.length : memo, 0 ) ; i++ ) {
document.querySelector("#accounts").innerHTML = `<select multiple name="accounts" id="lstaccounts"> select.innerHTML += `<optgroup label="Depth: ${i}">${accounts.filter( a => a.length == i ).map( account => account_to_option( account )).join('')}</optgroup>`;
${accounts.map( account => account_to_option( account )).join('')} }
</select>`; },
onchange: ( accounts_selected ) => {
/* TODO */
console.log( accounts_selected );
} }
} }
/* granularity: { /* granularity: {
@ -144,8 +151,9 @@
<input oninput="Controls.granularity.set( this.value );"> <input oninput="Controls.granularity.set( this.value );">
</div> --> </div> -->
</div> </div>
<div id="accounts">
</div> <select id="accounts" name="accounts" multiple size="20" onchange="Controls.accounts.onchange( Array.from( this.options ).filter( o => o.selected ).map( o => o.value ) )"></select>
<div id="month"> <div id="month">
<div id="donut" style="height: 256; width: 256;"></div> <div id="donut" style="height: 256; width: 256;"></div>
</div> </div>
@ -153,9 +161,9 @@
<script> <script>
(async () => { (async () => {
await Controls.accounts.init(); await Controls.accounts.init();
console.log( await API.graph_values( "", ["Expenses", "Income"].join(" "), "monthly" ) ) await Controls.period.init();
await Controls.period.set( new Date() ); console.log( await API.graph_values( "", ["Expenses", "Income"].join(" "), "monthly" ) )
})(); })();
</script> </script>
</body> </body>