feat : added popup to PR (no logic added)

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css

@@ -627,3 +627,59 @@ button.ready-to-print {
   border-color: #ccc;
   opacity: 0.7;
 }
+.pool-replace-modal {
+  display: none; /* Controlled by [style.display] binding */
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
+  z-index: 1000;
+}
+
+.pool-replace-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 700px;
+  /* height: 400px; */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.pool-replace-header {
+  display: flex;
+  /* justify-content: space-between; */
+  justify-content: space-evenly;
+  margin-left: -35%;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.close-btn {
+  cursor: pointer;
+  font-size: 30px;
+}
+
+.pool-replace-body {
+  margin-bottom: 15px;
+  margin-left: 26%;
+}
+
+.pool-replace-body button {
+  margin: 5px;
+}
+
+.pool-replace-footer {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+}
+.pool-replace-btn{
+  background-color: #125cac;
+  color: white;
+}

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html

@@ -9,13 +9,13 @@
       <div class="d-flex flex-wrap justify-content-center gap-2 first">
         <button class="btn btn-dark one" (click)="openCalculator()">CALC</button>
         <button class="btn btn-dark two" (click)="erase()">ERASE</button>
-<button
+        <button
-  class="btn btn-secondary three"
+          class="btn btn-secondary three"
-  (click)="toggleBoxMode()"
+          (click)="toggleBoxMode()"
-  [disabled]="isBoxToggleDisabled"
+          [disabled]="isBoxToggleDisabled"
->
+        >
-  BOX
+          BOX
-</button>
+        </button>
 
         <!-- ✅ FIELD Button -->
         <button class="btn btn-field" [disabled]="!canUseField()" (click)="openFieldModal()">FIELD</button>
@@ -36,9 +36,8 @@
 
         <button class="btn btn-danger btn-bkp" *ngIf="showBackspace" (click)="removeLastNumber()">BKP</button>
 
-
         <button class="btn btn-dark">CLEAR</button>
-        <button class="btn btn-dark">PR</button>
+        <button class="btn btn-info pool-replace-btn" (click)="openPoolReplaceModal()">PR</button>
       </div>
     </div>
   </div>
@@ -182,4 +181,29 @@
     </div>
   </div>
 
-</div>
+ <!-- 🟩 POOL REPLACE Modal -->
+<div
+  id="poolReplaceModal"
+  class="pool-replace-modal"
+  [style.display]="poolReplaceOpen ? 'block' : 'none'"
+  (click)="closePoolReplaceModal()"
+>
+  <div class="pool-replace-content" (click)="$event.stopPropagation()">
+    <div class="pool-replace-header">
+      <span class="close-btn" (click)="closePoolReplaceModal()">&times;</span>
+      <h5>POOL REPLACE</h5>
+    </div>
+    <div class="pool-replace-body">
+      <p>Select an option to replace the pool:</p>
+      <button class="btn btn-light">WIN</button>
+      <button class="btn btn-light">SHP</button>
+      <button class="btn btn-light">THP</button>
+      <button class="btn btn-light">PLC</button>
+      <button class="btn btn-light">SHW</button>
+    </div>
+    <div class="pool-replace-footer">
+      <button class="btn btn-secondary" (click)="closePoolReplaceModal()">Cancel</button>
+      <button class="btn btn-primary">Confirm</button>
+    </div>
+  </div>
+</div>

btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.ts

@@ -57,6 +57,9 @@ export class TouchPadMenuComponent implements OnInit {
   fieldInput: string = '';
   fieldFEntered = false;
 
+  // POOL REPLACE modal
+  poolReplaceOpen = false;
+
   constructor(private selectionService: SelectionService) {}
 
   ngOnInit() {
@@ -462,55 +465,56 @@ export class TouchPadMenuComponent implements OnInit {
       default: return 3;
     }
   }
-private handleFieldForSpecialLabels() {
-  if (!this.selectedLabel) return;
 
-  if (this.selectedLabel === 'FOR' || this.selectedLabel === 'QUI') {
+  private handleFieldForSpecialLabels() {
-    if (!this.isFirstGroupComplete) {
+    if (!this.selectedLabel) return;
-      this.firstGroup = ['F'];
+
-      this.selectedNumbers = ['F'];
+    if (this.selectedLabel === 'FOR' || this.selectedLabel === 'QUI') {
-      this.selectionService.updatePartial({
+      if (!this.isFirstGroupComplete) {
-        label: this.selectedLabel,
+        this.firstGroup = ['F'];
-        numbers: [...this.selectedNumbers],
+        this.selectedNumbers = ['F'];
-        isBoxed: false,
+        this.selectionService.updatePartial({
-        value: 1
+          label: this.selectedLabel,
-      });
+          numbers: [...this.selectedNumbers],
-    } else {
+          isBoxed: false,
-      this.secondGroup = ['F'];
+          value: 1
-      this.selectedNumbers = [...this.firstGroup, '-', 'F'];
+        });
-      this.selectionService.updatePartial({
+      } else {
-        label: this.selectedLabel,
+        this.secondGroup = ['F'];
-        numbers: [...this.selectedNumbers],
+        this.selectedNumbers = [...this.firstGroup, '-', 'F'];
-        isBoxed: false,
+        this.selectionService.updatePartial({
-        value: 1
+          label: this.selectedLabel,
-      });
+          numbers: [...this.selectedNumbers],
-    }
+          isBoxed: false,
-  } else if (this.selectedLabel === 'TAN') {
+          value: 1
-    if (this.isBoxed) {
+        });
-      this.selectedNumbers = ['F'];
+      }
-      this.selectionService.updatePartial({
+    } else if (this.selectedLabel === 'TAN') {
-        label: this.selectedLabel,
+      if (this.isBoxed) {
-        numbers: ['F'],
+        this.selectedNumbers = ['F'];
-        isBoxed: true,
+        this.selectionService.updatePartial({
-        value: 1
+          label: this.selectedLabel,
-      });
+          numbers: ['F'],
-    } else {
+          isBoxed: true,
-      this.tanGroups[this.tanGroupStage] = ['F'];
+          value: 1
-      const combined: (number | string)[] = [...this.tanGroups[0]];
+        });
-      if (this.tanGroupStage > 0) combined.push('-', ...this.tanGroups[1]);
+      } else {
-      if (this.tanGroupStage > 1) combined.push('-', ...this.tanGroups[2]);
+        this.tanGroups[this.tanGroupStage] = ['F'];
-      this.selectedNumbers = combined;
+        const combined: (number | string)[] = [...this.tanGroups[0]];
-      this.selectionService.updatePartial({
+        if (this.tanGroupStage > 0) combined.push('-', ...this.tanGroups[1]);
-        label: this.selectedLabel,
+        if (this.tanGroupStage > 1) combined.push('-', ...this.tanGroups[2]);
-        numbers: [...this.selectedNumbers],
+        this.selectedNumbers = combined;
-        isBoxed: false,
+        this.selectionService.updatePartial({
-        value: 1
+          label: this.selectedLabel,
-      });
+          numbers: [...this.selectedNumbers],
+          isBoxed: false,
+          value: 1
+        });
+      }
     }
   }
-}
 
-  // Calculator and Field Modal methods (unchanged)
+  // Calculator and Field Modal methods
   openCalculator() { this.calculatorOpen = true; this.calcDisplay = ''; }
   closeCalculator() { this.calculatorOpen = false; }
   press(val: string) { if (this.calcDisplay === 'Error') this.calcDisplay = ''; this.calcDisplay += val; }
@@ -548,14 +552,15 @@ private handleFieldForSpecialLabels() {
   }
 
   openFieldModal() {
-  if (['FOR', 'QUI', 'TAN'].includes(this.selectedLabel || '')) {
+    if (['FOR', 'QUI', 'TAN'].includes(this.selectedLabel || '')) {
-    this.handleFieldForSpecialLabels();
+      this.handleFieldForSpecialLabels();
-  } else {
+    } else {
-    this.fieldModalOpen = true;
+      this.fieldModalOpen = true;
-    this.fieldInput = '';
+      this.fieldInput = '';
-    this.fieldFEntered = false;
+      this.fieldFEntered = false;
+    }
   }
-}
+
   closeFieldModal() {
     this.fieldModalOpen = false;
   }
@@ -635,4 +640,12 @@ private handleFieldForSpecialLabels() {
     }
     this.closeFieldModal();
   }
+
+  openPoolReplaceModal() {
+    this.poolReplaceOpen = true;
+  }
+
+  closePoolReplaceModal() {
+    this.poolReplaceOpen = false;
+  }
 }