@@ -65,7 +65,32 @@ export class CalendarComponent implements OnInit {
6565 * Each item contains the color category, total days, and total amount
6666 * used to render the heatmap legend and summary table.
6767 */
68- heatmapSummary : HeatmapSummary [ ] = [ ] ;
68+ heatmapSummary : HeatmapSummary [ ] = [
69+ {
70+ color : 'bg-[var(--color-rose)]' ,
71+ days : 0 ,
72+ amount : 0 ,
73+ text : ''
74+ } ,
75+ {
76+ color : 'bg-[var(--color-amber)]' ,
77+ days : 0 ,
78+ amount : 0 ,
79+ text : ''
80+ } ,
81+ {
82+ color : 'bg-[var(--color-emerald)]' ,
83+ days : 0 ,
84+ amount : 0 ,
85+ text : ''
86+ } ,
87+ {
88+ color : 'bg-[var(--color-gray)]' ,
89+ days : 0 ,
90+ amount : 0 ,
91+ text : ''
92+ }
93+ ] ;
6994
7095 /** Controls the visibility of the Edit Heatmap modal */
7196 showEditHeatMapModel = false ;
@@ -79,8 +104,11 @@ export class CalendarComponent implements OnInit {
79104 /** Tracks whether the Emerald color modal is currently open */
80105 isEmeraldModelOpen : boolean = false ;
81106
82- /** Tracks whether the Amber color modal is currently open */
83- isAmberModelOpen : boolean = false ;
107+ /** Defines the minimum allowed value for the heatmap amount input field in the edit modal, used for form validation. */
108+ minHeatMapAmount = 0 ;
109+
110+ /** Defines the maximum allowed value for the heatmap amount input field in the edit modal, used for form validation. */
111+ maxHeatMapAmount = 0 ;
84112
85113 /**
86114 * Creates an instance of CalendarComponent.
@@ -134,7 +162,7 @@ export class CalendarComponent implements OnInit {
134162 */
135163 renderCalendar ( year : number , month : number ) : void {
136164 this . calendarDays = [ ] ;
137- this . heatmapSummary = [ ] ;
165+ this . heatmapSummary = this . resetHeatmapSummary ( ) ;
138166 const today = new Date ( this . configService . getLocalTime ( ) ) ;
139167 const firstDay = new Date ( year , month , 1 ) . getDay ( ) ;
140168 const daysInMonth = new Date ( year , month + 1 , 0 ) . getDate ( ) ;
@@ -232,7 +260,7 @@ export class CalendarComponent implements OnInit {
232260 private getHeatClass ( amount : number ) : string {
233261 if ( this . isShowHeatmap === false ) return 'bg-[var(--color-surface)]' ;
234262 const rose_amount = this . userService . getValue < number > ( 'rose_amount' ) ?? 1000 ;
235- const emerald_amount = this . userService . getValue < number > ( 'emerald_amount' ) ?? 300 ;
263+ const emerald_amount = this . userService . getValue < number > ( 'emerald_amount' ) ?? 500 ;
236264 if ( amount === 0 ) {
237265 this . addOrUpdateHeatMapSummary ( 'bg-[var(--color-gray)]' , amount , 'No expenses' )
238266 return 'bg-[var(--color-gray)]' ;
@@ -282,6 +310,7 @@ export class CalendarComponent implements OnInit {
282310 if ( existing ) {
283311 existing . days += 1 ;
284312 existing . amount += amount ;
313+ existing . text = message ;
285314 } else {
286315 this . heatmapSummary . push ( {
287316 color : color ,
@@ -300,7 +329,6 @@ export class CalendarComponent implements OnInit {
300329 this . showEditHeatMapModel = false ;
301330 this . isEmeraldModelOpen = false ;
302331 this . isRoseModelOpen = false ;
303- this . isAmberModelOpen = false ;
304332 }
305333
306334 /**
@@ -314,20 +342,18 @@ export class CalendarComponent implements OnInit {
314342 this . heatMapForm . reset ( {
315343 amount : this . userService . getValue < number > ( 'rose_amount' ) ?? 1000 ,
316344 } ) ;
345+ this . minHeatMapAmount = ( this . userService . getValue < number > ( 'emerald_amount' ) ?? 500 ) + 1 ;
346+ this . maxHeatMapAmount = 100000000 - 1 ;
317347 this . isRoseModelOpen = true ;
318348 }
319349 if ( color === 'bg-[var(--color-emerald)]' ) {
320350 this . heatMapForm . reset ( {
321- amount : this . userService . getValue < number > ( 'emerald_amount' ) ?? 300 ,
351+ amount : this . userService . getValue < number > ( 'emerald_amount' ) ?? 500 ,
322352 } ) ;
353+ this . minHeatMapAmount = 1 ;
354+ this . maxHeatMapAmount = ( this . userService . getValue < number > ( 'rose_amount' ) ?? 1000 ) - 1 ;
323355 this . isEmeraldModelOpen = true ;
324356 }
325- if ( color === 'bg-[var(--color-amber)]' ) {
326- this . heatMapForm . reset ( {
327- amount : this . userService . getValue < number > ( 'emerald_amount' ) ?? 300 ,
328- } ) ;
329- this . isAmberModelOpen = true ;
330- }
331357 this . showEditHeatMapModel = ! this . showEditHeatMapModel ;
332358 }
333359
@@ -341,7 +367,7 @@ export class CalendarComponent implements OnInit {
341367 return ;
342368 }
343369 const { amount } = this . heatMapForm . value ;
344- if ( this . isEmeraldModelOpen || this . isAmberModelOpen ) {
370+ if ( this . isEmeraldModelOpen ) {
345371 this . userService . update ( 'emerald_amount' , amount ) ;
346372 }
347373 if ( this . isRoseModelOpen ) {
@@ -350,4 +376,33 @@ export class CalendarComponent implements OnInit {
350376 this . renderCalendar ( this . currentYear , this . currentMonth ) ;
351377 this . closeEditHeatMapModel ( ) ;
352378 }
379+
380+ resetHeatmapSummary ( ) : HeatmapSummary [ ] {
381+ const rose_amount = this . userService . getValue < number > ( 'rose_amount' ) ?? 1000 ;
382+ const emerald_amount = this . userService . getValue < number > ( 'emerald_amount' ) ?? 500 ;
383+ this . heatmapSummary = this . heatmapSummary . map ( item => {
384+ if ( item . color === 'bg-[var(--color-rose)]' ) {
385+ item . days = 0 ;
386+ item . amount = 0 ;
387+ item . text = `> ${ rose_amount } ;
388+ }
389+ if ( item . color === 'bg-[var(--color-emerald)]' ) {
390+ item . days = 0 ;
391+ item . amount = 0 ;
392+ item . text = `< ${ emerald_amount } ;
393+ }
394+ if ( item . color === 'bg-[var(--color-amber)]' ) {
395+ item . days = 0 ;
396+ item . amount = 0 ;
397+ item . text = `${ emerald_amount } ${ rose_amount } ;
398+ }
399+ if ( item . color === 'bg-[var(--color-gray)]' ) {
400+ item . days = 0 ;
401+ item . amount = 0 ;
402+ item . text = 'No expenses' ;
403+ }
404+ return item ;
405+ } )
406+ return this . heatmapSummary ;
407+ }
353408}
0 commit comments