add linting remove unimplemented tests

src/app/app.component.html

@@ -1,7 +1,7 @@
-<app-timezone-list 
-    *ngIf="fiveOclocks" 
-    [timezones]="fiveOclocks" 
-    [closest]="fiveOclock" 
-    [showAll]="showAll" 
-    (click)="toggleView()">
+<app-timezone-list
+  *ngIf="fiveOclocks"
+  [timezones]="fiveOclocks"
+  [closest]="fiveOclock"
+  [showAll]="showAll"
+  (click)="toggleView()">
 </app-timezone-list>

src/app/app.component.spec.ts

@@ -1,19 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-  
-});

src/app/app.component.ts

@@ -1,63 +1,61 @@
 import { Component } from '@angular/core';
 import { interval, startWith } from 'rxjs';
 import { GoogleAnalyticsService } from './services/google-analytics.service';
-import { Timezone, GetClosestTimezoneFrom } from './timezone/models/timezone.model';
+import { GetClosestTimezoneFrom, Timezone } from './timezone/models/timezone.model';
 import { TimezoneService } from './timezone/services/timezone.service';
 
 declare let gtag: Function;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-
   fiveOclocks: Timezone[] = [];
   fiveOclock: Timezone | undefined;
 
   showAll: boolean = false;
 
-  timezones: string[] =[]
+  timezones: string[] = [];
 
   constructor(
     private timezoneService: TimezoneService,
-    private googleAnalyticsService: GoogleAnalyticsService,
-    ){
-      const currentTimezone = this.timezoneService.getCurrentTimezone()
-      if(currentTimezone){
-        this.timezones = this.timezoneService.getTimezones()
-        
-        var second = interval(1000).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(currentTimezone, this.fiveOclocks)
-        })
-      }
+    private googleAnalyticsService: GoogleAnalyticsService
+  ) {
+    const currentTimezone = this.timezoneService.getCurrentTimezone();
+    if (currentTimezone) {
+      this.timezones = this.timezoneService.getTimezones();
+
+      var second = interval(1000).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(currentTimezone, this.fiveOclocks);
+      });
+    }
   }
 
-  ngOnInit(): void { 
-    gtag('config', 'G-48B6CKS0V6',{
-      'page_path': '/'
+  ngOnInit(): void {
+    gtag('config', 'G-48B6CKS0V6', {
+      page_path: '/',
     });
   }
 
-  toggleView(){
-    if(this.showAll){
+  toggleView() {
+    if (this.showAll) {
       this.googleAnalyticsService.emitEvent('select_content', {
-        'event_label' : 'timezone_closest',
-      })
-    }else{
+        event_label: 'timezone_closest',
+      });
+    } else {
       this.googleAnalyticsService.emitEvent('select_content', {
-        'event_label' : 'timezone_list',
-      })
+        event_label: 'timezone_list',
+      });
     }
-    this.showAll = !this.showAll
-
+    this.showAll = !this.showAll;
   }
 }

src/app/app.module.ts

@@ -3,22 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
-import { TimezoneService } from './timezone/services/timezone.service';
-import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
 import { GoogleAnalyticsService } from './services/google-analytics.service';
