components/event-time-control/event-time-control.component.html

0001 <div class="time-slider-wrapper">
0002   <!-- Custom Time Icon Button -->
0003   <button #openBtn mat-icon-button class="panel-button" (click)="openDialog()" matTooltip="Custom time range">
0004     <mat-icon>schedule</mat-icon>
0005   </button>
0006
0007   <!-- Current Time (left label) -->
0008   <div class="time-label">
0009     {{ shownTime() | number:'1.1-1' }}
0010   </div>
0011
0012   <!-- The Slider -->
0013   <mat-slider
0014     class="tslider"
0015     [min]="eventDisplayService.minTime"
0016     [max]="eventDisplayService.maxTime"
0017     [step]="eventDisplayService.animationSpeed"
0018
0019   >
0020     <input
0021       matSliderThumb
0022       [value]="shownTime()"
0023       (input)="onThumbInput($event)" />
0024   </mat-slider>
0025
0026
0027   <!-- Max Time (right label) -->
0028   <div class="time-label">
0029     {{ eventDisplayService.maxTime | number:'1.0-0' }} [ns]
0030   </div>
0031 </div>
0032
0033 <!-- Custom Time Inputs -->
0034 <ng-template #dialogTemplate>
0035   <button mat-dialog-close aria-label="Close dialog" class="close-round-btn">
0036     <mat-icon>close</mat-icon>
0037   </button>
0038
0039   <div class="custom-dialog-container">
0040     <h3 class="dialog-title">Set Time Range</h3>
0041
0042     <div class="time-inputs">
0043       <mat-form-field appearance="fill">
0044         <mat-label>Start Time</mat-label>
0045         <input matInput type="number" [(ngModel)]="customStartTime">
0046       </mat-form-field>
0047
0048       <mat-form-field appearance="fill">
0049         <mat-label>End Time</mat-label>
0050         <input matInput type="number" [(ngModel)]="customEndTime">
0051       </mat-form-field>
0052
0053       <mat-form-field appearance="fill">
0054         <mat-label>Animation Speed</mat-label>
0055         <input matInput type="number" [(ngModel)]="animationSpeed" step="0.1" min="0.1" />
0056       </mat-form-field>
0057     </div>
0058
0059     <div class="dialog-actions">
0060       <button mat-raised-button  (click)="applyCustomTimeRange()">Apply</button>
0061     </div>
0062   </div>
0063 </ng-template>
0064