(FuseCountdown) Fixed: Timer doesn't show up immediately

This commit is contained in:
Sercan Yemen 2018-08-20 18:24:57 +03:00
parent fee608cb44
commit 08e2d5f331

View File

@ -1,4 +1,4 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import * as moment from 'moment';
@ -6,7 +6,8 @@ import * as moment from 'moment';
@Component({
selector : 'fuse-countdown',
templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss']
styleUrls : ['./countdown.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseCountdownComponent implements OnInit, OnDestroy
{
@ -48,9 +49,13 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
const currDate = moment();
const eventDate = moment(this.eventDate);
// Get the difference in between the current date and event date
// Get the difference in between the current date and event date in seconds
let diff = eventDate.diff(currDate, 'seconds');
// Calculate the remaining time for the first time so there will be no
// delay on the countdown
this.countdown = this._secondsToRemaining(diff);
// Create a subscribable interval
const countDown = interval(1000)
.pipe(
@ -58,14 +63,7 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
return diff = diff - 1;
}),
map(value => {
const timeLeft = moment.duration(value, 'seconds');
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
return this._secondsToRemaining(value);
})
);
@ -86,4 +84,27 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Converts given seconds to a remaining time
*
* @param seconds
* @private
*/
private _secondsToRemaining(seconds): any
{
const timeLeft = moment.duration(seconds, 'seconds');
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
}
}