+import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
+import { TimezoneService } from './timezone/services/timezone.service';
 @NgModule({
-  declarations: [
-    AppComponent,
-    TimezoneListComponent,
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-  ],
-  providers: [
-    TimezoneService,
-    GoogleAnalyticsService
-  ],
-  bootstrap: [AppComponent]
+  declarations: [AppComponent, TimezoneListComponent],
+  imports: [BrowserModule, BrowserAnimationsModule],
+  providers: [TimezoneService, GoogleAnalyticsService],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/services/google-analytics.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { GoogleAnalyticsService } from './google-analytics.service';
-
-describe('GoogleAnalyticsService', () => {
-  let service: GoogleAnalyticsService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(GoogleAnalyticsService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/services/google-analytics.service.ts

@@ -10,7 +10,6 @@ export class GoogleAnalyticsService {
   constructor() { }
 
   public emitEvent(name: string, event: any) {
-    
     gtag('event', name, event)
   }
 

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

@@ -1,14 +1,21 @@
-<div class="background" [@displayState]="state" (@displayState.start)="animationEvent($event)" (@displayState.done)="animationEvent($event)">
-    <ng-container *ngIf="showAllItems; else single" >
-        <div *ngFor="let timezone of timezones" class="container" [ngStyle]="{'height': timezones.length == 1 ? '100%' : 'auto'}">
-            <h1 class="timezone">{{timezone.name.replace('_', ' ')}}</h1>
-            <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
-        </div>
-    </ng-container>
-    <ng-template #single >
-        <div *ngIf="closest" class="single-container">
-            <h1 class="timezone">{{closest.name.replace('_', ' ')}}</h1>
-            <h2 class="time">{{closest.time?.toFormat('tt')}}</h2>
-        </div>
-    </ng-template>
-</div>
+<div
+  class="background"
+  [@displayState]="state"
+  (@displayState.start)="animationEvent($event)"
+  (@displayState.done)="animationEvent($event)">
+  <ng-container *ngIf="showAllItems; else single">
+    <div
+      *ngFor="let timezone of timezones"
+      class="container"
+      [ngStyle]="{ height: timezones.length == 1 ? '100%' : 'auto' }">
+      <h1 class="timezone">{{ timezone.name.replace('_', ' ') }}</h1>
+      <h2 class="time">{{ timezone.time?.toFormat('tt') }}</h2>
+    </div>
+  </ng-container>
+  <ng-template #single>
+    <div *ngIf="closest" class="single-container">
+      <h1 class="timezone">{{ closest.name.replace('_', ' ') }}</h1>
+      <h2 class="time">{{ closest.time?.toFormat('tt') }}</h2>
+    </div>
+  </ng-template>
+</div>

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

@@ -1,57 +1,57 @@
 .container {
-    display:flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    margin: 0;
-    padding: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 .single-container {
-    display:flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
 
-@media (max-width: 350px) { 
-    .timezone {
-        font-size: 1.0em;
-    }
-    
-    .time {
-        font-size: 0.5em
-    }
+@media (max-width: 350px) {
+  .timezone {
+    font-size: 1em;
+  }
+
+  .time {
+    font-size: 0.5em;
+  }
 }
 
-@media (min-width:350px) and (max-width: 500px) { 
-    .timezone {
-        font-size: 1.5em;
-    }
-    
-    .time {
-        font-size: 1.0em
-    }
+@media (min-width: 350px) and (max-width: 500px) {
+  .timezone {
+    font-size: 1.5em;
+  }
+
+  .time {
+    font-size: 1em;
+  }
 }
 
 .timezone {
-    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: whitesmoke;
-    margin-bottom: 0;
+  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;
+  font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: whitesmoke;
+  margin-top: 0;
 }
 
 .background {
-    background: #2e2e2e;
-    height: 100%;
-}
+  background: #2e2e2e;
+  height: 100%;
+}

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

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

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

@@ -1,4 +1,4 @@
-import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Timezone } from '../../models/timezone.model';
 
@@ -6,53 +6,53 @@ import { Timezone } from '../../models/timezone.model';
   selector: 'app-timezone-list',
   templateUrl: './timezone-list.component.html',
   styleUrls: ['./timezone-list.component.scss'],
-  animations:[
-    trigger('displayState',[
-      state('show', style({
-        opacity : 1
-      })),
-      state('hide', style({
-        opacity : 0
-      })),
+  animations: [
+    trigger('displayState', [
+      state(
+        'show',
+        style({
+          opacity: 1,
+        })
+      ),
+      state(
+        'hide',
+        style({
+          opacity: 0,
+        })
+      ),
       transition('show=>hide', animate('450ms ease-out')),
-      transition('hide=>show', animate('450ms ease-in'))
-    ])
-  ]
+      transition('hide=>show', animate('450ms ease-in')),
+    ]),
+  ],
 })
 export class TimezoneListComponent implements OnInit, OnChanges {
-
   @Input() timezones: Timezone[] = [];
   @Input() closest?: Timezone;
   @Input() showAll: boolean = true;
 
   showAllItems = true;
 
-  state: string = 'show'
-  constructor(){}
-
+  state: string = 'show';
+  constructor() {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if(!!changes['showAll']){
-      if(changes['showAll'].previousValue != changes['showAll'].currentValue){
-        this.state = 'hide'
-      }else{
-        this.state = 'show'
+    if (!!changes['showAll']) {
+      if (changes['showAll'].previousValue != changes['showAll'].currentValue) {
+        this.state = 'hide';
+      } else {
+        this.state = 'show';
       }
     }
   }
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  animationEvent($event: any){
+  animationEvent($event: any) {
     // console.log(`${this.state} has entered ${$event.phaseName}`);
-    if(this.state == 'hide' && $event.phaseName == 'done'){
+    if (this.state == 'hide' && $event.phaseName == 'done') {
       this.showAllItems = this.showAll;
-      this.state = 'show'
-    }else if(this.state == 'show' && $event.phaseName == 'done'){
-    
+      this.state = 'show';
+    } else if (this.state == 'show' && $event.phaseName == 'done') {
     }
   }
-
 }
-

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

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TimezoneService } from './timezone.service';
-
-describe('TimezoneService', () => {
-  let service: TimezoneService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TimezoneService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/index.html

@@ -1,25 +1,25 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>itsfiveoclockwhere</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-48B6CKS0V6"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
 
-<head>
-  <meta charset="utf-8">
-  <title>itsfiveoclockwhere</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-48B6CKS0V6"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
-
-    gtag('config', 'G-48B6CKS0V6');
-  </script>
-</head>
-
-<body>
-  <app-root></app-root>
-</body>
+      gtag('config', 'G-48B6CKS0V6');
+    </script>
+  </head>
 
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

src/polyfills.ts

@@ -45,8 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/styles.scss

@@ -1,10 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
 body {
-    height: 100%;
-    margin:0;
-    padding:0;
-    background: #2e2e2e;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #2e2e2e;
 }
 html {
-    height: 100%;
-}
+  height: 100%;
+}

src/test.ts

@@ -1,14 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);