129 lines
4.9 KiB
HTML
Executable File
129 lines
4.9 KiB
HTML
Executable File
<!-- 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-secondary three">BOX</button>
|
||
<button class="btn btn-secondary four">FIELD</button>
|
||
</div>
|
||
|
||
<!-- Right Group: COPY, CLEAR, PR -->
|
||
<div class="d-flex flex-wrap justify-content-center gap-2 second">
|
||
<button class="btn btn-dark">COPY</button>
|
||
<button class="btn btn-dark">CLEAR</button>
|
||
<button class="btn btn-dark">PR</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 🔳 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"
|
||
(click)="selectLabel(label)"
|
||
>
|
||
{{ label }}
|
||
</button>
|
||
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Numeric Pad -->
|
||
<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>
|
||
<div class="col-6">
|
||
<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', '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>
|
||
</div>
|
||
</ng-container>
|
||
|
||
<div class="col-6">
|
||
<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" [disabled]="!canPrint" (click)="print()">Print</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 🧮 Calculator Modal -->
|
||
<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 />
|
||
|
||
<div class="calc-buttons">
|
||
<button (click)="press('7')">7</button>
|
||
<button (click)="press('8')">8</button>
|
||
<button (click)="press('9')">9</button>
|
||
<button (click)="press('/')">÷</button>
|
||
|
||
<button (click)="press('4')">4</button>
|
||
<button (click)="press('5')">5</button>
|
||
<button (click)="press('6')">6</button>
|
||
<button (click)="press('*')">×</button>
|
||
|
||
<button (click)="press('1')">1</button>
|
||
<button (click)="press('2')">2</button>
|
||
<button (click)="press('3')">3</button>
|
||
<button (click)="press('-')">−</button>
|
||
|
||
<button (click)="press('0')">0</button>
|
||
<button (click)="press('.')">.</button>
|
||
<button (click)="calculate()">=</button>
|
||
<button (click)="press('+')">+</button>
|
||
|
||
<button (click)="clearDisplay()" class="span-two">C</button>
|
||
<button class="calc-backspace-btn" (click)="backspace()">⌫</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> |