ncoronel
14bda25c56
feat(counter-to): add countdown component for event timing feat(fonts): include Gotham Book font for better typography fix(location-map): make map height responsive with CSS variables
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { isPlatformBrowser } from '@angular/common';
|
|
import { ChangeDetectionStrategy, Component, DestroyRef, PLATFORM_ID, computed, inject, input, signal } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-counter-to',
|
|
templateUrl: './counter-to.component.html',
|
|
styleUrl: './counter-to.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class CounterToComponent {
|
|
readonly startsAt = input<string | null | undefined>(null);
|
|
|
|
private readonly now = signal(Date.now());
|
|
|
|
protected readonly countdown = computed(() => {
|
|
const startsAt = this.startsAt();
|
|
const instant = startsAt ? Date.parse(startsAt) : NaN;
|
|
if (!Number.isFinite(instant)) return null;
|
|
|
|
const remaining = Math.max(0, instant - this.now());
|
|
const seconds = Math.floor(remaining / 1000);
|
|
return {
|
|
finished: remaining === 0,
|
|
days: Math.floor(seconds / 86400),
|
|
hours: Math.floor((seconds % 86400) / 3600),
|
|
minutes: Math.floor((seconds % 3600) / 60),
|
|
seconds: seconds % 60,
|
|
};
|
|
});
|
|
|
|
constructor() {
|
|
if (isPlatformBrowser(inject(PLATFORM_ID))) {
|
|
const timer = setInterval(() => this.now.set(Date.now()), 1000);
|
|
inject(DestroyRef).onDestroy(() => clearInterval(timer));
|
|
}
|
|
}
|
|
}
|