Implementing Faker JS to create booking Data

package-lock.json

@@ -5122,6 +5122,11 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "faker": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/faker/-/faker-5.1.0.tgz",
+      "integrity": "sha512-RrWKFSSA/aNLP0g3o2WW1Zez7/MnMr7xkiZmoCfAGZmdkDQZ6l2KtuXHN5XjdvpRjDl8+3vf+Rrtl06Z352+Mw=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",

package.json

@@ -23,6 +23,7 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^5.0.0",
+    "faker": "^5.1.0",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"

src/app/app-routing.module.ts

@@ -25,6 +25,10 @@ const routes: Routes = [
   {
     path: 'player-stats',
     loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
+  },
+  {
+    path: 'booking',
+    loadChildren: () => import('./booking/booking.module').then( m => m.BookingPageModule)
   }
 ];
 @NgModule({

src/app/booking/booking-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BookingPage } from './booking.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BookingPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BookingPageRoutingModule {}

src/app/booking/booking.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookingPageRoutingModule } from './booking-routing.module';
+
+import { BookingPage } from './booking.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BookingPageRoutingModule
+  ],
+  declarations: [BookingPage]
+})
+export class BookingPageModule {}

src/app/booking/booking.page.html

@@ -0,0 +1,14 @@
+<ion-content>
+    <div class="content-container">
+        <div class="heading-holder">
+            <h2 class="main-header"> Booking </h2>
+        
+            <section class="segments">
+                <button [ngClass]="{'active' : selectedTab === 'news'}"
+                (click)="selectedTab = 'news'"> News </button>
+                <button [ngClass]="{'active' : selectedTab === 'videos'}"
+                (click)="selectedTab = 'videos'"> Videos </button>
+            </section>
+        </div>
+    </div>
+</ion-content>

src/app/booking/booking.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BookingPage } from './booking.page';
+
+describe('BookingPage', () => {
+  let component: BookingPage;
+  let fixture: ComponentFixture<BookingPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BookingPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/booking/booking.page.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import * as faker from 'faker';
+
+@Component({
+    selector: 'app-booking',
+    templateUrl: './booking.page.html',
+    styleUrls: ['./booking.page.scss'],
+})
+export class BookingPage implements OnInit {
+
+    bookingSeatsData: Array<{
+        dateTime: Date | string,
+        matchDetails: {
+            home: {
+                name: string,
+                image: string,
+            },
+            away: {
+                name: string,
+                image: string,
+            }
+        },
+        seatsAvailable: Array<{
+            stand: 'Grand' | 'Pavilion' | 'First' | 'Second',
+            seats: Array<{
+                id: number | string,
+                price: number
+            }>
+        }>
+    }> = [];
+
+    constructor() { }
+
+    ngOnInit() {
+        for (let i = 0; i < 3; i += 1) {
+            this.bookingSeatsData.push({
+                dateTime: faker.date.future(),
+                matchDetails: {
+                    home: {
+                        name: 'KXIP',
+                        image: 'assets/home-team/KXIP.svg'
+                    },
+                    away: {
+                        name: 'MI',
+                        image: 'assets/home-team/KXIP.svg'
+                    }
+                },
+                seatsAvailable: [{
+                    stand: 'Grand',
+                    seats: [],
+                }, {
+                    stand: 'Pavilion',
+                    seats: [],
+                }, {
+                    stand: 'First',
+                    seats: [],
+                }, {
+                    stand: 'Second',
+                    seats: [],
+                }]
+            });
+        }
+
+
+        setTimeout(() => {
+            for (let i = 0; i < this.bookingSeatsData.length; i += 1) {
+                for (let j = 0; j < this.bookingSeatsData[i].seatsAvailable.length; j += 1) {
+
+                    let price = faker.commerce.price();
+
+                    for (let k = 0; k < 5; k += 1) {
+                        this.bookingSeatsData[i].seatsAvailable[j].seats.push({
+                            id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(),
+                            price
+                        });
+                    }                    
+                }
+            }
+        }, 100);
+
+        console.log(this.bookingSeatsData);
+
+    }
+
+}

src/app/tabs/tabs-routing.module.ts

@@ -22,6 +22,10 @@ const routes: Routes = [
             {
                 path: 'player-stats',
                 loadChildren: () => import('../player-stats/player-stats.module').then( m => m.PlayerStatsPageModule)
+            },
+            {
+                path: 'booking',
+                loadChildren: () => import('../booking/booking.module').then( m => m.BookingPageModule)
             }
         ]
     },

src/app/tabs/tabs.page.html

@@ -16,9 +16,9 @@
             <ion-icon name="person"></ion-icon>
         </ion-tab-button>
 
-        <ion-tab-button tab="more">
-            <ion-icon name="ellipsis-vertical-outline"></ion-icon>
-            <ion-icon name="ellipsis-vertical"></ion-icon>
+        <ion-tab-button tab="booking">
+            <ion-icon name="ticket-outline"></ion-icon>
+            <ion-icon name="ticket"></ion-icon>
         </ion-tab-button>
     </ion-tab-bar>
 </ion-tabs>

src/app/tabs/tabs.page.scss

@@ -3,7 +3,6 @@ ion-tab-bar {
     --border: none;
     margin-top: -1px;
     box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.5);
-    transition: var(--background) 0.3s;
     --color: var(--light-grey);
     --color-selected: var(--brand-black);
 
@@ -11,12 +10,14 @@ ion-tab-bar {
         --background: #24367c;
         --color: white;
         --color-selected: #01b868;
+        box-shadow: none;
     }
 
     &.dark {
         --background: #161e2d;
         --color: white;
         --color-selected: #01b868;
+        box-shadow: none;
     }
 
     ion-tab-button {

src/global.scss

@@ -45,7 +45,7 @@ figure {
     @keyframes fadeIn {
         0% {
             opacity: 0;
-            transform: translateY(10vh);
+            transform: translateY(3vh);
         }
         100% {
             opacity: 1;