feat : added field to 1st 5 labels

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

@@ -476,3 +476,127 @@ button.ready-to-print {
   background-color: #f8d7da !important;
   color: #721c24;
 }
+/* 🟦 FIELD Modal Overlay */
+.field-modal {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+}
+
+/* 📦 Modal Content */
+.field-modal-content {
+  background-color: #ffffff;
+  margin: 6% auto;
+  padding: 20px;
+  width: 800px;
+  max-width: 90%;
+  border-radius: 10px;
+  border: 3px solid #007bff;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+  text-align: center;
+}
+
+/* 🧷 Modal Header */
+.field-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+      margin-right: 47%;
+}
+
+.field-modal-header h5 {
+  margin: 0;
+  font-weight: bold;
+  color: #007bff;
+}
+
+/* ❌ Close Button */
+.close-btn {
+  /* font-size: 1.5rem; */
+  font-weight: bold;
+  color: #444;
+  cursor: pointer;
+}
+
+/* 🔢 Field Input Display */
+.field-display {
+  width: 100%;
+  font-size: 1.1rem;
+  padding: 10px;
+  border: 2px solid #ccc;
+  border-radius: 6px;
+  margin: 10px 0;
+  text-align: right;
+}
+
+/* 🔘 Field Keypad Buttons */
+.field-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.field-buttons button {
+  padding: 12px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: none;
+  background-color: #e0e0e0;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.field-buttons button:hover:not(:disabled) {
+  background-color: #ccc;
+}
+
+.field-buttons button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 🟩 ENTER Button Wide */
+.field-buttons .span-two {
+  grid-column: span 2;
+  background-color: #28a745;
+  color: white;
+  font-weight: bold;
+}
+
+/* ❌ CANCEL Button */
+.field-cancel-btn {
+  background-color: #dc3545;
+  color: black;
+  font-weight: bold;
+}
+
+
+/* 🟦 Custom FIELD Button */
+.btn-field {
+  background-color: #2772af; /* Bootstrap secondary base */
+  color: white;
+  font-weight: bold;
+  padding: 6px 18px;
+  border-radius: 6px;
+  border: 2px solid #6c757d;
+  transition: all 0.2s ease-in-out;
+}
+
+.btn-field:hover:not(:disabled) {
+  background-color: #165c91;
+  /* border-color: #5a6268; */
+}
+
+.btn-field:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #757373;
+  /* border-color: #b1b1b1; */
+}

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

@@ -1,27 +1,28 @@
 <!-- Touch Pad Container -->
 <div class="touch-pad-container scrollable-touchpad">
+
   <!-- 🔘 Top Button Section (Responsive Wrapper) -->
   <div class="container-fluid mb-2">
     <div class="d-flex flex-wrap justify-content-center gap-2 flex-md-nowrap flex-column flex-md-row align-items-md-center wrap_one">
+
       <!-- Left Group: CALC, ERASE, BOX, FIELD -->
       <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 class="btn btn-dark two" (click)="erase()">ERASE</button>
         <button class="btn btn-secondary three" (click)="toggleBoxMode()">BOX</button>
-        <button class="btn btn-secondary four">FIELD</button>
+        <!-- ✅ FIELD Button -->
-        <!-- <button class="btn btn-secondary four">Enter</button> -->
+        <button class="btn btn-field" [disabled]="!canUseField()" (click)="openFieldModal()">FIELD</button>
       </div>
 
-      <!-- Right Group: COPY, CLEAR, PR -->
+      <!-- Right Group: ENTER, COPY, CLEAR, PR -->
       <div class="d-flex flex-wrap justify-content-center gap-2 second">
-       <button
+        <button
-  class="btn btn-dark"
+          class="btn btn-dark"
-  [disabled]="selectedLabel === 'QUI' && isQUIFirstGroupComplete"
+          [disabled]="selectedLabel === 'QUI' && isQUIFirstGroupComplete"
-  (click)="padEnter()"
+          (click)="padEnter()"
->
+        >
-  Enter
+          Enter
-</button>
+        </button>
-
         <button class="btn btn-dark">COPY</button>
         <button class="btn btn-dark">CLEAR</button>
         <button class="btn btn-dark">PR</button>
