add linting remove unimplemented tests

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    node: true,
+    commonjs: true,
+    es2021: true,
+  },
+  extends: ['airbnb', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'prefer-destructuring': 'off',
+    'no-bitwise': 'off',
+    'class-methods-use-this': 'off',
+    'import/extensions': 'off',
+    'import/no-relative-packages': 'off',
+  },
+};

.prettierignore

@@ -0,0 +1,2 @@
+*.md
+*.min.*

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  bracketSameLine: true,
+  printWidth: 120,
+};

karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/itsfiveoclockwhere'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package.json

@@ -5,8 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
+    "watch": "ng build --watch --configuration development"
-    "test": "ng test"
   },
   "private": true,
   "dependencies": {
@@ -25,15 +24,12 @@
     "@angular-devkit/build-angular": "^16.2.1",
     "@angular/cli": "^16.2.1",
     "@angular/compiler-cli": "^16.2.4",
-    "@types/jasmine": "^4.3.5",
     "@types/luxon": "^3.3.2",
     "@types/node": "^20.5.9",
-    "jasmine-core": "^5.1.1",
+    "typescript": "^5.1.6",
-    "karma": "^6.4.2",
+    "eslint": "^8.48.0",
-    "karma-chrome-launcher": "^3.2.0",
+    "eslint-config-airbnb": "^19.0.4",
-    "karma-coverage": "^2.2.1",
+    "eslint-config-prettier": "^9.0.0",
-    "karma-jasmine": "^5.1.0",
+    "prettier": "^3.0.3"
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "^5.1.6"
   }
 }

src/app/app.component.html

@@ -1,7 +1,7 @@
-<app-timezone-list 
+<app-timezone-list
-    *ngIf="fiveOclocks" 
+  *ngIf="fiveOclocks"
-    [timezones]="fiveOclocks" 
+  [timezones]="fiveOclocks"
-    [closest]="fiveOclock" 
+  [closest]="fiveOclock"
-    [showAll]="showAll" 
+  [showAll]="showAll"
-    (click)="toggleView()">
+  (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,
+    private googleAnalyticsService: GoogleAnalyticsService
-    ){
+  ) {
-      const currentTimezone = this.timezoneService.getCurrentTimezone()
+    const currentTimezone = this.timezoneService.getCurrentTimezone();
-      if(currentTimezone){
+    if (currentTimezone) {
-        this.timezones = this.timezoneService.getTimezones()
+      this.timezones = this.timezoneService.getTimezones();
-        
+
-        var second = interval(1000).pipe(startWith(0))
+      var second = interval(1000).pipe(startWith(0));
-    
+
-        second.subscribe(()=>{
+      second.subscribe(() => {
-          this.fiveOclocks = [];
+        this.fiveOclocks = [];
-          this.timezoneService.getCurrentTimeInTimezones(this.timezones).forEach((timezoneObj)=>{
+        this.timezoneService.getCurrentTimeInTimezones(this.timezones).forEach((timezoneObj) => {
-            if(timezoneObj.time?.hour === 17){
+          if (timezoneObj.time?.hour === 17) {
-              this.fiveOclocks.push(timezoneObj);
+            this.fiveOclocks.push(timezoneObj);
-            }
+          }
-          })
+        });
-          this.fiveOclock = GetClosestTimezoneFrom(currentTimezone, this.fiveOclocks)
+        this.fiveOclock = GetClosestTimezoneFrom(currentTimezone, this.fiveOclocks);
-        })
+      });
-      }
+    }
   }
 
