feat : touchpad (function) working
This commit is contained in:
parent
876d7b5c35
commit
d93596b12f
@ -22,7 +22,7 @@
|
||||
<col style="width: 65%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of summaryRows">
|
||||
<tr *ngFor="let row of summaryRows | slice:0:4">
|
||||
<td class="custom-cell pure-white"></td>
|
||||
<td class="custom-cell pure-white"></td>
|
||||
<td class="custom-cell pure-white"></td>
|
||||
@ -47,7 +47,7 @@
|
||||
<col style="width: 18%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr *ngFor="let row of rows">
|
||||
<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>
|
||||
|
||||
@ -421,3 +421,58 @@ button {
|
||||
margin-right: -120px;
|
||||
background-color: #0077b6;
|
||||
}
|
||||
|
||||
/* 🔹 Highlight selected label */
|
||||
.selected-label {
|
||||
box-shadow: 0 0 0 3px #3a8dd5 inset;
|
||||
background-color: #1d4f91 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 🔹 Highlight selected number */
|
||||
.selected-number {
|
||||
background-color: #b34d4d !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 🔹 Disabled state for label and number buttons */
|
||||
button[disabled] {
|
||||
opacity: 0.4 !important;
|
||||
pointer-events: none !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* 🔹 Pad value display */
|
||||
.pad-value-preview {
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
padding: 0.5rem 0;
|
||||
color: #1d1d1d;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 🔹 Active numeric pad key (optional if needed) */
|
||||
.active-pad-key {
|
||||
background-color: #007bff !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 🔹 Print button enabled effect */
|
||||
button.ready-to-print {
|
||||
background-color: #28a745 !important;
|
||||
border-color: #28a745 !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 🔹 Error state (optional for input validation) */
|
||||
.input-error {
|
||||
border: 2px solid #dc3545 !important;
|
||||
background-color: #f8d7da !important;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@ -27,24 +25,10 @@
|
||||
<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="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"
|
||||
>
|
||||
{{ label }}
|
||||
</button>
|
||||
<div class="col-4" *ngFor="let label of labelRowsFlat; let i = index">
|
||||
<button class="btn w-100 number-button" [ngClass]="'btn-color-' + i" [disabled]="!!selectedLabel" (click)="selectLabel(label)">{{ label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,67 +36,45 @@
|
||||
|
||||
<!-- Numbers 1 to 30 -->
|
||||
<div class="col-7">
|
||||
<div
|
||||
class="p-2 rounded wrapper-pad"
|
||||
style="background-color: #f1f1f1df"
|
||||
>
|
||||
<div class="p-2 rounded wrapper-pad" style="background-color: #f1f1f1df">
|
||||
<div class="row gx-1 gy-1 custom-touchpad">
|
||||
<div class="col-2" *ngFor="let number of numbersFlat">
|
||||
<button class="btn btn-light w-100 number-button">
|
||||
<!-- 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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Numeric Pad -->
|
||||
<div class="col-2 column">
|
||||
<div
|
||||
class="p-2 rounded wrapper-pad"
|
||||
style="background-color: #f1f1f1df"
|
||||
>
|
||||
<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">0</button>
|
||||
<button class="btn btn-secondary w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal('0')">0</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-light w-100 number-button">X</button>
|
||||
<button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal('X')">X</button>
|
||||
</div>
|
||||
|
||||
<ng-container *ngFor="let key of ['7', '8', '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">
|
||||
{{ key }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngFor="let key of ['4', '5', '6']">
|
||||
<div class="col-4">
|
||||
<button class="btn btn-light w-100 number-button">
|
||||
{{ key }}
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngFor="let key of ['1', '2', '3']">
|
||||
<div class="col-4">
|
||||
<button class="btn btn-light w-100 number-button">
|
||||
{{ key }}
|
||||
</button>
|
||||
<button class="btn btn-light w-100 number-button" [disabled]="!numericPadEnabled" (click)="enterPadVal(key)">{{ key }}</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div class="col-6">
|
||||
<button class="btn btn-secondary w-100 number-button">
|
||||
Enter
|
||||
</button>
|
||||
<button class="btn btn-secondary w-100 number-button" [disabled]="!numericPadEnabled" (click)="padEnter()">Enter</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-secondary w-100 number-button">
|
||||
Print
|
||||
</button>
|
||||
<button class="btn btn-secondary w-100 number-button" [disabled]="!canPrint" (click)="print()">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,23 +83,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 🧮 Calculator Modal -->
|
||||
<div
|
||||
id="calculatorModal"
|
||||
class="calculator-modal"
|
||||
[style.display]="calculatorOpen ? 'block' : 'none'"
|
||||
>
|
||||
<div id="calculatorModal" class="calculator-modal" [style.display]="calculatorOpen ? 'block' : 'none'">
|
||||
<div class="calculator-content">
|
||||
<div class="calculator-header">
|
||||
<span class="close-btn" (click)="closeCalculator()">×</span>
|
||||
<h5>Calculator</h5>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="calc-display"
|
||||
class="calc-display"
|
||||
[value]="calcDisplay"
|
||||
disabled
|
||||
/>
|
||||
<input type="text" id="calc-display" class="calc-display" [value]="calcDisplay" disabled />
|
||||
|
||||
<div class="calc-buttons">
|
||||
<button (click)="press('7')">7</button>
|
||||
|
||||
@ -20,12 +20,14 @@ export class TouchPadMenuComponent implements OnInit {
|
||||
];
|
||||
|
||||
numbers: number[] = Array.from({ length: 30 }, (_, i) => i + 1);
|
||||
calcKeys: string[] = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '←', 'CLR'];
|
||||
|
||||
labelRowsFlat: string[] = [];
|
||||
numbersFlat: number[] = [];
|
||||
|
||||
// Calculator modal state
|
||||
selectedLabel: string | null = null;
|
||||
selectedNumbers: number[] = [];
|
||||
padValue: string = '';
|
||||
canPrint = false;
|
||||
|
||||
calculatorOpen = false;
|
||||
calcDisplay = '';
|
||||
|
||||
@ -42,8 +44,8 @@ export class TouchPadMenuComponent implements OnInit {
|
||||
return this.chunk(this.numbers, 6);
|
||||
}
|
||||
|
||||
get calcKeyRows() {
|
||||
return this.chunk(this.calcKeys, 3);
|
||||
get numericPadEnabled() {
|
||||
return this.selectedLabel !== null && this.selectedNumbers.length > 0;
|
||||
}
|
||||
|
||||
private chunk<T>(array: T[], size: number): T[][] {
|
||||
@ -52,7 +54,56 @@ export class TouchPadMenuComponent implements OnInit {
|
||||
);
|
||||
}
|
||||
|
||||
// Calculator methods
|
||||
selectLabel(label: string) {
|
||||
this.selectedLabel = label;
|
||||
this.selectedNumbers = [];
|
||||
this.padValue = '';
|
||||
this.canPrint = false;
|
||||
}
|
||||
|
||||
selectNumber(number: number) {
|
||||
if (!this.selectedLabel) return;
|
||||
if (!this.selectedNumbers.includes(number)) {
|
||||
this.selectedNumbers.push(number);
|
||||
this.padValue = '';
|
||||
this.canPrint = false;
|
||||
}
|
||||
}
|
||||
|
||||
isNumberDisabled(number: number) {
|
||||
return this.selectedNumbers.includes(number);
|
||||
}
|
||||
|
||||
enterPadVal(key: string) {
|
||||
if (!this.numericPadEnabled) return;
|
||||
if (/[0-9]/.test(key)) {
|
||||
this.padValue += key;
|
||||
} else if (key === 'X') {
|
||||
this.padValue += 'X';
|
||||
}
|
||||
this.updateCanPrint();
|
||||
}
|
||||
|
||||
updateCanPrint() {
|
||||
this.canPrint = this.padValue.trim().length > 0;
|
||||
}
|
||||
|
||||
padEnter() {
|
||||
// Optional action on enter
|
||||
}
|
||||
|
||||
print() {
|
||||
alert(`Printing: Label=${this.selectedLabel}, Numbers=${this.selectedNumbers.join(', ')}, Value=${this.padValue}`);
|
||||
this.resetSelections();
|
||||
}
|
||||
|
||||
resetSelections() {
|
||||
this.selectedLabel = null;
|
||||
this.selectedNumbers = [];
|
||||
this.padValue = '';
|
||||
this.canPrint = false;
|
||||
}
|
||||
|
||||
openCalculator() {
|
||||
this.calculatorOpen = true;
|
||||
this.calcDisplay = '';
|
||||
@ -72,11 +123,9 @@ export class TouchPadMenuComponent implements OnInit {
|
||||
}
|
||||
|
||||
backspace() {
|
||||
if (this.calcDisplay === 'Error') {
|
||||
this.calcDisplay = '';
|
||||
} else {
|
||||
this.calcDisplay = this.calcDisplay.slice(0, -1);
|
||||
}
|
||||
this.calcDisplay = this.calcDisplay === 'Error'
|
||||
? ''
|
||||
: this.calcDisplay.slice(0, -1);
|
||||
}
|
||||
|
||||
calculate() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user