feat : display data in middle section

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;
 }

btc-UI/src/app/components/middle-section/middle-section.component.html

@@ -34,32 +34,35 @@
   </div>
 
   <!-- Main Table -->
-  <div class="main-table ">
-    <div
-      class="p-2 rounded h-100 d-flex flex-column justify-content-between"
-      style="background-color: #f1f1f1df"
-    >
-      <table class="table borderless-custom w-100 mb-2 table-main">
-        <colgroup>
-          <col style="width: 12%" />
-          <col style="width: 60%" />
-          <col style="width: 10%" />
-          <col style="width: 18%" />
-        </colgroup>
-        <tbody>
-          <tr *ngFor="let row of rows  | slice:0:5">
-            <td class="custom-cell-new"></td>
-            <td class="custom-cell-new"></td>
-            <td class="custom-cell-new"></td>
-            <td class="custom-cell-new"></td>
-          </tr>
-        </tbody>
-      </table>
+<div class="main-table ">
+  <div
+    class="p-2 rounded h-100 d-flex flex-column justify-content-between"
+    style="background-color: #f1f1f1df"
+  >
+    <table class="table borderless-custom w-100 mb-2 table-main">
+      <colgroup>
+        <col style="width: 12%" />
+        <col style="width: 60%" />
+        <col style="width: 10%" />
+        <col style="width: 18%" />
+      </colgroup>
+      <tbody>
+      <tr *ngFor="let row of filledRows">
+        <td class="custom-cell-new-1">{{ row.label }}</td>
+        <td class="custom-cell-new">{{ row.numbers.join(', ') }}</td>
+        <td class="custom-cell-new-2">{{ row.value || '' }}</td>
+        <td class="custom-cell-new-3">{{ row.total || '' }}</td>
+      </tr>
 
-      <div class="buttons-custom">
-        <button class="btn btn-dark">Repeat</button>
-        <div class="fw-bold">Amount :</div>
-      </div>
+      </tbody>
+    </table>
+
+    <div class="buttons-custom">
+      <button class="btn btn-dark">Repeat</button>
+      <div class="fw-bold">Amount :</div>
     </div>
   </div>
 </div>
+
+
+      

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();
+  }
 }

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<SelectionData[]>([]);
+  selections$ = this.selections.asObservable();
+
+  private currentRow = new BehaviorSubject<SelectionData>({
+    label: '',
+    numbers: [],
+    value: 0,
+    total: 0
+  });
+  currentRow$ = this.currentRow.asObservable();
+
+  updatePartial(update: Partial<SelectionData>) {
+    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 });
+  }
+}

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();
   }