Skip to content

Instantly share code, notes, and snippets.

@craigiswayne

craigiswayne/countdown.pipe.ts

Last active June 4, 2021 13:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save craigiswayne/f3ebe749c4023d345aedccc47120bf02 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save craigiswayne/f3ebe749c4023d345aedccc47120bf02 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. craigiswayne revised this gist Jun 4, 2021. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions countdown.pipe.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -9,12 +9,11 @@ export class CountdownPipe implements PipeTransform {

    /**
    * Gets the millisecond difference between a future date and now
    * @param futureDate: string
    * @private
    * @param futureDate: string
    * @returns number milliseconds remaining
    */
    private getMsDiff(futureDate: string): number {
    return +(new Date(futureDate)) - Date.now();
    }
    private getMsDiff = (futureDate: string): number => (+(new Date(futureDate)) - Date.now());

    /**
    * Converts milliseconds to the
    @@ -55,7 +54,7 @@ export class CountdownPipe implements PipeTransform {
    * Initial check to see if time remaining is in the future
    * If not, don't bother creating an observable
    */
    if (this.getMsDiff(futureDate) < 0) {
    if (!futureDate || this.getMsDiff(futureDate) < 0) {
    return null;
    }
    return timer(0, 1000).pipe(
  2. craigiswayne revised this gist Jun 4, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion countdown.pipe.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,7 @@ export class CountdownPipe implements PipeTransform {
    * Initial check to see if time remaining is in the future
    * If not, don't bother creating an observable
    */
    if (this.getMsDiff(futureDate)) {
    if (this.getMsDiff(futureDate) < 0) {
    return null;
    }
    return timer(0, 1000).pipe(
  3. craigiswayne revised this gist Jun 4, 2021. No changes.
  4. craigiswayne created this gist Jun 4, 2021.
    67 changes: 67 additions & 0 deletions countdown.pipe.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    import { Pipe, PipeTransform } from '@angular/core';
    import { Observable, timer } from 'rxjs';
    import { map } from 'rxjs/operators';

    @Pipe({
    name: 'countdown'
    })
    export class CountdownPipe implements PipeTransform {

    /**
    * Gets the millisecond difference between a future date and now
    * @param futureDate: string
    * @private
    */
    private getMsDiff(futureDate: string): number {
    return +(new Date(futureDate)) - Date.now();
    }

    /**
    * Converts milliseconds to the
    *
    * @private
    * @param msRemaining
    * @returns null when no time is remaining
    * string in the format `HH:mm:ss`
    */
    private msToTime(msRemaining: number): string | null {
    if (msRemaining < 0) {
    console.info('No Time Remaining:', msRemaining);
    return null;
    }

    let seconds: string | number = Math.floor((msRemaining / 1000) % 60),
    minutes: string | number = Math.floor((msRemaining / (1000 * 60)) % 60),
    hours: string | number = Math.floor((msRemaining / (1000 * 60 * 60)) % 24);

    /**
    * Add the relevant `0` prefix if any of the numbers are less than 10
    * i.e. 5 -> 05
    */
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    minutes = (minutes < 10) ? '0' + minutes : minutes;
    hours = (hours < 10) ? '0' + hours : hours;

    return `${hours}:${minutes}:${seconds}`;
    }

    /**
    * @param futureDate should be in a valid Date Time format
    * e.g. YYYY-MM-DDTHH:mm:ss.msz
    * e.g. 2021-06-04T17:27:10.740z
    */
    public transform(futureDate: string): Observable<string> {
    /**
    * Initial check to see if time remaining is in the future
    * If not, don't bother creating an observable
    */
    if (this.getMsDiff(futureDate)) {
    return null;
    }
    return timer(0, 1000).pipe(
    map(() => {
    return this.msToTime(this.getMsDiff(futureDate));
    })
    );
    }
    }