diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css index b4bd4a9..77e85d9 100755 --- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.css +++ b/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; */ +} diff --git a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html index 6a796de..3a6aa6b 100755 --- a/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html +++ b/btc-UI/src/app/components/touch-pad-menu/touch-pad-menu.component.html @@ -1,27 +1,28 @@
+
+
- + - - + +
- +
- - + @@ -32,42 +33,39 @@
+ -
-
-
-
- - - +
+
+
+
+ +
+
+
-
-
-
-
- -
- -
- +
+ +
@@ -76,6 +74,7 @@
+
@@ -85,7 +84,9 @@
- +
@@ -95,6 +96,7 @@
+
@@ -109,7 +111,6 @@
Calculator
-
@@ -136,4 +137,34 @@
-
\ No newline at end of file + + +
+
+
+ × +
FIELD
+
+ + + + +

Total Runners
1,2,3,4,5,6,7,8,9,10,11,12

+ +
+ + + + + + +
+
+
+ +
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 9a3992b..6b0efe2 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 @@ -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(); + } + } }