kxip-app/src/app/booking/booking.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import * as faker from 'faker';
import * as moment from 'moment';
import { Router } from '@angular/router';

@Component({
    selector: 'app-booking',
    templateUrl: './booking.page.html',
    styleUrls: ['./booking.page.scss'],
})
export class BookingPage implements OnInit {
    @ViewChild('slides') slides: IonSlides;

    selectedDate: Date;

    teams = [{
        name: 'RCB',
        image: 'https://i.pinimg.com/originals/4f/f9/99/4ff99925fd51296daf76425b11c04195.jpg'
    }, {
        name: 'MI',
        image: 'assets/logos/mi.svg',
    }, {
        name: 'CSK',
        image: 'https://www.searchpng.com/wp-content/uploads/2019/02/Chennai-Super-Kings-Logo-PNG-Image-.png'
    }];

    stadiums = [{
        name: 'Chinnaswamy',
        sideView: 'https://www.royalchallengers.com/PRRCB01/public/styles/1061x767_landscape/public/2020-04/275679.jpg?h=61617f72&itok=6xKgHpE-',
        topView: 'assets/home-team/stadium-tv.png',
    }, {
        name: 'IS Bindra',
        sideView: 'https://5.imimg.com/data5/VO/UB/MY-3103550/ae-cricket-stadium-lighting-500x500.jpg',
        topView: 'assets/home-team/stadium-tv.png'
    }, {
        name: 'Chidambaram Stadium',
        sideView: 'https://sportzwiki.com/wp-content/uploads/2019/03/11.jpg',
        topView: 'assets/home-team/stadium-tv.png',
    }];

    slideOpts = {
        slidesPerView: 1.5,
        spaceBetween: 15,
        initialSlide: 0,
        centeredSlides: true,
        simulateTouch: false,
        followFinger: false,
    };

    bookingSeatsData: Array<{
        dateTime: Date,
        staduim: {
            name: string,
            topView: string,
            sideView: string,
        },
        matchType: 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(
        private router: Router
    ) { }

    getFormattedDateTime(dateTime: Date) {
        return moment(dateTime).format('DD MMM');
    }

    ngOnInit() {
        for (let i = 0; i < 3; i += 1) {
            this.bookingSeatsData.push({
                dateTime: faker.date.future(),
                staduim : this.stadiums[i],
                matchType: 'T20 League',
                matchDetails: {
                    home: i !==1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' },
                    away: i ===1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' }
                },
                seatsAvailable: [{
                    stand: 'Grand',
                    seats: [],
                }, {
                    stand: 'Pavilion',
                    seats: [],
                }, {
                    stand: 'First',
                    seats: [],
                }, {
                    stand: 'Second',
                    seats: [],
                }]
            });
        }

        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();

                let randomNumber = Math.random() * (15 - 0);

                for (let k = 0; k < randomNumber; k += 1) {
                    this.bookingSeatsData[i].seatsAvailable[j].seats.push({
                        id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(),
                        price
                    });
                }                    
            }
        }

        this.selectedDate = this.bookingSeatsData[0].dateTime;

    }


    getEventDateTime(dateTime: Date) {
        return moment(dateTime).format('ddd, MMM DD YYYY hh:mm a');
    }


    selectMatchDate() {
        this.slides.getActiveIndex().then((index) => this.selectedDate = this.bookingSeatsData[index].dateTime);
    }

    selectMatchCard(index: number) {
        this.slides.slideTo(index);
    }

    showBookingDetails(matchData) {
        this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]);
    }

}