diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..0abf337
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { FiveoclockComponent } from './fiveoclock/fiveoclock.component';
+import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
+
+const routes: Routes = [
+ { path: '', component: FiveoclockComponent },
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 750e063..90c6b64 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1 @@
-
-
-
{{timezone.name}}
- {{timezone.time?.toFormat('tt')}}
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f853330..e69de29 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,41 +0,0 @@
-.container {
- display:flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- width: 100%;
- margin: 0;
- padding: 0;
-}
-
-@media (max-width: 350px) {
- .timezone {
- font-size: 1.0em;
- }
-
- .time {
- font-size: 0.5em
- }
-}
-
-@media (min-width:350px) and (max-width: 500px) {
- .timezone {
- font-size: 1.5em;
- }
-
- .time {
- font-size: 1.0em
- }
-}
-
-.timezone {
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: whitesmoke;
- margin-bottom: 0;
-}
-
-.time {
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- 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 cad37cd..b13f2e1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,4 @@
-import { formatDate } from '@angular/common';
import { Component } from '@angular/core';
-import { interval, Observable } from 'rxjs';
-import { Timezone } from './timezone/models/timezone.model';
-import { TimezoneService } from './timezone/services/timezone.service';
-
-
-
-
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
@@ -14,25 +6,5 @@ import { TimezoneService } from './timezone/services/timezone.service';
})
export class AppComponent {
- dates: any[] = []
-
- fiveOclock: Timezone | undefined;
- second: Observable;
-
- fiveOclocks: Timezone[] = [];
-
- constructor(private timezoneService: TimezoneService){
- this.second = interval(1000)
-
- this.second.subscribe(()=>{
- this.fiveOclocks = [];
- this.timezoneService.getCurrentTimeInTimezones(this.timezoneService.getTimezones()).forEach((timezoneObj)=>{
- if(timezoneObj.time?.hour === 17){
- this.fiveOclock = timezoneObj;
- this.fiveOclocks.push(timezoneObj);
- }
- })
- })
-
- }
+ constructor() { }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e2a353d..0776627 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,13 +3,21 @@ import { BrowserModule } from '@angular/platform-browser';
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 { FiveoclockComponent } from './fiveoclock/fiveoclock.component';
+import { TimezoneSingleComponent } from './timezone/components/timezone-single/timezone-single.component';
@NgModule({
declarations: [
- AppComponent
+ AppComponent,
+ TimezoneListComponent,
+ TimezoneSingleComponent,
+ FiveoclockComponent
],
imports: [
BrowserModule,
+ AppRoutingModule,
],
providers: [TimezoneService],
bootstrap: [AppComponent]
diff --git a/src/app/fiveoclock/fiveoclock.component.html b/src/app/fiveoclock/fiveoclock.component.html
new file mode 100644
index 0000000..a0a21e7
--- /dev/null
+++ b/src/app/fiveoclock/fiveoclock.component.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/src/app/fiveoclock/fiveoclock.component.scss b/src/app/fiveoclock/fiveoclock.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/fiveoclock/fiveoclock.component.spec.ts b/src/app/fiveoclock/fiveoclock.component.spec.ts
new file mode 100644
index 0000000..9b75fdf
--- /dev/null
+++ b/src/app/fiveoclock/fiveoclock.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiveoclockComponent } from './fiveoclock.component';
+
+describe('FiveoclockComponent', () => {
+ let component: FiveoclockComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ FiveoclockComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FiveoclockComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/fiveoclock/fiveoclock.component.ts b/src/app/fiveoclock/fiveoclock.component.ts
new file mode 100644
index 0000000..f351f44
--- /dev/null
+++ b/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
+ }
+
+}
diff --git a/src/app/timezone/components/timezone-list/timezone-list.component.html b/src/app/timezone/components/timezone-list/timezone-list.component.html
new file mode 100644
index 0000000..0dce130
--- /dev/null
+++ b/src/app/timezone/components/timezone-list/timezone-list.component.html
@@ -0,0 +1,8 @@
+
+
+
+
{{timezone.name}}
+ {{timezone.time?.toFormat('tt')}}
+
+
+
+
+
+
{{timezone.name}}
+ {{timezone.time?.toFormat('tt')}}
+
+
+