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

0001 import {Component, Input, Output, EventEmitter, inject, computed, Signal} from '@angular/core';
0002 import { MatSliderModule } from '@angular/material/slider';
0003 import { DecimalPipe } from '@angular/common';
0004 import { MatInputModule } from '@angular/material/input';
0005 import {EventDisplayService} from "../../services/event-display.service";
0006
0007 @Component({
0008   selector: 'app-event-time-control',
0009   standalone: true,
0010   imports: [MatSliderModule, MatInputModule, DecimalPipe],
0011   templateUrl: './event-time-control.component.html',
0012   styleUrls: ['./event-time-control.component.scss']
0013 })
0014 export class EventTimeControlComponent {
0015   constructor(public eventDisplayService: EventDisplayService) {}
0016
0017   public shownTime: Signal<number> = computed(()=>{
0018     const edTime = this.eventDisplayService.eventTime();
0019     if(edTime === null || edTime === undefined) {
0020       return this.eventDisplayService.minTime;
0021     }
0022     return edTime;
0023   })
0024   /**
0025    * Called whenever the slider input changes.
0026    * It extracts the new value and updates the service's time.
0027    */
0028   changeCurrentTime(event: Event): void {
0029     if (!event) return;
0030     const input = event.target as HTMLInputElement;
0031     const value = parseFloat(input.value);
0032     this.eventDisplayService.updateEventTime(value);
0033   }
0034
0035   /**
0036    * A function to format the numeric slider value to display e.g. 1 decimal place.
0037    */
0038   formatCurrentTime(value: number): string {
0039     return value.toFixed(1);
0040   }
0041
0042
0043 }