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

0001 import {
0002   Component,
0003   computed,
0004   Signal,
0005   ViewChild,
0006   TemplateRef,
0007   ElementRef
0008 } from '@angular/core';
0009 import { MatSliderModule } from '@angular/material/slider';
0010 import {DecimalPipe} from '@angular/common';
0011 import { MatInputModule } from '@angular/material/input';
0012 import {EventDisplayService} from "../../services/event-display.service";
0013 import {FormsModule} from "@angular/forms";
0014 import {MatButton, MatIconButton} from "@angular/material/button";
0015 import {MatIcon} from "@angular/material/icon";
0016 import {MatTooltip} from "@angular/material/tooltip";
0017 import {MatDialog, MatDialogClose, MatDialogRef} from "@angular/material/dialog";
0018
0019 @Component({
0020   selector: 'app-event-time-control',
0021   standalone: true,
0022   imports: [MatSliderModule, MatInputModule, DecimalPipe, MatButton, FormsModule, MatIcon, MatIconButton, MatTooltip, MatDialogClose],
0023   templateUrl: './event-time-control.component.html',
0024   styleUrls: ['./event-time-control.component.scss']
0025 })
0026 export class EventTimeControlComponent {
0027
0028   animationSpeed: number = 1.0;
0029
0030   @ViewChild('openBtn', { read: ElementRef })
0031   openBtn!: ElementRef;
0032
0033   @ViewChild('dialogTemplate')
0034   dialogTemplate!: TemplateRef<any>;
0035
0036   dialogRef: MatDialogRef<any> | null = null;
0037
0038
0039   customStartTime = this.eventDisplayService.minTime;
0040   customEndTime = this.eventDisplayService.maxTime;
0041
0042   constructor(public eventDisplayService: EventDisplayService,
0043               private dialog: MatDialog)
0044   {
0045
0046   }
0047
0048   public shownTime: Signal<number> = computed(()=>{
0049     const edTime = this.eventDisplayService.eventTime();
0050     if(edTime === null || edTime === undefined) {
0051       return this.eventDisplayService.minTime;
0052     }
0053     return edTime;
0054   })
0055
0056   /**
0057    * Called whenever the slider input changes.
0058    * It extracts the new value and updates the service's time.
0059    */
0060   changeCurrentTime(event: Event): void {
0061     if (!event) return;
0062     const input = event.target as HTMLInputElement;
0063     const value = parseFloat(input.value);
0064     this.eventDisplayService.updateEventTime(value);
0065   }
0066
0067   onThumbInput(event: Event): void {
0068     const input = event.target as HTMLInputElement;
0069     const value = parseFloat(input.value);
0070     this.eventDisplayService.updateEventTime(value);
0071   }
0072
0073   /**
0074    * A function to format the numeric slider value to display e.g. 1 decimal place.
0075    */
0076   formatCurrentTime(value: number): string {
0077     return value.toFixed(1);
0078   }
0079
0080
0081   openDialog(): void {
0082   if (this.dialogRef) {
0083     this.dialogRef.close();
0084     return;
0085   }
0086
0087     const rect = this.openBtn.nativeElement.getBoundingClientRect();
0088     const dialogWidth =  this.dialogTemplate?.elementRef.nativeElement.offsetWidth || 320;
0089
0090
0091     const left = rect.right - dialogWidth;
0092
0093     this.dialogRef = this.dialog.open(this.dialogTemplate, {
0094       position: {
0095         bottom: `${window.innerHeight - rect.bottom + 55}px`,
0096         left: `${Math.max(left, 0)}px`
0097       },
0098       hasBackdrop: false,
0099       panelClass: 'custom-position-dialog',
0100       autoFocus: false
0101     });
0102
0103     this.dialogRef.afterClosed().subscribe(() => {
0104       this.dialogRef = null;
0105     });
0106   }
0107
0108   applyCustomTimeRange(): void {
0109     this.eventDisplayService.minTime = this.customStartTime;
0110     this.eventDisplayService.maxTime = this.customEndTime;
0111     this.eventDisplayService.animationSpeed = this.animationSpeed;
0112     this.dialogRef?.close();
0113   }
0114 }