-  ngOnInit(): void { 
+  ngOnInit(): void {
-    gtag('config', 'G-48B6CKS0V6',{
+    gtag('config', 'G-48B6CKS0V6', {
-      'page_path': '/'
+      page_path: '/',
     });
   }
 
-  toggleView(){
+  toggleView() {
-    if(this.showAll){
+    if (this.showAll) {
       this.googleAnalyticsService.emitEvent('select_content', {
-        'event_label' : 'timezone_closest',
+        event_label: 'timezone_closest',
-      })
+      });
-    }else{
+    } 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: [
+  declarations: [AppComponent, TimezoneListComponent],
-    AppComponent,
+  imports: [BrowserModule, BrowserAnimationsModule],
-    TimezoneListComponent,
+  providers: [TimezoneService, GoogleAnalyticsService],
-  ],
+  bootstrap: [AppComponent],
-  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)">
+<div
-    <ng-container *ngIf="showAllItems; else single" >
+  class="background"
-        <div *ngFor="let timezone of timezones" class="container" [ngStyle]="{'height': timezones.length == 1 ? '100%' : 'auto'}">
+  [@displayState]="state"
-            <h1 class="timezone">{{timezone.name.replace('_', ' ')}}</h1>
+  (@displayState.start)="animationEvent($event)"
-            <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
+  (@displayState.done)="animationEvent($event)">
-        </div>
+  <ng-container *ngIf="showAllItems; else single">
-    </ng-container>
+    <div
-    <ng-template #single >
+      *ngFor="let timezone of timezones"
-        <div *ngIf="closest" class="single-container">
+      class="container"
-            <h1 class="timezone">{{closest.name.replace('_', ' ')}}</h1>
+      [ngStyle]="{ height: timezones.length == 1 ? '100%' : 'auto' }">
-            <h2 class="time">{{closest.time?.toFormat('tt')}}</h2>
+      <h1 class="timezone">{{ timezone.name.replace('_', ' ') }}</h1>
-        </div>
+      <h2 class="time">{{ timezone.time?.toFormat('tt') }}</h2>
-    </ng-template>
+    </div>
-</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;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: center;
+  justify-content: center;
-    width: 100%;
+  width: 100%;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
 .single-container {
-    display:flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    flex-direction: column;
+  flex-direction: column;
-    justify-content: center;
+  justify-content: center;
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
-@media (max-width: 350px) { 
+@media (max-width: 350px) {
-    .timezone {
+  .timezone {
-        font-size: 1.0em;
+    font-size: 1em;
-    }
+  }
-    
+
-    .time {
+  .time {
-        font-size: 0.5em
+    font-size: 0.5em;
-    }
+  }
 }
 
-@media (min-width:350px) and (max-width: 500px) { 
+@media (min-width: 350px) and (max-width: 500px) {
-    .timezone {
+  .timezone {
-        font-size: 1.5em;
+    font-size: 1.5em;
-    }
+  }
-    
+
-    .time {
+  .time {
-        font-size: 1.0em
+    font-size: 1em;
-    }
+  }
 }
 
 .timezone {
-    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: whitesmoke;
+  color: whitesmoke;
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .time {
-    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: whitesmoke;
+  color: whitesmoke;
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .background {
-    background: #2e2e2e;
+  background: #2e2e2e;
-    height: 100%;
+  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:[
+  animations: [
-    trigger('displayState',[
+    trigger('displayState', [
-      state('show', style({
+      state(
-        opacity : 1
+        'show',
-      })),
+        style({
-      state('hide', style({
+          opacity: 1,
-        opacity : 0
+        })
-      })),
+      ),
+      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'
+  state: string = 'show';
-  constructor(){}
+  constructor() {}
-
 
   ngOnChanges(changes: SimpleChanges): void {
-    if(!!changes['showAll']){
+    if (!!changes['showAll']) {
-      if(changes['showAll'].previousValue != changes['showAll'].currentValue){
+      if (changes['showAll'].previousValue != changes['showAll'].currentValue) {
-        this.state = 'hide'
+        this.state = 'hide';
-      }else{
+      } else {
-        this.state = 'show'
+        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'
+      this.state = 'show';
-    }else if(this.state == 'show' && $event.phaseName == 'done'){
+    } 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>
+      gtag('config', 'G-48B6CKS0V6');
-  <meta charset="utf-8">
+    </script>
-  <title>itsfiveoclockwhere</title>
+  </head>
-  <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>
 
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
-  .catch(err => console.error(err));
+  .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%;
+  height: 100%;
-    margin:0;
+  margin: 0;
-    padding:0;
+  padding: 0;
-    background: #2e2e2e;
+  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(),
-);

tsconfig.app.json

@@ -5,11 +5,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
+  "files": ["src/main.ts", "src/polyfills.ts"],
-    "src/main.ts",
+  "include": ["src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
 }

tsconfig.json

@@ -18,10 +18,7 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
-    "lib": [
+    "lib": ["es2020", "dom"],
-      "es2020",
-      "dom"
-    ],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {

tsconfig.spec.json

@@ -3,16 +3,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
+    "types": ["jasmine"]
-      "jasmine"
-    ]
   },
-  "files": [
+  "files": ["src/test.ts", "src/polyfills.ts"],
-    "src/test.ts",
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
 }