| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  | /* | 
					
						
							|  |  |  |  * dashboard.js | 
					
						
							|  |  |  |  * Copyright (c) 2023 james@firefly-iii.org | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * This file is part of Firefly III (https://github.com/firefly-iii).
 | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * This program is free software: you can redistribute it and/or modify | 
					
						
							|  |  |  |  * it under the terms of the GNU Affero General Public License as | 
					
						
							|  |  |  |  * published by the Free Software Foundation, either version 3 of the | 
					
						
							|  |  |  |  * License, or (at your option) any later version. | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * This program is distributed in the hope that it will be useful, | 
					
						
							|  |  |  |  * but WITHOUT ANY WARRANTY; without even the implied warranty of | 
					
						
							|  |  |  |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the | 
					
						
							|  |  |  |  * GNU Affero General Public License for more details. | 
					
						
							|  |  |  |  * | 
					
						
							|  |  |  |  * You should have received a copy of the GNU Affero General Public License | 
					
						
							|  |  |  |  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 | 
					
						
							|  |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-06 07:02:55 +02:00
										 |  |  | import Summary from "../../api/v2/summary/index.js"; | 
					
						
							| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  | import {format} from "date-fns"; | 
					
						
							|  |  |  | import {getVariable} from "../../store/get-variable.js"; | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  | import formatMoney from "../../util/format-money.js"; | 
					
						
							| 
									
										
										
										
											2023-10-01 07:17:56 +02:00
										 |  |  | import {getCacheKey} from "../../support/get-cache-key.js"; | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  | let afterPromises = false; | 
					
						
							| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  | export default () => ({ | 
					
						
							|  |  |  |     balanceBox: {amounts: [], subtitles: []}, | 
					
						
							|  |  |  |     billBox: {paid: [], unpaid: []}, | 
					
						
							|  |  |  |     leftBox: {left: [], perDay: []}, | 
					
						
							|  |  |  |     netBox: {net: []}, | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |     autoConversion: false, | 
					
						
							| 
									
										
										
										
											2023-07-24 18:58:35 +02:00
										 |  |  |     loading: false, | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |     boxData: null, | 
					
						
							|  |  |  |     boxOptions: null, | 
					
						
							|  |  |  |     getFreshData() { | 
					
						
							| 
									
										
										
										
											2023-10-01 07:17:56 +02:00
										 |  |  |         const start = new Date(window.store.get('start')); | 
					
						
							|  |  |  |         const end = new Date(window.store.get('end')); | 
					
						
							| 
									
										
										
										
											2023-10-07 07:20:01 +02:00
										 |  |  |         const boxesCacheKey = getCacheKey('dashboard-boxes-data', start, end); | 
					
						
							| 
									
										
										
										
											2023-10-01 07:17:56 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-27 07:45:09 +02:00
										 |  |  |         const cacheValid = window.store.get('cacheValid'); | 
					
						
							| 
									
										
										
										
											2023-10-01 07:17:56 +02:00
										 |  |  |         let cachedData = window.store.get(boxesCacheKey); | 
					
						
							| 
									
										
										
										
											2023-08-27 07:45:09 +02:00
										 |  |  | 
 | 
					
						
							|  |  |  |         if (cacheValid && typeof cachedData !== 'undefined') { | 
					
						
							|  |  |  |             this.boxData = cachedData; | 
					
						
							|  |  |  |             this.generateOptions(this.boxData); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |             return; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |         // get stuff
 | 
					
						
							|  |  |  |         let getter = new Summary(); | 
					
						
							|  |  |  |         getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => { | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |             this.boxData = response.data; | 
					
						
							| 
									
										
										
										
											2023-10-01 07:17:56 +02:00
										 |  |  |             window.store.set(boxesCacheKey, response.data); | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |             this.generateOptions(this.boxData); | 
					
						
							|  |  |  |         }); | 
					
						
							|  |  |  |     }, | 
					
						
							|  |  |  |     generateOptions(data) { | 
					
						
							|  |  |  |         this.balanceBox = {amounts: [], subtitles: []}; | 
					
						
							|  |  |  |         this.billBox = {paid: [], unpaid: []}; | 
					
						
							|  |  |  |         this.leftBox = {left: [], perDay: []}; | 
					
						
							|  |  |  |         this.netBox = {net: []}; | 
					
						
							|  |  |  |         let subtitles = {}; | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |         // process new content:
 | 
					
						
							|  |  |  |         for (const i in data) { | 
					
						
							|  |  |  |             if (data.hasOwnProperty(i)) { | 
					
						
							|  |  |  |                 const current = data[i]; | 
					
						
							| 
									
										
										
										
											2023-10-01 11:32:08 +02:00
										 |  |  |                 if (!current.hasOwnProperty('key')) { | 
					
						
							|  |  |  |                     continue; | 
					
						
							|  |  |  |                 } | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |                 let key = current.key; | 
					
						
							|  |  |  |                 // native (auto conversion):
 | 
					
						
							|  |  |  |                 if (this.autoConversion) { | 
					
						
							|  |  |  |                     if (key.startsWith('balance-in-native')) { | 
					
						
							|  |  |  |                         this.balanceBox.amounts.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         // prep subtitles (for later)
 | 
					
						
							|  |  |  |                         if (!subtitles.hasOwnProperty(current.currency_code)) { | 
					
						
							|  |  |  |                             subtitles[current.currency_code] = ''; | 
					
						
							|  |  |  |                         } | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     // spent info is used in subtitle:
 | 
					
						
							|  |  |  |                     if (key.startsWith('spent-in-native')) { | 
					
						
							|  |  |  |                         // prep subtitles (for later)
 | 
					
						
							|  |  |  |                         if (!subtitles.hasOwnProperty(current.currency_code)) { | 
					
						
							|  |  |  |                             subtitles[current.currency_code] = ''; | 
					
						
							|  |  |  |                         } | 
					
						
							|  |  |  |                         // append the amount spent.
 | 
					
						
							|  |  |  |                         subtitles[current.currency_code] = | 
					
						
							|  |  |  |                             subtitles[current.currency_code] + | 
					
						
							|  |  |  |                             formatMoney(current.value, current.currency_code); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     // earned info is used in subtitle:
 | 
					
						
							|  |  |  |                     if (key.startsWith('earned-in-native')) { | 
					
						
							|  |  |  |                         // prep subtitles (for later)
 | 
					
						
							|  |  |  |                         if (!subtitles.hasOwnProperty(current.currency_code)) { | 
					
						
							|  |  |  |                             subtitles[current.currency_code] = ''; | 
					
						
							|  |  |  |                         } | 
					
						
							|  |  |  |                         // prepend the amount earned.
 | 
					
						
							|  |  |  |                         subtitles[current.currency_code] = | 
					
						
							|  |  |  |                             formatMoney(current.value, current.currency_code) + ' + ' + | 
					
						
							|  |  |  |                             subtitles[current.currency_code]; | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |                     if (key.startsWith('bills-unpaid-in-native')) { | 
					
						
							|  |  |  |                         this.billBox.unpaid.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('bills-paid-in-native')) { | 
					
						
							|  |  |  |                         this.billBox.paid.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('left-to-spend-in-native')) { | 
					
						
							|  |  |  |                         this.leftBox.left.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('left-per-day-to-spend-in-native')) { // per day
 | 
					
						
							|  |  |  |                         this.leftBox.perDay.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('net-worth-in-native')) { | 
					
						
							|  |  |  |                         this.netBox.net.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |                 // not native
 | 
					
						
							|  |  |  |                 if (!this.autoConversion && !key.endsWith('native')) { | 
					
						
							|  |  |  |                     if (key.startsWith('balance-in-')) { | 
					
						
							|  |  |  |                         this.balanceBox.amounts.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     // spent info is used in subtitle:
 | 
					
						
							|  |  |  |                     if (key.startsWith('spent-in-')) { | 
					
						
							|  |  |  |                         // prep subtitles (for later)
 | 
					
						
							|  |  |  |                         if (!subtitles.hasOwnProperty(current.currency_code)) { | 
					
						
							|  |  |  |                             subtitles[current.currency_code] = ''; | 
					
						
							|  |  |  |                         } | 
					
						
							|  |  |  |                         // append the amount spent.
 | 
					
						
							|  |  |  |                         subtitles[current.currency_code] = | 
					
						
							|  |  |  |                             subtitles[current.currency_code] + | 
					
						
							|  |  |  |                             formatMoney(current.value, current.currency_code); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     // earned info is used in subtitle:
 | 
					
						
							|  |  |  |                     if (key.startsWith('earned-in-')) { | 
					
						
							|  |  |  |                         // prep subtitles (for later)
 | 
					
						
							|  |  |  |                         if (!subtitles.hasOwnProperty(current.currency_code)) { | 
					
						
							|  |  |  |                             subtitles[current.currency_code] = ''; | 
					
						
							|  |  |  |                         } | 
					
						
							|  |  |  |                         // prepend the amount earned.
 | 
					
						
							|  |  |  |                         subtitles[current.currency_code] = | 
					
						
							|  |  |  |                             formatMoney(current.value, current.currency_code) + ' + ' + | 
					
						
							|  |  |  |                             subtitles[current.currency_code]; | 
					
						
							|  |  |  |                         continue; | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |                     } | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |                     if (key.startsWith('bills-unpaid-in-')) { | 
					
						
							|  |  |  |                         this.billBox.unpaid.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('bills-paid-in-')) { | 
					
						
							|  |  |  |                         this.billBox.paid.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('left-to-spend-in-')) { | 
					
						
							|  |  |  |                         this.leftBox.left.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('left-per-day-to-spend-in-')) { | 
					
						
							|  |  |  |                         this.leftBox.perDay.push(formatMoney(current.value, current.currency_code)); | 
					
						
							|  |  |  |                         continue; | 
					
						
							|  |  |  |                     } | 
					
						
							|  |  |  |                     if (key.startsWith('net-worth-in-')) { | 
					
						
							|  |  |  |                         this.netBox.net.push(formatMoney(current.value, current.currency_code)); | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |                     } | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |                 } | 
					
						
							|  |  |  |             } | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |         } | 
					
						
							|  |  |  |         for (let i in subtitles) { | 
					
						
							|  |  |  |             if (subtitles.hasOwnProperty(i)) { | 
					
						
							|  |  |  |                 this.balanceBox.subtitles.push(subtitles[i]); | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |             } | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |         } | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |         this.loading = false; | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |     }, | 
					
						
							|  |  |  |     loadBoxes() { | 
					
						
							|  |  |  |         if (true === this.loading) { | 
					
						
							|  |  |  |             return; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |         this.loading = true; | 
					
						
							|  |  |  |         if (null === this.boxData) { | 
					
						
							|  |  |  |             this.getFreshData(); | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |             return; | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |         } | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |         this.generateOptions(this.boxData); | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |         this.loading = false; | 
					
						
							| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  |     }, | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     // Getter
 | 
					
						
							|  |  |  |     init() { | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |         // console.log('boxes init');
 | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |         Promise.all([getVariable('viewRange'), getVariable('autoConversion', false)]).then((values) => { | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |             // console.log('boxes after promises');
 | 
					
						
							|  |  |  |             afterPromises = true; | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |             this.autoConversion = values[1]; | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |             this.loadBoxes(); | 
					
						
							|  |  |  |         }); | 
					
						
							| 
									
										
										
										
											2023-07-24 18:58:35 +02:00
										 |  |  |         window.store.observe('end', () => { | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |             if (!afterPromises) { | 
					
						
							|  |  |  |                 return; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |             // console.log('boxes observe end');
 | 
					
						
							| 
									
										
										
										
											2023-08-06 18:33:29 +02:00
										 |  |  |             this.boxData = null; | 
					
						
							| 
									
										
										
										
											2023-07-23 07:10:31 +02:00
										 |  |  |             this.loadBoxes(); | 
					
						
							| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  |         }); | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |         window.store.observe('autoConversion', (newValue) => { | 
					
						
							| 
									
										
										
										
											2023-08-12 07:53:11 +02:00
										 |  |  |             if (!afterPromises) { | 
					
						
							|  |  |  |                 return; | 
					
						
							|  |  |  |             } | 
					
						
							|  |  |  |             // console.log('boxes observe autoConversion');
 | 
					
						
							| 
									
										
										
										
											2023-08-06 11:21:20 +02:00
										 |  |  |             this.autoConversion = newValue; | 
					
						
							|  |  |  |             this.loadBoxes(); | 
					
						
							|  |  |  |         }); | 
					
						
							| 
									
										
										
										
											2023-07-22 16:42:33 +02:00
										 |  |  |     }, | 
					
						
							|  |  |  | }); |