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 }; @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); } }