Vmeda.Online/src/components/chrono/chrono.ts

// (C) Copyright 2015 Martin Dougiamas
//
// 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, 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',
    template: '<span>{{ time / 1000 | coreSecondsToHMS }}</span>'
})
export class CoreChronoComponent implements OnChanges, OnDestroy {
    @Input() running: boolean; // Set it to true to start the chrono. Set it to false to stop it.
    @Input() startTime?: number = 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: number = 0;
    protected interval;

    constructor(private cdr: ChangeDetectorRef) {
        this.onEnd = new EventEmitter();
    }

    /**
     * Component being initialized.
     */
    ngOnInit() {
        this.time = this.startTime || 0;
    }

    /**
     * Component being initialized.
     */
    ngOnChanges(changes: {[name: string]: SimpleChange}) {
        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 = 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.cdr.detectChanges();
        }, 200);
    }

    /**
     * Stop the chrono, leaving the same time it has.
     */
    protected stop() : void {
        clearInterval(this.interval);
        delete this.interval;
    }

    ngOnDestroy() {
        this.stop();
    }
}