purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-20 18:24:57 +03:00
parent fee608cb44
commit 08e2d5f331
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/@fuse/components/countdown/countdown.component.ts
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 { interval, Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import * as moment from 'moment'; import * as moment from 'moment';
@ -6,7 +6,8 @@ import * as moment from 'moment';
@Component({ @Component({
selector : 'fuse-countdown', selector : 'fuse-countdown',
templateUrl: './countdown.component.html', templateUrl: './countdown.component.html',
styleUrls : ['./countdown.component.scss'] styleUrls : ['./countdown.component.scss'],
encapsulation: ViewEncapsulation.None
}) })
export class FuseCountdownComponent implements OnInit, OnDestroy export class FuseCountdownComponent implements OnInit, OnDestroy
{ {
@ -48,9 +49,13 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
const currDate = moment(); const currDate = moment();
const eventDate = moment(this.eventDate); 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'); 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 // Create a subscribable interval
const countDown = interval(1000) const countDown = interval(1000)
.pipe( .pipe(
@ -58,14 +63,7 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
return diff = diff - 1; return diff = diff - 1;
}), }),
map(value => { map(value => {
const timeLeft = moment.duration(value, 'seconds'); return this._secondsToRemaining(value);
return {
days : timeLeft.asDays().toFixed(0),
hours : timeLeft.hours(),
minutes: timeLeft.minutes(),
seconds: timeLeft.seconds()
};
}) })
); );
@ -86,4 +84,27 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); 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()
};
}
} }