Add option for single and list of timezones

src/app/app-routing.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TimezoneClosestComponent } from './timezone/components/timezone-closest/timezone-closest.component';
+import { FiveoclockComponent } from './fiveoclock/fiveoclock.component';
 import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
 
 const routes: Routes = [
-  { path: '', component: TimezoneListComponent },
-  { path: 'closest', component: TimezoneClosestComponent },
+  { path: '', component: FiveoclockComponent },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -1,8 +1,4 @@
 import { Component } from '@angular/core';
-import { interval, Observable } from 'rxjs';
-import { startWith } from 'rxjs/operators';
-import { GetClosestTimezoneFrom, Timezone } from './timezone/models/timezone.model';
-import { TimezoneService } from './timezone/services/timezone.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -10,25 +6,5 @@ import { TimezoneService } from './timezone/services/timezone.service';
 })
 export class AppComponent {
 
-  dates: any[] = []
-
-  fiveOclock: Timezone | undefined;
-  second: Observable<number>;
-
-  fiveOclocks: Timezone[] = [];
-
-  constructor(private timezoneService: TimezoneService) {
-    this.second = interval(1000).pipe(startWith(0)) //every second and give it a starter value
-
-    this.second.subscribe(() => {
-      this.fiveOclocks = [];
-      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj) => {
-        if (timezoneObj.time?.hour === 17) {
-          this.fiveOclocks.push(timezoneObj);
-        }
-        this.fiveOclock = GetClosestTimezoneFrom(this.timezoneService.getCurrentTimezone(), this.fiveOclocks)
-      })
-    })
-
-  }
+  constructor() { }
 }

src/app/app.module.ts

@@ -5,13 +5,15 @@ import { AppComponent } from './app.component';
 import { TimezoneService } from './timezone/services/timezone.service';
 import { AppRoutingModule } from './app-routing.module';
 import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
-import { TimezoneClosestComponent } from './timezone/components/timezone-closest/timezone-closest.component';
+import { FiveoclockComponent } from './fiveoclock/fiveoclock.component';
+import { TimezoneSingleComponent } from './timezone/components/timezone-single/timezone-single.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     TimezoneListComponent,
-    TimezoneClosestComponent
+    TimezoneSingleComponent,
+    FiveoclockComponent
   ],
   imports: [
     BrowserModule,

src/app/fiveoclock/fiveoclock.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngIf="justClosest; else listView">
+    <app-timezone-single *ngIf="fiveOclock" [timezone]="fiveOclock" (click)="toggleView()"></app-timezone-single>
+</ng-container>
+
+<ng-template #listView>
+    <app-timezone-list *ngIf="fiveOclocks" [timezones]="fiveOclocks" (click)="toggleView()"></app-timezone-list>
+</ng-template>

src/app/fiveoclock/fiveoclock.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { TimezoneClosestComponent } from './timezone-closest.component';
+import { FiveoclockComponent } from './fiveoclock.component';
 
-describe('TimezoneClosestComponent', () => {
-  let component: TimezoneClosestComponent;
-  let fixture: ComponentFixture<TimezoneClosestComponent>;
+describe('FiveoclockComponent', () => {
+  let component: FiveoclockComponent;
+  let fixture: ComponentFixture<FiveoclockComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TimezoneClosestComponent ]
+      declarations: [ FiveoclockComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TimezoneClosestComponent);
+    fixture = TestBed.createComponent(FiveoclockComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/fiveoclock/fiveoclock.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { interval, startWith } from 'rxjs';
+import { GetClosestTimezoneFrom, Timezone, TimezoneCompare, TimezoneList } from '../timezone/models/timezone.model';
+import { TimezoneService } from '../timezone/services/timezone.service';
+
+@Component({
+  selector: 'app-fiveoclock',
+  templateUrl: './fiveoclock.component.html',
+  styleUrls: ['./fiveoclock.component.scss']
+})
+export class FiveoclockComponent implements OnInit {
+
+  fiveOclocks: Timezone[] = [];
+  fiveOclock: Timezone | undefined;
+
+  justClosest: boolean = true;
+
+  timezones: string[] =[]
+
+  constructor(private timezoneService: TimezoneService){
+    this.timezones = this.timezoneService.getTimezones()
+    var second = interval(10000).pipe(startWith(0))
+
+    second.subscribe(()=>{
+      this.fiveOclocks = [];
+      this.timezoneService.getCurrentTimeInTimezones(this.timezones).forEach((timezoneObj)=>{
+        if(timezoneObj.time?.hour === 17){
+          this.fiveOclocks.push(timezoneObj);
+        }
+      })
+      this.fiveOclock = GetClosestTimezoneFrom(this.timezoneService.getCurrentTimezone(), this.fiveOclocks)
+    })
+
+  }
+
+  ngOnInit(): void { }
+
+  toggleView(){
+    this.justClosest = !this.justClosest
+  }
+
+}

src/app/timezone/components/timezone-closest/timezone-closest.component.html

@@ -1,8 +0,0 @@
-<div class="background">
-    <ng-container *ngIf="fiveOclock">
-        <div class="container">
-            <h1 class="timezone">{{fiveOclock.name}}</h1>
-            <h2 class="time">{{fiveOclock.time?.toFormat('tt')}}</h2>
-        </div>
-    </ng-container>
-</div>

src/app/timezone/components/timezone-closest/timezone-closest.component.ts

@@ -1,33 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { interval } from 'rxjs';
-import { GetClosestTimezoneFrom, Timezone } from '../../models/timezone.model';
-import { TimezoneService } from '../../services/timezone.service';
-
-@Component({
-  selector: 'app-timezone-closest',
-  templateUrl: './timezone-closest.component.html',
-  styleUrls: ['./timezone-closest.component.scss']
-})
-export class TimezoneClosestComponent implements OnInit {
-
-  fiveOclock: Timezone | undefined;
-
-  constructor(private timezoneService: TimezoneService){
-    var second = interval(1000)
-
-    second.subscribe(()=>{
-      var fiveOclocks: Timezone[] = [];
-      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
-        if(timezoneObj.time?.hour === 17){
-          fiveOclocks.push(timezoneObj);
-        }
-      })
-      this.fiveOclock = GetClosestTimezoneFrom(this.timezoneService.getCurrentTimezone(), fiveOclocks)
-    })
-
-  }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/timezone/components/timezone-list/timezone-list.component.html

@@ -1,5 +1,5 @@
 <div class="background">
-    <ng-container *ngFor="let timezone of fiveOclocks">
+    <ng-container *ngFor="let timezone of timezones">
         <div class="container">
             <h1 class="timezone">{{timezone.name}}</h1>
             <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>

src/app/timezone/components/timezone-list/timezone-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { interval, Observable } from 'rxjs';
 import { Timezone } from '../../models/timezone.model';
 import { TimezoneService } from '../../services/timezone.service';
@@ -10,23 +10,12 @@ import { TimezoneService } from '../../services/timezone.service';
 })
 export class TimezoneListComponent implements OnInit {
 
-  fiveOclocks: Timezone[] = [];
+  @Input() timezones: Timezone[] = [];
 
-  constructor(private timezoneService: TimezoneService){
-    var second = interval(1000)
-
-    second.subscribe(()=>{
-      this.fiveOclocks = [];
-      this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
-        if(timezoneObj.time?.hour === 17){
-          this.fiveOclocks.push(timezoneObj);
-        }
-      })
-    })
-
-  }
+  constructor(){}
 
   ngOnInit(): void {
   }
 
 }