@@ -32,42 +33,39 @@
   <!-- 🔳 Main Grid Area -->
   <div class="container-fluid">
     <div class="row gx-2 gy-2 wrapper">
+
       <!-- Label Section -->
-<div class="col-3">
+      <div class="col-3">
-  <div class="p-2 rounded wrapper-pad" [ngStyle]="{ 'background-color': ticketingActive ? '#d0ddf5' : '#f1f1f1df', border: ticketingActive ? '3px solid #050505' : 'none' }">
+        <div class="p-2 rounded wrapper-pad"
-    <div class="row gx-1 gy-1 custom-touchpad">
+             [ngStyle]="{ 'background-color': ticketingActive ? '#d0ddf5' : '#f1f1f1df', border: ticketingActive ? '3px solid #050505' : 'none' }">
-      <div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
+          <div class="row gx-1 gy-1 custom-touchpad">
-       <button
+            <div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
-  class="btn w-100 number-button"
+              <button
-  [ngClass]="'btn-color-' + i"
+                class="btn w-100 number-button"
-  [disabled]="!ticketingActive || !!selectedLabel || maxRowsReached || isLabelDisabled(label)"
+                [ngClass]="'btn-color-' + i"
-  (click)="selectLabel(label)"
+                [disabled]="!ticketingActive || !!selectedLabel || maxRowsReached || isLabelDisabled(label)"
->
+                (click)="selectLabel(label)"
-  {{ label }}
+              >
-</button>
+                {{ label }}
-
+              </button>
-
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</div>
-
 
       <!-- Numbers 1 to 30 -->
       <div class="col-7">
         <div class="p-2 rounded wrapper-pad" style="background-color: #f1f1f1df">
           <div class="row gx-1 gy-1 custom-touchpad">
-            <!-- Inside Number Pad Section -->
+            <div class="col-2" *ngFor="let number of numbersFlat">
-<div class="col-2" *ngFor="let number of numbersFlat">
+              <button
-  <button
+                class="btn btn-light w-100 number-button"
-    class="btn btn-light w-100 number-button"
+                [disabled]="!selectedLabel || isNumberDisabled(number)"
-    [disabled]="!selectedLabel || isNumberDisabled(number)"
+                (click)="selectNumber(number)"
-    (click)="selectNumber(number)"
+              >
-  >
+                {{ number }}
-    {{ number }}
+              </button>
-  </button>
+            </div>
-</div>
-
           </div>
         </div>
       </div>
@@ -76,6 +74,7 @@
       <div class="col-2 column">
         <div class="p-2 rounded wrapper-pad" style="background-color: #f1f1f1df">
           <div class="row gx-1 gy-1 custom-touchpad">
+
             <div class="col-6">
               <button class="btn btn-secondary w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal('0')">0</button>
             </div>
@@ -85,7 +84,9 @@
 
             <ng-container *ngFor="let key of ['7', '8', '9', '4', '5', '6', '1', '2', '3']">
               <div class="col-4">
-                <button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal(key)">{{ key }}</button>
+                <button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal(key)">
+                  {{ key }}
+                </button>
               </div>
             </ng-container>
 
@@ -95,6 +96,7 @@
             <div class="col-6">
               <button class="btn btn-secondary w-100 number-button" [disabled]="!canPrint" (click)="print()">Print</button>
             </div>
+
           </div>
         </div>
       </div>
@@ -109,7 +111,6 @@
         <h5>Calculator</h5>
       </div>
       <input type="text" id="calc-display" class="calc-display" [value]="calcDisplay" disabled />
-
       <div class="calc-buttons">
         <button (click)="press('7')">7</button>
         <button (click)="press('8')">8</button>
@@ -136,4 +137,34 @@
       </div>
     </div>
   </div>
