feat : added field to 1st 5 labels
This commit is contained in:
parent
5a85de1742
commit
b0a31ec17a
@ -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; */
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<!-- <button class="btn btn-secondary four">Enter</button> -->
|
||||
<!-- ✅ FIELD 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
|
||||
class="btn btn-dark"
|
||||
[disabled]="selectedLabel === 'QUI' && isQUIFirstGroupComplete"
|
||||
(click)="padEnter()"
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-dark"
|
||||
[disabled]="selectedLabel === 'QUI' && isQUIFirstGroupComplete"
|
||||
(click)="padEnter()"
|
||||
>
|
||||
Enter
|
||||
</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="p-2 rounded wrapper-pad" [ngStyle]="{ 'background-color': ticketingActive ? '#d0ddf5' : '#f1f1f1df', border: ticketingActive ? '3px solid #050505' : 'none' }">
|
||||
<div class="row gx-1 gy-1 custom-touchpad">
|
||||
<div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
|
||||
<button
|
||||
class="btn w-100 number-button"
|
||||
[ngClass]="'btn-color-' + i"
|
||||
[disabled]="!ticketingActive || !!selectedLabel || maxRowsReached || isLabelDisabled(label)"
|
||||
(click)="selectLabel(label)"
|
||||
>
|
||||
{{ label }}
|
||||
</button>
|
||||
|
||||
|
||||
<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="row gx-1 gy-1 custom-touchpad">
|
||||
<div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
|
||||
<button
|
||||
class="btn w-100 number-button"
|
||||
[ngClass]="'btn-color-' + i"
|
||||
[disabled]="!ticketingActive || !!selectedLabel || maxRowsReached || isLabelDisabled(label)"
|
||||
(click)="selectLabel(label)"
|
||||
>
|
||||
{{ 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">
|
||||
<button
|
||||
class="btn btn-light w-100 number-button"
|
||||
[disabled]="!selectedLabel || isNumberDisabled(number)"
|
||||
(click)="selectNumber(number)"
|
||||
>
|
||||
{{ number }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-2" *ngFor="let number of numbersFlat">
|
||||
<button
|
||||
class="btn btn-light w-100 number-button"
|
||||
[disabled]="!selectedLabel || isNumberDisabled(number)"
|
||||
(click)="selectNumber(number)"
|
||||
>
|
||||
{{ number }}
|
||||
</button>
|
||||
</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()">×</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>
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user