mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(FuseCountdown) Fixed: Timer doesn't show up immediately
This commit is contained in:
parent
fee608cb44
commit
08e2d5f331
|
@ -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()
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user