129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
// (C) Copyright 2015 Moodle Pty Ltd.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import {
|
|
Component,
|
|
Input,
|
|
OnInit,
|
|
OnChanges,
|
|
OnDestroy,
|
|
Output,
|
|
EventEmitter,
|
|
SimpleChange,
|
|
ChangeDetectorRef,
|
|
} from '@angular/core';
|
|
|
|
/**
|
|
* This component shows a chronometer in format HH:MM:SS.
|
|
*
|
|
* If no startTime is provided, it will start at 00:00:00.
|
|
* If an endTime is provided, the chrono will stop and emit an event in the onEnd output when that number of milliseconds is
|
|
* reached. E.g. if startTime=60000 and endTime=120000, the chrono will start at 00:01:00 and end when it reaches 00:02:00.
|
|
*
|
|
* This component has 2 boolean inputs to control the timer: running (to start and stop it) and reset.
|
|
*
|
|
* Example usage:
|
|
* <core-chrono [running]="running" [reset]="reset" [endTime]="maxTime" (onEnd)="stopCapturing()"></core-chrono>
|
|
*/
|
|
@Component({
|
|
selector: 'core-chrono',
|
|
templateUrl: 'core-chrono.html',
|
|
})
|
|
export class CoreChronoComponent implements OnInit, OnChanges, OnDestroy {
|
|
|
|
@Input() running?: boolean; // Set it to true to start the chrono. Set it to false to stop it.
|
|
@Input() startTime = 0; // Number of milliseconds to put in the chrono before starting.
|
|
@Input() endTime?: number; // Number of milliseconds to stop the chrono.
|
|
@Input() reset?: boolean; // Set it to true to reset the chrono.
|
|
@Output() onEnd: EventEmitter<void>; // Will emit an event when the endTime is reached.
|
|
|
|
time = 0;
|
|
protected interval?: number;
|
|
|
|
constructor(protected changeDetectorRef: ChangeDetectorRef) {
|
|
this.onEnd = new EventEmitter();
|
|
}
|
|
|
|
/**
|
|
* Component being initialized.
|
|
*/
|
|
ngOnInit(): void {
|
|
this.time = this.startTime || 0;
|
|
}
|
|
|
|
/**
|
|
* Component being changed.
|
|
*/
|
|
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
|
|
if (changes && changes.running) {
|
|
if (changes.running.currentValue) {
|
|
this.start();
|
|
} else {
|
|
this.stop();
|
|
}
|
|
}
|
|
if (changes && changes.reset && changes.reset.currentValue) {
|
|
this.resetChrono();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reset the chrono, stopping it and setting it to startTime.
|
|
*/
|
|
protected resetChrono(): void {
|
|
this.stop();
|
|
this.time = this.startTime || 0;
|
|
}
|
|
|
|
/**
|
|
* Start the chrono if it isn't running.
|
|
*/
|
|
protected start(): void {
|
|
if (this.interval) {
|
|
// Already setup.
|
|
return;
|
|
}
|
|
|
|
let lastExecTime = Date.now();
|
|
|
|
this.interval = window.setInterval(() => {
|
|
// Increase the chrono.
|
|
this.time += Date.now() - lastExecTime;
|
|
lastExecTime = Date.now();
|
|
|
|
if (typeof this.endTime != 'undefined' && this.time > this.endTime) {
|
|
// End time reached, stop the timer and call the end function.
|
|
this.stop();
|
|
this.onEnd.emit();
|
|
}
|
|
|
|
// Force change detection. Angular doesn't detect these async operations.
|
|
this.changeDetectorRef.detectChanges();
|
|
}, 200);
|
|
}
|
|
|
|
/**
|
|
* Stop the chrono, leaving the same time it has.
|
|
*/
|
|
protected stop(): void {
|
|
clearInterval(this.interval);
|
|
delete this.interval;
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.stop();
|
|
}
|
|
|
|
}
|