List of timezones

package-lock.json

@@ -5469,6 +5469,11 @@
         "yallist": "^4.0.0"
       }
     },
+    "luxon": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.1.1.tgz",
+      "integrity": "sha512-6VQVNw7+kQu3hL1ZH5GyOhnk8uZm21xS7XJ/6vDZaFNcb62dpFDKcH8TI5NkoZOdMRxr7af7aYGrJlE/Wv0i1w=="
+    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
+    "luxon": "^2.1.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app.component.html

@@ -1,4 +1,7 @@
-<div *ngIf="fiveOclock" class="container">
-  <h1 class="timezone">{{fiveOclock.timezone}}</h1>
-  <h2 class="time">{{fiveOclock.date | date:'mediumTime'}}</h2>
-</div>
+<div class="container">
+    <ng-container *ngFor="let timezone of fiveOclocks">
+      <h1 class="timezone">{{timezone.name}}</h1>
+      <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
+    </ng-container>
+</div>
+

src/app/app.component.scss

@@ -3,19 +3,19 @@
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    height: 100%;
     width: 100%;
-    background: #2e2e2e;
     margin: 0;
     padding: 0;
 }
 
 .timezone {
     font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: whitesmoke
+    color: whitesmoke;
+    margin-bottom: 0;
 }
 
 .time {
     font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: whitesmoke
+    color: whitesmoke;
+    margin-top: 0;
 }

src/app/app.component.ts

@@ -1,7 +1,8 @@
 import { formatDate } from '@angular/common';
 import { Component } from '@angular/core';
 import { interval, Observable } from 'rxjs';
-import { TimezoneService } from './services/timezone.service';
+import { Timezone } from './timezone/models/timezone.model';
+import { TimezoneService } from './timezone/services/timezone.service';
 
 
 
@@ -15,16 +16,20 @@ export class AppComponent {
 
   dates: any[] = []
 
-  fiveOclock: any;
+  fiveOclock: Timezone | undefined;
   second: Observable<number>;
 
+  fiveOclocks: Timezone[] = [];
+
   constructor(private timezoneService: TimezoneService){
     this.second = interval(1000)
 
     this.second.subscribe(()=>{
-      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((dateObj)=>{
-        if(dateObj.date.getHours() == 17){
-          this.fiveOclock = dateObj;
+      this.fiveOclocks = [];
+      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
+        if(timezoneObj.time?.hour === 17){
+          this.fiveOclock = timezoneObj;
+          this.fiveOclocks.push(timezoneObj);
         }
       })
     })

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { TimezoneService } from './services/timezone.service';
+import { TimezoneService } from './timezone/services/timezone.service';
 
 @NgModule({
   declarations: [

src/app/timezone/models/timezone.model.ts

@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+
+export interface Timezone {
+    name: string;
+    time?: DateTime;
+}
+
+export function TimezoneCompare(a: Timezone, b: Timezone) {
+    if (a.time != undefined && b.time != undefined) {
+        if (a.time > b.time) return 1;
+        if (a.time < b.time) return -1;
+        return 0;
+    }
+
+    if (a.time == undefined && b.time != undefined) {
+        return -1;
+    }
+
+    if (b.time == undefined && a.time != undefined) {
+        return 1;
+    }
+
+    return 0;
+}

src/app/timezone/services/timezone.service.ts

@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { DateTime } from 'luxon';
+import { Timezone, TimezoneCompare } from '../models/timezone.model';
 
 @Injectable({
   providedIn: 'root'
@@ -407,7 +409,7 @@ export class TimezoneService {
       'Pacific/Guadalcanal',
       'Pacific/Guam',
       'Pacific/Honolulu',
-      'Pacific/Kanton', // Why is this not valid?
+      // 'Pacific/Kanton', // Why is this not valid?
       'Pacific/Kiritimati',
       'Pacific/Kosrae',
       'Pacific/Kwajalein',
@@ -438,35 +440,25 @@ export class TimezoneService {
     return this.timezones
   }
 
-  public getTimeForTimezone(date: Date, timezone: string): Date | null {
-    try {
-      return new Date(date.toLocaleString("en-US", { timeZone: timezone }));
-    } catch (error) {
-      console.log(`Timezone '${timezone}' not recognized?`)
-      return null;
-    }
+  public getCurrentTimeForTimezone(timezone: string): DateTime | null {
+    
+    var dateTime = DateTime.local().setZone(timezone)
+
+    return dateTime.isValid ? dateTime : null;
+    
   }
 
-  public getCurrentTimeInTimezones(timezones: string[]): { timezone: string; date: Date; }[] {
-    var now = new Date();
-    var dates: { timezone: string; date: Date; }[] = [];
+  public getCurrentTimeInTimezones(timezones: string[]): Timezone[] {
+    var dates: Timezone[] = [];
 
     this.timezones.forEach(element => {
-      var date = this.getTimeForTimezone(now,element);
+      var date = this.getCurrentTimeForTimezone(element);
       if(date != null){
-        dates.push({ timezone: element, date: date })
+        dates.push({ name: element, time: date })
       }
     });
 
-    dates.sort((a, b) => {
-      if (a.date > b.date) {
-        return 1;
-      } else if (a.date < b.date) {
-        return -1;
-      } else {
-        return 0;
-      }
-    })
+    dates.sort(TimezoneCompare)
 
     return dates;
 

src/styles.scss

@@ -3,4 +3,6 @@ body {
     height: 100vh;
     margin:0;
     padding:0;
+    background: #2e2e2e;
+
 }