diff --git a/btc-UI/src/app/components/middle-section/middle-section.component.css b/btc-UI/src/app/components/middle-section/middle-section.component.css index fbff867..a16068a 100755 --- a/btc-UI/src/app/components/middle-section/middle-section.component.css +++ b/btc-UI/src/app/components/middle-section/middle-section.component.css @@ -49,8 +49,20 @@ div[style*="background-color: black"] .custom-cell { background-color: #f8f9fa; border-radius: 0.3rem; border: 1px solid rgba(3, 27, 69, 0.678); + font-size: 16px; + font-weight: bold; +} +.custom-cell-new-1, +.custom-cell-new-2, +.custom-cell-new-3 { + height: 2.5rem; + background-color: #f8f9fa; + border-radius: 0.3rem; + border: 1px solid rgba(3, 27, 69, 0.678); + font-size: 16px; + font-weight: bold; + text-align: center; } - div[style*="background-color: black"] .custom-cell { background-color: #343a40; } diff --git a/btc-UI/src/app/components/middle-section/middle-section.component.html b/btc-UI/src/app/components/middle-section/middle-section.component.html index 5e805a7..12c66ee 100755 --- a/btc-UI/src/app/components/middle-section/middle-section.component.html +++ b/btc-UI/src/app/components/middle-section/middle-section.component.html @@ -34,32 +34,35 @@ -
-
- - - - - - - - - - - - - - - -
+
+
+ + + + + + + + + + + + + + -
- -
Amount :
-
+ +
{{ row.label }}{{ row.numbers.join(', ') }}{{ row.value || '' }}{{ row.total || '' }}
+ +
+ +
Amount :
+ + + diff --git a/btc-UI/src/app/components/middle-section/middle-section.component.ts b/btc-UI/src/app/components/middle-section/middle-section.component.ts index 4a42a36..b0c77ce 100755 --- a/btc-UI/src/app/components/middle-section/middle-section.component.ts +++ b/btc-UI/src/app/components/middle-section/middle-section.component.ts @@ -1,21 +1,7 @@ -// import { Component } from '@angular/core'; -// import { CommonModule } from '@angular/common'; // ✅ Import this - -// @Component({ -// selector: 'app-middle-section', -// standalone: true, -// imports: [CommonModule], // ✅ Add CommonModule here -// templateUrl: './middle-section.component.html', -// styleUrls: ['./middle-section.component.css'] -// }) -// export class MiddleSectionComponent { -// rows = Array.from({ length: 5 }); -// summaryRows = Array.from({ length: 4 }); // 4 empty rows for now - -// } - -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit, OnDestroy } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { SelectionService, SelectionData } from '../selection.service/selection.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-middle-section', @@ -24,9 +10,50 @@ import { CommonModule } from '@angular/common'; templateUrl: './middle-section.component.html', styleUrls: ['./middle-section.component.css'] }) -export class MiddleSectionComponent { - @Input() containerHeight: string = '50vh'; // default for home screen +export class MiddleSectionComponent implements OnInit, OnDestroy { + @Input() containerHeight: string = '50vh'; + summaryRows = Array.from({ length: 4 }); - rows = Array.from({ length: 5 }); - summaryRows = Array.from({ length: 4 }); // 4 empty rows for now + filledRows: SelectionData[] = []; + currentRow: SelectionData = { label: '', numbers: [], value: 0, total: 0 }; + + private selections: SelectionData[] = []; + private sub1!: Subscription; + private sub2!: Subscription; + + constructor(private selectionService: SelectionService) {} + + ngOnInit() { + // Subscription for finalized selections + this.sub1 = this.selectionService.selections$.subscribe(data => { + this.selections = data; + this.updateFilledRows(this.selections, this.currentRow); + }); + + // Subscription for current in-progress row + this.sub2 = this.selectionService.currentRow$.subscribe(row => { + this.currentRow = row; + this.updateFilledRows(this.selections, row); + }); + } + + updateFilledRows(saved: SelectionData[], current: SelectionData) { + const rows: SelectionData[] = [...saved]; + if (rows.length < 5) rows.push(current); + + const emptyCount = Math.max(5 - rows.length, 0); + const emptyRows = Array.from({ length: emptyCount }, () => ({ + label: '', + numbers: [], + value: 0, + total: 0 + })); + + this.filledRows = [...rows, ...emptyRows].slice(0, 5); + } + + ngOnDestroy() { + this.sub1.unsubscribe(); + this.sub2.unsubscribe(); + } } diff --git a/btc-UI/src/app/components/selection.service/selection.service.ts b/btc-UI/src/app/components/selection.service/selection.service.ts new file mode 100644 index 0000000..bfd8de7 --- /dev/null +++ b/btc-UI/src/app/components/selection.service/selection.service.ts @@ -0,0 +1,47 @@ +import { Injectable } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +// selection.service.ts +export interface SelectionData { + label: string; + numbers: number[]; + value: number; + total: number; +} + +@Injectable({ providedIn: 'root' }) +export class SelectionService { + private selections = new BehaviorSubject([]); + selections$ = this.selections.asObservable(); + + private currentRow = new BehaviorSubject({ + label: '', + numbers: [], + value: 0, + total: 0 + }); + currentRow$ = this.currentRow.asObservable(); + + updatePartial(update: Partial) { + const current = this.currentRow.value; + this.currentRow.next({ ...current, ...update }); + } + + finalizeCurrentRow() { + const completed = this.currentRow.value; + if (!completed.label || completed.numbers.length === 0 || !completed.value) return; + + const total = completed.numbers.length * completed.value * 10; + const finalRow = { ...completed, total }; + + const updated = [...this.selections.value, finalRow]; + this.selections.next(updated); + + // Reset current row + this.currentRow.next({ label: '', numbers: [], value: 0, total: 0 }); + } + + clearSelections() { + this.selections.next([]); + this.currentRow.next({ label: '', numbers: [], value: 0, total: 0 }); + } +} diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts index d4f845b..08e2ac9 100755 --- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts +++ b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts @@ -1,5 +1,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { SelectionService } from '../selection.service/selection.service'; @Component({ selector: 'app-touch-pad-menu', @@ -31,6 +32,8 @@ export class TouchPadMenuComponent implements OnInit { calculatorOpen = false; calcDisplay = ''; + constructor(private selectionService: SelectionService) {} + ngOnInit() { this.labelRowsFlat = this.labelRows.flat(); this.numbersFlat = this.numberRows.flat(); @@ -59,6 +62,9 @@ export class TouchPadMenuComponent implements OnInit { this.selectedNumbers = []; this.padValue = ''; this.canPrint = false; + + // 👇 Update label immediately in table + this.selectionService.updatePartial({ label }); } selectNumber(number: number) { @@ -67,6 +73,9 @@ export class TouchPadMenuComponent implements OnInit { this.selectedNumbers.push(number); this.padValue = ''; this.canPrint = false; + + // 👇 Update numbers immediately in table + this.selectionService.updatePartial({ numbers: [...this.selectedNumbers] }); } } @@ -82,18 +91,25 @@ export class TouchPadMenuComponent implements OnInit { this.padValue += 'X'; } this.updateCanPrint(); + + // 👇 Update value in real-time + const value = parseFloat(this.padValue); + if (!isNaN(value)) { + this.selectionService.updatePartial({ value }); + } } updateCanPrint() { - this.canPrint = this.padValue.trim().length > 0; + this.canPrint = this.padValue.trim().length > 0 && /^[0-9]+$/.test(this.padValue); } padEnter() { - // Optional action on enter + // Optional: can trigger print or do nothing } print() { - alert(`Printing: Label=${this.selectedLabel}, Numbers=${this.selectedNumbers.join(', ')}, Value=${this.padValue}`); + // 👇 Finalize current row (push to list) + this.selectionService.finalizeCurrentRow(); this.resetSelections(); }