From 508add0f904ae72c49bcc10ade322eae9f41d47d Mon Sep 17 00:00:00 2001 From: Joel Wetzell Date: Wed, 24 Nov 2021 11:15:58 -0600 Subject: [PATCH] List of timezones --- package-lock.json | 5 +++ package.json | 1 + src/app/app.component.html | 11 +++--- src/app/app.component.scss | 8 ++--- src/app/app.component.ts | 15 +++++--- src/app/app.module.ts | 2 +- src/app/timezone/models/timezone.model.ts | 24 +++++++++++++ .../services/timezone.service.spec.ts | 0 .../services/timezone.service.ts | 36 ++++++++----------- src/styles.scss | 2 ++ 10 files changed, 68 insertions(+), 36 deletions(-) create mode 100644 src/app/timezone/models/timezone.model.ts rename src/app/{ => timezone}/services/timezone.service.spec.ts (100%) rename src/app/{ => timezone}/services/timezone.service.ts (93%) diff --git a/package-lock.json b/package-lock.json index 877c765..3c9ea30 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index aef312c..d4f1a8e 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.component.html b/src/app/app.component.html index ed7f7f2..c350640 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,7 @@ -
-

{{fiveOclock.timezone}}

-

{{fiveOclock.date | date:'mediumTime'}}

-
\ No newline at end of file +
+ +

{{timezone.name}}

+

{{timezone.time?.toFormat('tt')}}

+ +
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 4965a58..a2bf56b 100644 --- a/src/app/app.component.scss +++ b/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; } \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 80e229c..cad37cd 100644 --- a/src/app/app.component.ts +++ b/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; + 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); } }) }) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c71b74f..e2a353d 100644 --- a/src/app/app.module.ts +++ b/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: [ diff --git a/src/app/timezone/models/timezone.model.ts b/src/app/timezone/models/timezone.model.ts new file mode 100644 index 0000000..4f759ca --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/services/timezone.service.spec.ts b/src/app/timezone/services/timezone.service.spec.ts similarity index 100% rename from src/app/services/timezone.service.spec.ts rename to src/app/timezone/services/timezone.service.spec.ts diff --git a/src/app/services/timezone.service.ts b/src/app/timezone/services/timezone.service.ts similarity index 93% rename from src/app/services/timezone.service.ts rename to src/app/timezone/services/timezone.service.ts index c43333f..9b182d4 100644 --- a/src/app/services/timezone.service.ts +++ b/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; diff --git a/src/styles.scss b/src/styles.scss index 1a9b496..e54e037 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,4 +3,6 @@ body { height: 100vh; margin:0; padding:0; + background: #2e2e2e; + } \ No newline at end of file