+

src/app/timezone/components/timezone-single/timezone-single.component.html

@@ -0,0 +1,8 @@
+<div class="background">
+    <ng-container *ngIf="timezone">
+        <div class="container">
+            <h1 class="timezone">{{timezone.name}}</h1>
+            <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
+        </div>
+    </ng-container>
+</div>

src/app/timezone/components/timezone-single/timezone-single.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimezoneSingleComponent } from './timezone-single.component';
+
+describe('TimezoneSingleComponent', () => {
+  let component: TimezoneSingleComponent;
+  let fixture: ComponentFixture<TimezoneSingleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TimezoneSingleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimezoneSingleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/timezone/components/timezone-single/timezone-single.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Timezone } from '../../models/timezone.model';
+
+@Component({
+  selector: 'app-timezone-single',
+  templateUrl: './timezone-single.component.html',
+  styleUrls: ['./timezone-single.component.scss']
+})
+export class TimezoneSingleComponent implements OnInit {
+
+  @Input() timezone: Timezone | undefined;
+
+  constructor(){ }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { min } from 'rxjs';
 
 export interface Timezone {
     name: string;
@@ -8,8 +9,8 @@ export interface Timezone {
 
 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;
+        if (a.time.startOf("day") < b.time.startOf("day")) return 1;
+        if (a.time.startOf("day") > b.time.startOf("day")) return -1;
         return 0;
     }
 
@@ -27,27 +28,27 @@ export function TimezoneCompare(a: Timezone, b: Timezone) {
 // http://www.movable-type.co.uk/scripts/latlong.html
 export function GetClosestTimezoneFrom(timezone: string, timezones: Timezone[]) {
     var location1 = timezoneMap[timezone]
-
-
     var closestDist = Number.MAX_SAFE_INTEGER
-    var closestTimezone = undefined
-    timezones.forEach(element => {
-        var location2 = timezoneMap[element.name]
+    var closestTimezone: Timezone | undefined = undefined
+
+    timezones.forEach((timezone) => {
+        var location2 = timezoneMap[timezone.name]
 
         var deltaLat = (location2.lat - location1.lat) * (Math.PI / 180);
-        var deltaLong = (location2.long - location2.long) * (Math.PI / 180);
+        var deltaLong = (location2.long - location1.long) * (Math.PI / 180);
 
         var a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
             Math.cos(location1.lat * (Math.PI / 180)) * Math.cos(location2.lat * (Math.PI / 180)) *
             Math.sin(deltaLong / 2) * Math.sin(deltaLong / 2);
 
-        var dist = Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        var dist = Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
 
         if (dist < closestDist) {
             closestDist = dist
-            closestTimezone = element
+            closestTimezone = timezone
         }
-    });
+    })
+
     return closestTimezone
 }
 
@@ -207,60 +208,60 @@ export var timezoneMap: { [key: string]: TimezoneLocation } = {
     'America/Merida': { lat: 20.9674, long: -89.5926 },
     'America/Metlakatla': { lat: 55.1292, long: -131.5722 },
     'America/Mexico_City': { lat: 19.4326, long: -99.1332 },
-    'America/Miquelon': { lat: 0, long: 0 },
-    'America/Moncton': { lat: 0, long: 0 },
-    'America/Monterrey': { lat: 0, long: 0 },
-    'America/Montevideo': { lat: 0, long: 0 },
-    'America/Montserrat': { lat: 0, long: 0 },
-    'America/Nassau': { lat: 0, long: 0 },
-    'America/New_York': { lat: 0, long: 0 },
-    'America/Nipigon': { lat: 0, long: 0 },
-    'America/Nome': { lat: 0, long: 0 },
-    'America/Noronha': { lat: 0, long: 0 },
-    'America/North_Dakota/Beulah': { lat: 0, long: 0 },
-    'America/North_Dakota/Center': { lat: 0, long: 0 },
-    'America/North_Dakota/New_Salem': { lat: 0, long: 0 },
-    'America/Nuuk': { lat: 0, long: 0 },
-    'America/Ojinaga': { lat: 0, long: 0 },
-    'America/Panama': { lat: 0, long: 0 },
-    'America/Pangnirtung': { lat: 0, long: 0 },
-    'America/Paramaribo': { lat: 0, long: 0 },
-    'America/Phoenix': { lat: 0, long: 0 },
-    'America/Port-au-Prince': { lat: 0, long: 0 },
-    'America/Port_of_Spain': { lat: 0, long: 0 },
-    'America/Porto_Velho': { lat: 0, long: 0 },
-    'America/Puerto_Rico': { lat: 0, long: 0 },
-    'America/Punta_Arenas': { lat: 0, long: 0 },
-    'America/Rainy_River': { lat: 0, long: 0 },
-    'America/Rankin_Inlet': { lat: 0, long: 0 },
-    'America/Recife': { lat: 0, long: 0 },
-    'America/Regina': { lat: 0, long: 0 },
-    'America/Resolute': { lat: 0, long: 0 },
-    'America/Rio_Branco': { lat: 0, long: 0 },
-    'America/Santarem': { lat: 0, long: 0 },
-    'America/Santiago': { lat: 0, long: 0 },
-    'America/Santo_Domingo': { lat: 0, long: 0 },
-    'America/Sao_Paulo': { lat: 0, long: 0 },
-    'America/Scoresbysund': { lat: 0, long: 0 },
-    'America/Sitka': { lat: 0, long: 0 },
-    'America/St_Barthelemy': { lat: 0, long: 0 },
-    'America/St_Johns': { lat: 0, long: 0 },
-    'America/St_Kitts': { lat: 0, long: 0 },
-    'America/St_Lucia': { lat: 0, long: 0 },
-    'America/St_Thomas': { lat: 0, long: 0 },
-    'America/St_Vincent': { lat: 0, long: 0 },
-    'America/Swift_Current': { lat: 0, long: 0 },
-    'America/Tegucigalpa': { lat: 0, long: 0 },
-    'America/Thule': { lat: 0, long: 0 },
-    'America/Thunder_Bay': { lat: 0, long: 0 },
-    'America/Tijuana': { lat: 0, long: 0 },
-    'America/Toronto': { lat: 0, long: 0 },
-    'America/Tortola': { lat: 0, long: 0 },
-    'America/Vancouver': { lat: 0, long: 0 },
-    'America/Whitehorse': { lat: 0, long: 0 },
-    'America/Winnipeg': { lat: 0, long: 0 },
-    'America/Yakutat': { lat: 0, long: 0 },
-    'America/Yellowknife': { lat: 0, long: 0 },
+    'America/Miquelon': { lat: 46.0878, long: -64.7782 },
+    'America/Moncton': { lat: 46.0878, long: -64.7782 },
+    'America/Monterrey': { lat: 46.8852, long: -56.3159 },
+    'America/Montevideo': { lat: -34.9011, long: -56.1645 },
+    'America/Montserrat': { lat: 16.7425, long: -62.1874 },
+    'America/Nassau': { lat: 25.0443, long: -77.3504 },
+    'America/New_York': { lat: 40.7128, long: -74.0060 },
+    'America/Nipigon': { lat: 49.0125, long: -88.2633 },
+    'America/Nome': { lat: 64.5011, long: -165.4064 },
+    'America/Noronha': { lat: -3.8576, long: -32.4297 },
+    'America/North_Dakota/Beulah': { lat: 47.2633, long: -101.7779 },
+    'America/North_Dakota/Center': { lat: 47.1164, long: -101.2996 },
+    'America/North_Dakota/New_Salem': { lat: 46.8450, long: -101.4113 },
+    'America/Nuuk': { lat: 64.1814, long: -51.6941 },
+    'America/Ojinaga': { lat: 29.5459, long: -104.4083 },
+    'America/Panama': { lat: 8.5380, long: -80.7821 },
+    'America/Pangnirtung': { lat: 66.1466, long: -65.7012 },
+    'America/Paramaribo': { lat: 5.8520, long: -55.2038 },
+    'America/Phoenix': { lat: 33.4484, long: -112.0740 },
+    'America/Port-au-Prince': { lat: 18.5944, long: -72.3074 },
+    'America/Port_of_Spain': { lat: 10.6603, long: -61.5086 },
+    'America/Porto_Velho': { lat: -8.7636, long: -63.8972 },
+    'America/Puerto_Rico': { lat: 18.2208, long: -66.5901 },
+    'America/Punta_Arenas': { lat: -53.1638, long: -70.9171 },
+    'America/Rainy_River': { lat: 48.7217, long: -94.5695 },
+    'America/Rankin_Inlet': { lat: 62.8084, long: -92.0853 },
+    'America/Recife': { lat: 8.0577, long: -34.8830 },
+    'America/Regina': { lat: 50.4452, long: -104.6189 },
+    'America/Resolute': { lat: 74.6973, long: -94.8297 },
+    'America/Rio_Branco': { lat: 9.9740, long: -67.8098 },
+    'America/Santarem': { lat: -2.4407, long: -54.7136 },
+    'America/Santiago': { lat: 33.4489, long: -70.6693 },
+    'America/Santo_Domingo': { lat: 18.4861, long: -69.9312 },
+    'America/Sao_Paulo': { lat: -23.5558, long: -46.6396 },
+    'America/Scoresbysund': { lat: 71.0036, long: -22.2862 },
+    'America/Sitka': { lat: 57.0531, long: -135.3300 },
+    'America/St_Barthelemy': { lat: 17.89618, long: -62.84978 },
+    'America/St_Johns': { lat: 47.5615, long: -52.7126 },
+    'America/St_Kitts': { lat: 17.3578, long: -62.7830 },
+    'America/St_Lucia': { lat: 13.9094, long: -60.9789 },
+    'America/St_Thomas': { lat: 18.3381, long: -64.8941 },
+    'America/St_Vincent': { lat: 12.9843, long: -61.2872 },
+    'America/Swift_Current': { lat: 50.2851, long: -107.7972 },
+    'America/Tegucigalpa': { lat: 14.0650, long: -87.1715 },
+    'America/Thule': { lat: 77.4228, long: -68.2423 },
+    'America/Thunder_Bay': { lat: 48.3809, long: -89.2477 },
+    'America/Tijuana': { lat: 32.5149, long: -117.0382 },
+    'America/Toronto': { lat: 43.6532, long: -79.3832 },
+    'America/Tortola': { lat: 18.4335, long: -64.6333 },
+    'America/Vancouver': { lat: 49.2827, long: -123.1207 },
+    'America/Whitehorse': { lat: 60.7212, long: -135.0568 },
+    'America/Winnipeg': { lat: 49.8951, long: -97.1384 },
+    'America/Yakutat': { lat: 59.5469, long: -139.7272 },
+    'America/Yellowknife': { lat: 62.4540, long: -114.3718 },
     'Antarctica/Casey': { lat: -66.2821, long: 110.5285 },
     'Antarctica/Davis': { lat: -68.5762, long: 77.9696 },
     'Antarctica/DumontDUrville': { lat: -66.6630, long: 140.0019 },
@@ -268,177 +269,177 @@ export var timezoneMap: { [key: string]: TimezoneLocation } = {
     'Antarctica/Mawson': { lat: -67.6033, long: 62.8742 },
     'Antarctica/McMurdo': { lat: -77.8419, long: 166.6863 },
     'Antarctica/Palmer': { lat: -64.7743, long: -64.0538 },
-    'Antarctica/Rothera': { lat: -67.5666644,long: -68.1333328 },
+    'Antarctica/Rothera': { lat: -67.5666644, long: -68.1333328 },
     'Antarctica/Syowa': { lat: -69.0044, long: 39.5816 },
     'Antarctica/Troll': { lat: -72.0166, long: 2.5333 },
     'Antarctica/Vostok': { lat: -78.4645, long: 106.8339 },
     'Arctic/Longyearbyen': { lat: 78.2232, long: 15.6267 },
-    'Asia/Aden': { lat: 0, long: 0 },
-    'Asia/Almaty': { lat: 0, long: 0 },
-    'Asia/Amman': { lat: 0, long: 0 },
-    'Asia/Anadyr': { lat: 0, long: 0 },
-    'Asia/Aqtau': { lat: 0, long: 0 },
-    'Asia/Aqtobe': { lat: 0, long: 0 },
-    'Asia/Ashgabat': { lat: 0, long: 0 },
-    'Asia/Atyrau': { lat: 0, long: 0 },
-    'Asia/Baghdad': { lat: 0, long: 0 },
-    'Asia/Bahrain': { lat: 0, long: 0 },
-    'Asia/Baku': { lat: 0, long: 0 },
-    'Asia/Bangkok': { lat: 0, long: 0 },
-    'Asia/Barnaul': { lat: 0, long: 0 },
-    'Asia/Beirut': { lat: 0, long: 0 },
-    'Asia/Bishkek': { lat: 0, long: 0 },
-    'Asia/Brunei': { lat: 0, long: 0 },
-    'Asia/Chita': { lat: 0, long: 0 },
-    'Asia/Choibalsan': { lat: 0, long: 0 },
-    'Asia/Colombo': { lat: 0, long: 0 },
-    'Asia/Damascus': { lat: 0, long: 0 },
-    'Asia/Dhaka': { lat: 0, long: 0 },
-    'Asia/Dili': { lat: 0, long: 0 },
-    'Asia/Dubai': { lat: 0, long: 0 },
-    'Asia/Dushanbe': { lat: 0, long: 0 },
-    'Asia/Famagusta': { lat: 0, long: 0 },
-    'Asia/Gaza': { lat: 0, long: 0 },
-    'Asia/Hebron': { lat: 0, long: 0 },
-    'Asia/Ho_Chi_Minh': { lat: 0, long: 0 },
-    'Asia/Hong_Kong': { lat: 0, long: 0 },
-    'Asia/Hovd': { lat: 0, long: 0 },
-    'Asia/Irkutsk': { lat: 0, long: 0 },
-    'Asia/Jakarta': { lat: 0, long: 0 },
-    'Asia/Jayapura': { lat: 0, long: 0 },
-    'Asia/Jerusalem': { lat: 0, long: 0 },
-    'Asia/Kabul': { lat: 0, long: 0 },
-    'Asia/Kamchatka': { lat: 0, long: 0 },
-    'Asia/Karachi': { lat: 0, long: 0 },
-    'Asia/Kathmandu': { lat: 0, long: 0 },
-    'Asia/Khandyga': { lat: 0, long: 0 },
-    'Asia/Kolkata': { lat: 0, long: 0 },
-    'Asia/Krasnoyarsk': { lat: 0, long: 0 },
-    'Asia/Kuala_Lumpur': { lat: 0, long: 0 },
-    'Asia/Kuching': { lat: 0, long: 0 },
-    'Asia/Kuwait': { lat: 0, long: 0 },
-    'Asia/Macau': { lat: 0, long: 0 },
-    'Asia/Magadan': { lat: 0, long: 0 },
-    'Asia/Makassar': { lat: 0, long: 0 },
-    'Asia/Manila': { lat: 0, long: 0 },
-    'Asia/Muscat': { lat: 0, long: 0 },
-    'Asia/Nicosia': { lat: 0, long: 0 },
-    'Asia/Novokuznetsk': { lat: 0, long: 0 },
-    'Asia/Novosibirsk': { lat: 0, long: 0 },
-    'Asia/Omsk': { lat: 0, long: 0 },
-    'Asia/Oral': { lat: 0, long: 0 },
-    'Asia/Phnom_Penh': { lat: 0, long: 0 },
-    'Asia/Pontianak': { lat: 0, long: 0 },
-    'Asia/Pyongyang': { lat: 0, long: 0 },
-    'Asia/Qatar': { lat: 0, long: 0 },
-    'Asia/Qostanay': { lat: 0, long: 0 },
-    'Asia/Qyzylorda': { lat: 0, long: 0 },
-    'Asia/Riyadh': { lat: 0, long: 0 },
-    'Asia/Sakhalin': { lat: 0, long: 0 },
-    'Asia/Samarkand': { lat: 0, long: 0 },
-    'Asia/Seoul': { lat: 0, long: 0 },
-    'Asia/Shanghai': { lat: 0, long: 0 },
-    'Asia/Singapore': { lat: 0, long: 0 },
-    'Asia/Srednekolymsk': { lat: 0, long: 0 },
-    'Asia/Taipei': { lat: 0, long: 0 },
-    'Asia/Tashkent': { lat: 0, long: 0 },
-    'Asia/Tbilisi': { lat: 0, long: 0 },
-    'Asia/Tehran': { lat: 0, long: 0 },
-    'Asia/Thimphu': { lat: 0, long: 0 },
-    'Asia/Tokyo': { lat: 0, long: 0 },
-    'Asia/Tomsk': { lat: 0, long: 0 },
-    'Asia/Ulaanbaatar': { lat: 0, long: 0 },
-    'Asia/Urumqi': { lat: 0, long: 0 },
-    'Asia/Ust-Nera': { lat: 0, long: 0 },
-    'Asia/Vientiane': { lat: 0, long: 0 },
-    'Asia/Vladivostok': { lat: 0, long: 0 },
-    'Asia/Yakutsk': { lat: 0, long: 0 },
-    'Asia/Yangon': { lat: 0, long: 0 },
-    'Asia/Yekaterinburg': { lat: 0, long: 0 },
-    'Asia/Yerevan': { lat: 0, long: 0 },
-    'Atlantic/Azores': { lat: 0, long: 0 },
-    'Atlantic/Bermuda': { lat: 0, long: 0 },
-    'Atlantic/Canary': { lat: 0, long: 0 },
-    'Atlantic/Cape_Verde': { lat: 0, long: 0 },
-    'Atlantic/Faroe': { lat: 0, long: 0 },
-    'Atlantic/Madeira': { lat: 0, long: 0 },
-    'Atlantic/Reykjavik': { lat: 0, long: 0 },
-    'Atlantic/South_Georgia': { lat: 0, long: 0 },
-    'Atlantic/St_Helena': { lat: 0, long: 0 },
-    'Atlantic/Stanley': { lat: 0, long: 0 },
-    'Australia/Adelaide': { lat: 0, long: 0 },
-    'Australia/Brisbane': { lat: 0, long: 0 },
-    'Australia/Broken_Hill': { lat: 0, long: 0 },
-    'Australia/Darwin': { lat: 0, long: 0 },
-    'Australia/Eucla': { lat: 0, long: 0 },
-    'Australia/Hobart': { lat: 0, long: 0 },
-    'Australia/Lindeman': { lat: 0, long: 0 },
-    'Australia/Lord_Howe': { lat: 0, long: 0 },
-    'Australia/Melbourne': { lat: 0, long: 0 },
-    'Australia/Perth': { lat: 0, long: 0 },
-    'Australia/Sydney': { lat: 0, long: 0 },
-    'Europe/Amsterdam': { lat: 0, long: 0 },
-    'Europe/Andorra': { lat: 0, long: 0 },
-    'Europe/Astrakhan': { lat: 0, long: 0 },
-    'Europe/Athens': { lat: 0, long: 0 },
-    'Europe/Belgrade': { lat: 0, long: 0 },
-    'Europe/Berlin': { lat: 0, long: 0 },
-    'Europe/Bratislava': { lat: 0, long: 0 },
-    'Europe/Brussels': { lat: 0, long: 0 },
-    'Europe/Bucharest': { lat: 0, long: 0 },
-    'Europe/Budapest': { lat: 0, long: 0 },
-    'Europe/Busingen': { lat: 0, long: 0 },
-    'Europe/Chisinau': { lat: 0, long: 0 },
-    'Europe/Copenhagen': { lat: 0, long: 0 },
-    'Europe/Dublin': { lat: 0, long: 0 },
-    'Europe/Gibraltar': { lat: 0, long: 0 },
-    'Europe/Guernsey': { lat: 0, long: 0 },
-    'Europe/Helsinki': { lat: 0, long: 0 },
-    'Europe/Isle_of_Man': { lat: 0, long: 0 },
-    'Europe/Istanbul': { lat: 0, long: 0 },
-    'Europe/Jersey': { lat: 0, long: 0 },
-    'Europe/Kaliningrad': { lat: 0, long: 0 },
-    'Europe/Kiev': { lat: 0, long: 0 },
-    'Europe/Kirov': { lat: 0, long: 0 },
-    'Europe/Lisbon': { lat: 0, long: 0 },
-    'Europe/Ljubljana': { lat: 0, long: 0 },
-    'Europe/London': { lat: 0, long: 0 },
-    'Europe/Luxembourg': { lat: 0, long: 0 },
-    'Europe/Madrid': { lat: 0, long: 0 },
-    'Europe/Malta': { lat: 0, long: 0 },
-    'Europe/Mariehamn': { lat: 0, long: 0 },
-    'Europe/Minsk': { lat: 0, long: 0 },
-    'Europe/Monaco': { lat: 0, long: 0 },
-    'Europe/Moscow': { lat: 0, long: 0 },
-    'Europe/Oslo': { lat: 0, long: 0 },
-    'Europe/Paris': { lat: 0, long: 0 },
-    'Europe/Podgorica': { lat: 0, long: 0 },
-    'Europe/Prague': { lat: 0, long: 0 },
-    'Europe/Riga': { lat: 0, long: 0 },
-    'Europe/Rome': { lat: 0, long: 0 },
-    'Europe/Samara': { lat: 0, long: 0 },
-    'Europe/San_Marino': { lat: 0, long: 0 },
-    'Europe/Sarajevo': { lat: 0, long: 0 },
-    'Europe/Saratov': { lat: 0, long: 0 },
-    'Europe/Simferopol': { lat: 0, long: 0 },
-    'Europe/Skopje': { lat: 0, long: 0 },
-    'Europe/Sofia': { lat: 0, long: 0 },
-    'Europe/Stockholm': { lat: 0, long: 0 },
-    'Europe/Tallinn': { lat: 0, long: 0 },
-    'Europe/Tirane': { lat: 0, long: 0 },
-    'Europe/Ulyanovsk': { lat: 0, long: 0 },
-    'Europe/Uzhgorod': { lat: 0, long: 0 },
-    'Europe/Vaduz': { lat: 0, long: 0 },
-    'Europe/Vatican': { lat: 0, long: 0 },
-    'Europe/Vienna': { lat: 0, long: 0 },
-    'Europe/Vilnius': { lat: 0, long: 0 },
-    'Europe/Volgograd': { lat: 0, long: 0 },
-    'Europe/Warsaw': { lat: 0, long: 0 },
-    'Europe/Zagreb': { lat: 0, long: 0 },
-    'Europe/Zaporozhye': { lat: 0, long: 0 },
-    'Europe/Zurich': { lat: 0, long: 0 },
+    'Asia/Aden': { lat: 12.7855, long: 45.0187 },
+    'Asia/Almaty': { lat: 43.2220, long: 76.8512 },
+    'Asia/Amman': { lat: 31.9539, long: 35.9106 },
+    'Asia/Anadyr': { lat: 64.7337, long: 177.4968 },
+    'Asia/Aqtau': { lat: 43.6588, long: 51.1975 },
+    'Asia/Aqtobe': { lat: 50.2839, long: 57.1670 },
+    'Asia/Ashgabat': { lat: 37.9601, long: 58.3261 },
+    'Asia/Atyrau': { lat: 47.0945, long: 51.9238 },
+    'Asia/Baghdad': { lat: 33.3152, long: 44.3661 },
+    'Asia/Bahrain': { lat: 26.0667, long: 50.5577 },
+    'Asia/Baku': { lat: 40.4093, long: 49.8671 },
+    'Asia/Bangkok': { lat: 13.7563, long: 100.5018 },
+    'Asia/Barnaul': { lat: 53.3497, long: 83.7836 },
+    'Asia/Beirut': { lat: 33.8938, long: 35.5018 },
+    'Asia/Bishkek': { lat: 42.8746, long: 74.5698 },
+    'Asia/Brunei': { lat: 4.5353, long: 114.7277 },
+    'Asia/Chita': { lat: 52.0515, long: 113.4712 },
+    'Asia/Choibalsan': { lat: 48.0951, long: 114.5356 },
+    'Asia/Colombo': { lat: 6.9271, long: 79.8612 },
+    'Asia/Damascus': { lat: 33.5138, long: 36.2765 },
+    'Asia/Dhaka': { lat: 23.8103, long: 90.4125 },
+    'Asia/Dili': { lat: -8.5569, long: 125.5603 },
+    'Asia/Dubai': { lat: 25.2048, long: 55.2708 },
+    'Asia/Dushanbe': { lat: 38.5598, long: 68.7870 },
+    'Asia/Famagusta': { lat: 35.1149, long: 33.9192 },
+    'Asia/Gaza': { lat: 31.3547, long: 34.3088 },
+    'Asia/Hebron': { lat: 31.5326, long: 35.0998 },
+    'Asia/Ho_Chi_Minh': { lat: 10.8231, long: 106.6297 },
+    'Asia/Hong_Kong': { lat: 22.3193, long: 114.1694 },
+    'Asia/Hovd': { lat: 47.9795, long: 91.6348 },
+    'Asia/Irkutsk': { lat: 52.2855, long: 104.2890 },
+    'Asia/Jakarta': { lat: -6.2088, long: 106.8456 },
+    'Asia/Jayapura': { lat: -2.5916, long: 140.6690 },
+    'Asia/Jerusalem': { lat: 31.7683, long: 35.2137 },
+    'Asia/Kabul': { lat: 34.5553, long: 69.2075 },
+    'Asia/Kamchatka': { lat: 56.1327, long: 159.5314 },
+    'Asia/Karachi': { lat: 24.8607, long: 67.0011 },
+    'Asia/Kathmandu': { lat: 27.7172, long: 85.3240 },
+    'Asia/Khandyga': { lat: 62.6564, long: 135.5540 },
+    'Asia/Kolkata': { lat: 22.5726, long: 88.3639 },
+    'Asia/Krasnoyarsk': { lat: 56.0153, long: 92.8932 },
+    'Asia/Kuala_Lumpur': { lat: 3.1390, long: 101.6869 },
+    'Asia/Kuching': { lat: 1.5535, long: 110.3593 },
+    'Asia/Kuwait': { lat: 29.3117, long: 47.4818 },
+    'Asia/Macau': { lat: 22.1987, long: 113.5439 },
+    'Asia/Magadan': { lat: 59.5594, long: 150.8128 },
+    'Asia/Makassar': { lat: -5.1477, long: 119.4327 },
+    'Asia/Manila': { lat: 14.5995, long: 120.9842 },
+    'Asia/Muscat': { lat: 23.5880, long: 58.3829 },
+    'Asia/Nicosia': { lat: 35.1856, long: 33.38230 },
+    'Asia/Novokuznetsk': { lat: 53.7596, long: 87.1216 },
+    'Asia/Novosibirsk': { lat: 54.9833, long: 82.8964 },
+    'Asia/Omsk': { lat: 54.9914, long: 73.3645 },
+    'Asia/Oral': { lat: 51.2278, long: 51.3865 },
+    'Asia/Phnom_Penh': { lat: 11.5564, long: 104.9282 },
+    'Asia/Pontianak': { lat: -0.0263, long: 109.3425 },
+    'Asia/Pyongyang': { lat: 39.0738, long: 125.8198 },
+    'Asia/Qatar': { lat: 25.3548, long: 51.1839 },
+    'Asia/Qostanay': { lat: 53.2198, long: 63.6354 },
+    'Asia/Qyzylorda': { lat: 44.8488, long: 65.4823 },
+    'Asia/Riyadh': { lat: 24.7136, long: 46.6753 },
+    'Asia/Sakhalin': { lat: 50.6910, long: 142.9506 },
+    'Asia/Samarkand': { lat: 39.6270, long: 66.9750 },
+    'Asia/Seoul': { lat: 37.5665, long: 126.9780 },
+    'Asia/Shanghai': { lat: 31.2304, long: 121.4737 },
+    'Asia/Singapore': { lat: 1.3521, long: 103.8198 },
+    'Asia/Srednekolymsk': { lat: 67.4373, long: 153.7287 },
+    'Asia/Taipei': { lat: 25.0330, long: 121.5654 },
+    'Asia/Tashkent': { lat: 41.2995, long: 69.2401 },
+    'Asia/Tbilisi': { lat: 41.7151, long: 44.8271 },
+    'Asia/Tehran': { lat: 35.6892, long: 35.6892 },
+    'Asia/Thimphu': { lat: 27.4712, long: 89.6339 },
+    'Asia/Tokyo': { lat: 35.6762, long: 139.6503 },
+    'Asia/Tomsk': { lat: 56.4884, long: 84.9480 },
+    'Asia/Ulaanbaatar': { lat: 47.8864, long: 106.9057 },
+    'Asia/Urumqi': { lat: 43.8266, long: 87.6169 },
+    'Asia/Ust-Nera': { lat: 64.5672, long: 143.2265 },
+    'Asia/Vientiane': { lat: 17.9757, long: 102.6331 },
+    'Asia/Vladivostok': { lat: 43.1332, long: 131.9113 },
+    'Asia/Yakutsk': { lat: 62.0397, long: 129.7422 },
+    'Asia/Yangon': { lat: 16.8409, long: 96.1735 },
+    'Asia/Yekaterinburg': { lat: 56.8431, long: 60.6454 },
+    'Asia/Yerevan': { lat: 40.1872, long: 44.5152 },
+    'Atlantic/Azores': { lat: 38.7216, long: -27.2206 },
+    'Atlantic/Bermuda': { lat: 32.2937, long: -64.7755 },
+    'Atlantic/Canary': { lat: 28.2916, long: -16.6291 },
+    'Atlantic/Cape_Verde': { lat: 16.4969, long: -23.1918 },
+    'Atlantic/Faroe': { lat: 61.8925022, long: -6.9729703 },
+    'Atlantic/Madeira': { lat: 32.7607, long: -16.9595 },
+    'Atlantic/Reykjavik': { lat: 65.4215, long: -19.0346 },
+    'Atlantic/South_Georgia': { lat: -55.9654, long: -29.9202 },
+    'Atlantic/St_Helena': { lat: -23.8689, long: -9.1899 },
+    'Atlantic/Stanley': { lat: -51.6882, long: 59.8139 },
+    'Australia/Adelaide': { lat: -34.9285, long: 138.6007 },
+    'Australia/Brisbane': { lat: -27.4705, long: 153.0260 },
+    'Australia/Broken_Hill': { lat: -31.9596, long: 141.4608 },
+    'Australia/Darwin': { lat: -12.462827, long: 130.841782 },
+    'Australia/Eucla': { lat: -35.306179, long: 149.126419 },
+    'Australia/Hobart': { lat: -42.880554, long: 147.324997 },
+    'Australia/Lindeman': { lat: -35.306179, long: 149.126419 },
+    'Australia/Lord_Howe': { lat: -31.555326, long: 159.082121 },
+    'Australia/Melbourne': { lat: -37.8136, long: 144.9631 },
+    'Australia/Perth': { lat: -31.9523, long: 115.8613 },
+    'Australia/Sydney': { lat: -33.8688, long: 151.2093 },
+    'Europe/Amsterdam': { lat: 52.3676, long: 4.9041 },
+    'Europe/Andorra': { lat: 42.5063, long: 1.5218 },
+    'Europe/Astrakhan': { lat: 46.3586, long: 48.0569 },
+    'Europe/Athens': { lat: 37.9838, long: 23.7275 },
+    'Europe/Belgrade': { lat: 44.8125, long: 20.4612 },
+    'Europe/Berlin': { lat: 52.5200, long: 13.4050 },
+    'Europe/Bratislava': { lat: 48.1486, long: 17.1077 },
+    'Europe/Brussels': { lat: 50.8476, long: 4.3572 },
+    'Europe/Bucharest': { lat: 44.4268, long: 26.1025 },
+    'Europe/Budapest': { lat: 47.4979, long: 19.0402 },
+    'Europe/Busingen': { lat: 47.6970, long: 8.6904 },
+    'Europe/Chisinau': { lat: 47.0105, long: 28.8638 },
+    'Europe/Copenhagen': { lat: 55.6761, long: 12.5683 },
+    'Europe/Dublin': { lat: 53.3498, long: -6.2603 },
+    'Europe/Gibraltar': { lat: 36.1408, long: -5.3536 },
+    'Europe/Guernsey': { lat: 49.4482, long: -2.5895 },
+    'Europe/Helsinki': { lat: 60.1699, long: 24.9384 },
+    'Europe/Isle_of_Man': { lat: 54.2361, long: -4.5481 },
+    'Europe/Istanbul': { lat: 41.0082, long: 28.9784 },
+    'Europe/Jersey': { lat: 49.2138, long: -2.1358 },
+    'Europe/Kaliningrad': { lat: 54.7104, long: 20.4522 },
+    'Europe/Kiev': { lat: 50.4501, long: 30.5234 },
+    'Europe/Kirov': { lat: 58.6030, long: 49.6679 },
+    'Europe/Lisbon': { lat: 38.7223, long: -9.1393 },
+    'Europe/Ljubljana': { lat: 46.0569, long: 14.5058 },
+    'Europe/London': { lat: 51.5072, long: -0.1276 },
+    'Europe/Luxembourg': { lat: 49.8153, long: 6.1296 },
+    'Europe/Madrid': { lat: 40.4168, long: -3.7038 },
+    'Europe/Malta': { lat: 35.9375, long: 14.3754 },
+    'Europe/Mariehamn': { lat: 60.0971, long: 19.9348 },
+    'Europe/Minsk': { lat: 53.9006, long: 27.5590 },
+    'Europe/Monaco': { lat: 3.7384, long: 7.4246 },
+    'Europe/Moscow': { lat: 55.7558, long: 37.6173 },
+    'Europe/Oslo': { lat: 59.9139, long: 10.7522 },
+    'Europe/Paris': { lat: 48.8566, long: 2.3522 },
+    'Europe/Podgorica': { lat: 42.4304, long: 19.2594 },
+    'Europe/Prague': { lat: 50.0755, long: 14.4378 },
+    'Europe/Riga': { lat: 56.9496, long: 24.1052 },
+    'Europe/Rome': { lat: 41.9028, long: 12.4964 },
+    'Europe/Samara': { lat: 53.2038, long: 50.1606 },
+    'Europe/San_Marino': { lat: 43.9424, long: 12.4578 },
+    'Europe/Sarajevo': { lat: 43.8563, long: 18.4131 },
+    'Europe/Saratov': { lat: 51.5462, long: 46.0154 },
+    'Europe/Simferopol': { lat: 44.9521, long: 34.1024 },
+    'Europe/Skopje': { lat: 41.9981, long: 21.4254 },
+    'Europe/Sofia': { lat: 42.6977, long: 23.3219 },
+    'Europe/Stockholm': { lat: 59.3293, long: 18.0686 },
+    'Europe/Tallinn': { lat: 59.4370, long: 24.7536 },
+    'Europe/Tirane': { lat: 41.3275, long: 19.8187 },
+    'Europe/Ulyanovsk': { lat: 54.3187, long: 48.3978 },
+    'Europe/Uzhgorod': { lat: 48.6208, long: 22.2879 },
+    'Europe/Vaduz': { lat: 47.1410, long: 9.5209 },
+    'Europe/Vatican': { lat: 41.9029, long: 12.4534 },
+    'Europe/Vienna': { lat: 48.2082, long: 16.3738 },
+    'Europe/Vilnius': { lat: 54.6872, long: 25.2797 },
+    'Europe/Volgograd': { lat: 48.7080, long: 44.5133 },
+    'Europe/Warsaw': { lat: 52.2297, long: 21.0122 },
+    'Europe/Zagreb': { lat: 45.8150, long: 15.9819 },
+    'Europe/Zaporozhye': { lat: 47.8388, long: 35.1396 },
+    'Europe/Zurich': { lat: 47.3769, long: 8.5417 },
     'Indian/Antananarivo': { lat: -18.8792, long: 47.5079 },
-    'Indian/Chagos': { lat: -4.416665, long: 72.5999976 },  
+    'Indian/Chagos': { lat: -4.416665, long: 72.5999976 },
     'Indian/Christmas': { lat: -10.4475, long: 105.6904 },
     'Indian/Cocos': { lat: -12.1642, long: 96.8710 },
     'Indian/Comoro': { lat: -11.6455, long: 43.3333 },
@@ -452,7 +453,7 @@ export var timezoneMap: { [key: string]: TimezoneLocation } = {
     'Pacific/Auckland': { lat: -36.8509, long: 174.7645 },
     'Pacific/Bougainville': { lat: -6.3754, long: 155.3807 },
     'Pacific/Chatham': { lat: -44.0058, long: -176.5401 },
-    'Pacific/Chuuk': { lat: 7.417, long: 151.783 },  
+    'Pacific/Chuuk': { lat: 7.417, long: 151.783 },
     'Pacific/Easter': { lat: -27.1127, long: -109.3497 },
     'Pacific/Efate': { lat: -17.6577, long: 168.4297 },
     'Pacific/Fakaofo': { lat: -9.3803, long: -171.2188 },

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

@@ -31,13 +31,11 @@ export class TimezoneService {
     timezones.forEach(element => {
       var date = this.getCurrentTimeForTimezone(element);
       if (date != null) {
-        dates.push({ name: element, time: date })
+        const timezone = { name: element, time: date }
+        dates.push(timezone)
       }
     });
-
-    dates.sort(TimezoneCompare)
-
-    return dates;
-
+    
+    return dates.sort(TimezoneCompare);
   }
 }