+
+  <!-- 🟦 FIELD Modal -->
+<div id="fieldModal" class="field-modal" [style.display]="fieldModalOpen ? 'block' : 'none'">
+  <div class="field-modal-content">
+    <div class="field-modal-header">
+      <span class="close-btn" (click)="closeFieldModal()">&times;</span>
+      <h5>FIELD</h5>
+    </div>
+
+    <label>Runners selection</label>
+    <input type="text" class="field-display" [value]="fieldInput" readonly />
+
+    <p><strong>Total Runners</strong><br />1,2,3,4,5,6,7,8,9,10,11,12</p>
+
+    <div class="field-buttons">
+      <ng-container *ngFor="let key of ['0', '-', 'F', 'BACK', '7', '8', '9', '4', '5', '6', '1', '2', '3']">
+        <button
+          [disabled]="fieldFEntered && key === 'F'"
+          (click)="handleFieldKey(key)"
+        >
+          {{ key }}
+        </button>
+      </ng-container>
+
+      <button class="span-two" (click)="confirmFieldEntry()" [disabled]="!fieldFEntered">ENTER</button>
+      <button class="field-cancel-btn" (click)="closeFieldModal()">CANCEL</button>
+    </div>
+  </div>
+</div>
+
 </div>

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

@@ -25,7 +25,7 @@ export class TouchPadMenuComponent implements OnInit {
   numbersFlat: number[] = [];
 
   selectedLabel: string | null = null;
-  selectedNumbers: number[] = [];
+  selectedNumbers: (number | string)[] = [];
   padValue: string = '';
   canPrint = false;
   calculatorOpen = false;
@@ -38,6 +38,11 @@ export class TouchPadMenuComponent implements OnInit {
   QUIGroup2: number[] = [];
   isBoxed: boolean = false;
 
+  // 🔘 FIELD modal related
+  fieldModalOpen = false;
+  fieldInput: string = '';
+  fieldFEntered = false;
+
   constructor(private selectionService: SelectionService) {}
 
   ngOnInit() {
@@ -106,6 +111,7 @@ export class TouchPadMenuComponent implements OnInit {
         this.selectionService.updatePartial({ numbers: [...this.selectedNumbers] });
       }
     }
+
     this.padValue = '';
     this.canPrint = false;
   }
@@ -124,6 +130,7 @@ export class TouchPadMenuComponent implements OnInit {
     } else if (key === 'X') {
       this.padValue += 'X';
     }
+
     this.updateCanPrint();
 
     const value = parseFloat(this.padValue);
@@ -170,6 +177,9 @@ export class TouchPadMenuComponent implements OnInit {
     this.isQUIFirstGroupComplete = false;
     this.QUIGroup1 = [];
     this.QUIGroup2 = [];
+    this.fieldInput = '';
+    this.fieldFEntered = false;
+    this.fieldModalOpen = false;
   }
 
   openCalculator() {
@@ -219,4 +229,49 @@ export class TouchPadMenuComponent implements OnInit {
     // Optional: force canPrint update
     this.updateCanPrint();
   }
+
+  // 🔘 FIELD Modal Logic
+  canUseField(): boolean {
+    return ['WIN', 'SHP', 'THP', 'PLC', 'SHW'].includes(this.selectedLabel || '');
+  }
+
+  openFieldModal() {
+    this.fieldModalOpen = true;
+    this.fieldInput = '';
+    this.fieldFEntered = false;
+  }
+
+  closeFieldModal() {
+    this.fieldModalOpen = false;
+  }
+
+  handleFieldKey(key: string) {
+    if (key === 'BACK') {
+      this.fieldInput = this.fieldInput.slice(0, -1);
+      if (!this.fieldInput.includes('F')) this.fieldFEntered = false;
+      return;
+    }
+
+    if (key === 'F') {
+      if (!this.fieldFEntered) {
+        this.fieldFEntered = true;
+        this.fieldInput += 'F';
+      }
+    } else {
+      this.fieldInput += key;
+    }
+  }
+
+  confirmFieldEntry() {
+    if (this.fieldFEntered) {
+      this.selectedNumbers = ['F'];
+      this.selectionService.updatePartial({
+        label: this.selectedLabel!,
+        numbers: ['F'],
+        isBoxed: false,
+        value: 1
+      });
+      this.closeFieldModal();
+    }
+  }
 }