kxip-app/src/app/match-details/match-details.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import * as faker from 'faker';
import { IonContent } from '@ionic/angular';


type IPlayer = {
    name: string,
    image: string,
    jersey: number,
    isCaptain?: boolean,
    isKeeper?: boolean,
    isTopScorer?: boolean,
    role: string,
};

type ITeam = {
    name: string,
    image: string,
    players: Array<IPlayer>
};


@Component({
    selector: 'app-match-details',
    templateUrl: './match-details.page.html',
    styleUrls: ['./match-details.page.scss'],
})
export class MatchDetailsPage implements OnInit {
    @ViewChild(IonContent, { static: false }) content: IonContent;
    isPlayerSelected: boolean = false;
    isHomeTeamSelected: boolean = true;

    selectedSegment: 'MATCH' | 'SCORE' = 'MATCH';
    selectedRoster: 'LIVE' | 'HOME' | 'AWAY' = 'LIVE';

    roles = ['BOWLER', 'BATSMAN'];

    matchData: {
        home: ITeam,
        away: ITeam,
    };
    
    matchStats: {
        stadium: string,
        homeTeam: any,
        awayTeam: any
    };

    constructor(
        private location: Location,
        private route: ActivatedRoute,
    ) { }


    scrollToPlayerDetails() {
        let details: any = document.querySelector('.player-details');
        this.content.scrollToPoint(0, (details.offsetTop - 200), 1000);
    }

    ngOnInit() {
        this.matchStats = JSON.parse(this.route.snapshot.paramMap.get('matchStats'));

        this.matchData = {
            home : {
                name: 'KXIP',
                image: 'assets/home-team/KXIP.svg',
                players: []
            },
            away: {
                name: 'MI',
                image: 'assets/logos/mi.svg',
                players: []
            }
        };
        

        for (let i = 1; i < 12; i += 1) {
            this.matchData.home.players.push({
                name: faker.name.findName(),
                image: 'assets/home-team/roster/' + i.toString() + '.png',
                jersey: Math.ceil(Math.random() * (99 - 1)),
                isCaptain: i == 3? true : false,
                isKeeper: i === 5? true : false,
                role: this.roles[Math.floor(Math.random() * (2 - 0))],
                isTopScorer: i === 3? true : false
            });


            this.matchData.away.players.push({
                name: faker.name.findName(),
                image: 'assets/mi-roster/' + i.toString() + '.png',
                jersey: Math.ceil(Math.random() * (99 - 1)),
                isCaptain: i == 5? true : false,
                isKeeper: i === 4? true : false,
                role: this.roles[Math.floor(Math.random() * (2 - 0))]
            });
        }
    }

    back() {
        this.location.back();
    }

    selectPlayerDetails() {
        this.isPlayerSelected = true;

        setTimeout(() => {
            this.scrollToPlayerDetails();
        }, 100);
    }

    limitDecimals(value: number) {
        return value.toPrecision(2);
    }

}