Make list able to just show closest with animation

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 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';
@@ -7,7 +8,6 @@ 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,
@@ -17,6 +17,7 @@ import { TimezoneSingleComponent } from './timezone/components/timezone-single/t
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
   ],
   providers: [TimezoneService],

src/app/fiveoclock/fiveoclock.component.html

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

src/app/fiveoclock/fiveoclock.component.ts

@@ -13,7 +13,7 @@ export class FiveoclockComponent implements OnInit {
   fiveOclocks: Timezone[] = [];
   fiveOclock: Timezone | undefined;
 
-  justClosest: boolean = true;
+  showAll: boolean = false;
 
   timezones: string[] =[]
 
@@ -36,7 +36,7 @@ export class FiveoclockComponent implements OnInit {
   ngOnInit(): void { }
 
   toggleView(){
-    this.justClosest = !this.justClosest
+    this.showAll = !this.showAll
   }
 
 }

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

@@ -1,8 +1,14 @@
-<div class="background">
-    <ng-container *ngFor="let timezone of timezones">
-        <div class="container">
+<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}}</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}}</h1>
+            <h2 class="time">{{closest.time?.toFormat('tt')}}</h2>
+        </div>
+    </ng-template>
 </div>

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

@@ -1,21 +1,58 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { interval, Observable } from 'rxjs';
+import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Timezone } from '../../models/timezone.model';
-import { TimezoneService } from '../../services/timezone.service';
 
 @Component({
   selector: 'app-timezone-list',
   templateUrl: './timezone-list.component.html',
-  styleUrls: ['./timezone-list.component.scss']
+  styleUrls: ['./timezone-list.component.scss'],
+  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'))
+    ])
+  ]
 })
-export class TimezoneListComponent implements OnInit {
+export class TimezoneListComponent implements OnInit, OnChanges {
 
   @Input() timezones: Timezone[] = [];
+  @Input() closest?: Timezone;
+  @Input() showAll: boolean = true;
 
+  showAllItems = true;
+
+  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'
+      }
+    }
+  }
+
   ngOnInit(): void {
   }
 
+  animationEvent($event: any){
+    // console.log(`${this.state} has entered ${$event.phaseName}`);
+    if(this.state == 'hide' && $event.phaseName == 'done'){
+      this.showAllItems = this.showAll;
+      this.state = 'show'
+    }else if(this.state == 'show' && $event.phaseName == 'done'){
+    
+    }
+  }
+
 }
 

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

@@ -1,4 +1,4 @@
-<div class="background">
+<div class="background" [@displayState]="state">
     <ng-container *ngIf="timezone">
         <div class="container">
             <h1 class="timezone">{{timezone.name}}</h1>

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

@@ -1,16 +1,30 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
 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']
+  styleUrls: ['./timezone-single.component.scss'],
+  animations:[
+    trigger('displayState',[
+      state('show', style({
+        opacity : 1
+      })),
+      state('hide', style({
+        opacity : 0
+      })),
+      transition('show=>hide', animate('500ms ease-out')),
+      transition('hide=>show', animate('500ms ease-in'))
+    ])
+  ]
 })
 export class TimezoneSingleComponent implements OnInit {
 
   @Input() timezone: Timezone | undefined;
+  @Input() state: string = 'hide';
 
-  constructor(){ }
+  constructor(){}
 
   ngOnInit(): void {
   }

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

@@ -26,7 +26,7 @@ export function TimezoneCompare(a: Timezone, b: Timezone) {
 }
 
 // http://www.movable-type.co.uk/scripts/latlong.html
-export function GetClosestTimezoneFrom(timezone: string, timezones: Timezone[]) {
+export function GetClosestTimezoneFrom(timezone: string, timezones: Timezone[]): Timezone | undefined{
     var location1 = timezoneMap[timezone]
     var closestDist = Number.MAX_SAFE_INTEGER
     var closestTimezone: Timezone | undefined = undefined