kj
/
kxip-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Live page player details, team lineup API integration

master
kj1352 4 years ago
parent
f54e034051
commit
9e6268693f
8 changed files with 326 additions and 366 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +99
    -66
      src/app/components/player-details/player-details.component.html
  2. +33
    -179
      src/app/components/player-details/player-details.component.scss
  3. +122
    -3
      src/app/components/player-details/player-details.component.ts
  4. +1
    -1
      src/app/live/live.page.ts
  5. +28
    -34
      src/app/match-details/match-details.page.html
  6. +21
    -3
      src/app/match-details/match-details.page.scss
  7. +18
    -80
      src/app/match-details/match-details.page.ts
  8. +4
    -0
      src/app/services/match.service.ts

+ 99
- 66
src/app/components/player-details/player-details.component.html View File

@@ -1,87 +1,120 @@
<div class="container">
<div class="container" *ngIf="playerDetails">
<section class="player-primary-data">
<section class="details">
<div class="teams-holder">
<figure>
<img src="assets/home-team/KXIP.svg" alt="">
</figure>
<figure>
<img src="assets/home-team/india.png" alt="">
</figure>
</div>
<h2 class="name"> KL Rahul </h2>
<section class="details">
<h2 class="name"> {{ playerDetails.name }} </h2>
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman, <br> Wicket Keeper </div>
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> {{ playerDetails.player_skill.text }} </div>
</section>
<figure class="player-image">
<img src="assets/home-team/player.png" alt="">
</figure>
</section>

<ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
<ng-container *ngIf="i === 2">
<header class="stats-header">
<h4> {{ stat.comp_type }} </h4>
</header>
<ul class="statistics">
<li>
<label> Age </label>
<h5> 26 </h5>
</li>
<li>
<label> Games </label>
<h5> 64 </h5>
</li>
<li>
<label> Centuries </label>
<h5> 18 </h5>
</li>
</ul>
<section class="news">
<header>
<span></span> <h4> Now discussing </h4>
</header>
<ul>
<li>
<label> 30 <span> Jan </span> </label>
<p>
KL Rahul wins the player of the season 2018 confirms BCCI
</p>
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>
<li>
<label> 22 <span> Oct </span> </label>
<p>
KL Rahul planning to head back to RCB
</p>
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button>
</li>
</ul>
</section>
<ul class="statistics" *ngIf="stat.overall.batting_record">
<li>
<label> 100s </label>
<h5> {{ stat.overall.batting_record.hundreds }} </h5>
</li>
<li>
<label> 50s </label>
<h5> {{ stat.overall.batting_record.fifties }} </h5>
</li>
<li>
<label> SR </label>
<h5> {{ stat.overall.batting_record.strike_rate }} </h5>
</li>
</ul>
<ul class="statistics" *ngIf="stat.overall.bowling_record">
<li>
<label> Wickets </label>
<h5> {{ stat.overall.bowling_record.wickets }} </h5>
</li>
<li>
<label> Maidens </label>
<h5> {{ stat.overall.bowling_record.wickets }} </h5>
</li>
<li>
<label> Economy </label>
<h5> {{ stat.overall.bowling_record.economy_rate }} </h5>
</li>
</ul>
</ng-container>
</ng-container>

<section class="about">
<header> ABOUT </header>
<ul>
<li>
<label> Full name </label>
<p> KL Rahul </p>
<p> {{ playerDetails.fullname }} </p>
</li>
<li>
<label> Age </label>
<p> 26 </p>
<label> Nick Name </label>
<p> {{ playerDetails.nick_name }} </p>
</li>
<li>
<label> Native </label>
<p> Mangaluru </p>
<label> DOB </label>
<p> {{ playerDetails.dob }} </p>
</li>
<li>
<label> Avg. Run rate </label>
<p> 43.64 </p>
<label> POB </label>
<p> {{ playerDetails.place_birth }} </p>
</li>
<li *ngIf="playerDetails.writeup">
<label> Description </label>
<p [innerHTML]="playerDetails.writeup"></p>
</li>
</ul>
</section>
<ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;">
<ng-container *ngIf="i !== 2">
<header class="stats-header">
<h4> {{ stat.comp_type }} </h4>
</header>
<ul class="statistics" *ngIf="stat.overall.batting_record">
<li>
<label> 100s </label>
<h5> {{ stat.overall.batting_record.hundreds }} </h5>
</li>
<li>
<label> 50s </label>
<h5> {{ stat.overall.batting_record.fifties }} </h5>
</li>
<li>
<label> SR </label>
<h5> {{ stat.overall.batting_record.strike_rate }} </h5>
</li>
</ul>
<ul class="statistics" *ngIf="stat.overall.bowling_record">
<li>
<label> Wickets </label>
<h5> {{ stat.overall.bowling_record.wickets }} </h5>
</li>
<li>
<label> Maidens </label>
<h5> {{ stat.overall.bowling_record.wickets }} </h5>
</li>
<li>
<label> Economy </label>
<h5> {{ stat.overall.bowling_record.economy_rate }} </h5>
</li>
</ul>

</ng-container>
</ng-container>
</div>

+ 33
- 179
src/app/components/player-details/player-details.component.scss View File

@@ -3,6 +3,7 @@
.container {
background: linear-gradient(45deg, darken($brand-blue, 15%), darken($brand-blue, 20%) 80%);
padding: 40px 0;
width: 100vw;
}

.player-primary-data {
@@ -10,57 +11,12 @@
width: 95%;
padding-left: 5%;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url('../../../assets/home-team/KXIP-lion-white.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.1;
}
.details {
width: 50%;
width: 100%;
position: relative;
}
.teams-holder {
position: relative;
z-index: 0;
display: flex;
justify-content: flex-start;

figure {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
z-index: 1;
margin: 0;
display: block;
overflow: hidden;
box-shadow: 0px 0px 5px darken($brand-blue, 20%);

&:nth-child(2) {
z-index: 0;
transform: translateX(-10px);
}
img {
width: 100%;
height: 100%;
display: block;
transform: scale(1.5);
}
}
}

.name {
font-size: 2rem;
font-weight: 700;
@@ -86,19 +42,21 @@
color: lighten($brand-red, 15%);
}
}
}

.player-image {
width: 50%;
display: block;
height: 40vh;

img {
display: block;
object-fit: contain;
width: 100%;
height: 100%;
object-position: bottom;
}
.stats-header {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0 5%;
h4 {
color: $green;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.5px;
margin: 0;
}
}

@@ -107,9 +65,8 @@
width: 100%;
padding: 0 5%;
list-style: none;
margin: 0 auto -30px auto;
margin: 20px auto;
justify-content: space-between;
transform: translateY(-50px);
z-index: 1;
position: relative;
background-color: rgba(darken($brand-blue, 20%), 0.8);
@@ -120,11 +77,8 @@
height: 27vw;
background-color: rgba($brand-blue, 0.8);
border: 1px solid rgba($blue-grey, 0.3);
display: flex;
border-radius: 10px;
color: white;
align-items: flex-end;
justify-content: space-between;
padding: 10px;
overflow: hidden;
position: relative;
@@ -143,115 +97,18 @@
label {
font-weight: 500;
font-size: 0.8rem;
align-self: flex-start;
width: 50%;
overflow: visible;
white-space: nowrap;
position: relative;
position: absolute;
top: 10px;
left: 10px;
}

h5 {
width: 50%;
white-space: nowrap;
overflow: visible;
margin: 0;
font-weight: 700;
font-size: 1.8rem;
align-self: flex-end;
text-align: right;
position: relative;
}
}

.news {
width: 90%;
margin: 0 auto 20px auto;

header {
display: flex;
align-items: center;
justify-content: flex-start;

h4 {
color: lighten($green, 10%);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.5px;
margin: 0;
}

span {
margin-right: 10px;
border: 7px solid lighten($green, 10%);
border-radius: 50%;
height: 25px;
width: 25px;
background-color: darken($brand-blue, 20%);
}
}

ul {
list-style: none;
padding: 0;
background-color: darken($brand-blue, 10%);
box-shadow: 0px 0px 10px darken($brand-blue, 20%);
border-radius: 10px;
overflow: hidden;

li {
width: 90%;
margin: 0 auto;
padding: 15px 0px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba($blue-grey, 0.2);

&:last-child {
border-bottom: none;
}
}

label {
width: 40px;
text-align: center;
color: white;
font-size: 0.8rem;
display: block;
line-height: 1.3;

span {
color: lighten($brand-blue, 10%);
font-size: 0.8rem;
display: block;
}
}

p {
width: calc(100% - 100px);
font-size: 0.8rem;
color: white;
font-weight: 500;
line-height: 1.5;
margin: 0;
}

.share-button {
width: 30px;
height: 30px;
border: 1px solid lighten($brand-blue, 10%);
background-color: rgba(lighten($brand-blue, 10%), 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;

ion-icon {
color: lighten($brand-blue, 10%);
font-size: 15px;
}
}
font-size: 1.5rem;
position: absolute;
right: 10px;
bottom: 10px;
}
}

@@ -261,7 +118,7 @@
border-radius: 10px;
overflow: hidden;
width: 90%;
margin: 0 auto;
margin: 0 auto 40px auto;
padding: 0px 0px 5px 0px;

header {
@@ -269,7 +126,7 @@
font-weight: 500;
color: white;
padding: 15px 5%;
border-bottom: 1px solid rgba($blue-grey, 0.2);
border-bottom: 1px solid lighten($brand-blue, 5%);
margin: 0;
}

@@ -281,12 +138,9 @@
}

li {
padding: 10px 5px;
display: flex;
padding: 20px 10px;
width: 100%;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba($blue-grey, 0.2);
border-bottom: 1px solid lighten($brand-blue, 5%);
text-align: left;

&:last-child {
@@ -295,15 +149,15 @@
}

label {
color: lighten($brand-blue, 10%);
font-size: 0.7rem;
color: lighten($brand-blue, 20%);
font-size: 1rem;
display: block;
line-height: 1.3;
width: 100px;
display: block;
margin-bottom: 10px;
}

p {
width: calc(100% - 100px);
font-size: 0.9rem;
color: white;
font-weight: 500;


+ 122
- 3
src/app/components/player-details/player-details.component.ts View File

@@ -1,4 +1,110 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { MatchService } from '../../services/match.service';
import { ToastService } from '../../services/toast.service';


interface HighestScoreDetails {
score: {
is_no: string;
balls_faced: string;
text: string;
};
match_id: string;
match_date: string;
vs: IdentifiableData;
}

interface BattingRecord {
matches: string;
innings: string;
not_outs: string;
runs: string;
balls_faced: string;
hundreds: string;
fifties: string;
fours: string;
sixes: string;
average: string;
strike_rate: string;
hs: HighestScoreDetails;
}

interface BestBowlingDetails {
figure: {
wickets: string;
runs_given: string;
text: string;
};
match_id: string;
match_date: string;
vs: HighestScoreDetails;
}

interface BowlingRecord {
matches: string;
innings: string;
overs: string;
balls_bowled: string;
maidens: string;
runs: string;
wickets: string;
average: string;
strike_rate: string;
economy_rate: string;
four_wk_hauls: string;
five_wk_hauls: string;
best_bowling: BestBowlingDetails;
}

interface FieldingRecord {
catches: string;
stumpings: string;
run_outs: string;
}

interface StatsForFormat {
comp_type_id: string;
comp_type: string;
rankings: {
bat: string;
bowl: string;
};
overall: {
batting_record: BattingRecord;
bowling_record: BowlingRecord;
fielding_record: FieldingRecord;
}
}

interface RawPlayerTeamDetails {
id: string;
active: string;
is_primary: string;
is_international: string;
text: string;
}

interface RawPlayerProfile {
player_id: string;
last_updated: string;
fullname: string;
name: string;
dob: string;
date_of_death: string;
place_birth: string;
nick_name: string;
majorteams: {
team: Array<RawPlayerTeamDetails>;
};
stats: {
format: Array<StatsForFormat>;
};
}

export interface RawPlayerData {
profile: RawPlayerProfile;
}


@Component({
selector: 'app-player-details',
@@ -6,9 +112,22 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./player-details.component.scss'],
})
export class PlayerDetailsComponent implements OnInit {
@Input() playerId: string;
playerDetails: RawPlayerData;

constructor() { }
constructor(
private matchService: MatchService,
private toastService: ToastService
) { }

ngOnInit() {}
ngOnInit() {
this.matchService.getPlayerDetails(this.playerId).then((data: RawPlayerData) => {
console.log(data);
this.playerDetails = data;
}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to fetch player details", "danger");
});
}

}

+ 1
- 1
src/app/live/live.page.ts View File

@@ -278,7 +278,7 @@ export class LivePage implements OnInit {
}

showMatchDetails() {
this.router.navigate(['/match-details']);
this.router.navigate(['/match-details', { match_id: this.currentMatch.Matchdetail.Match.Id }]);
}

}

+ 28
- 34
src/app/match-details/match-details.page.html View File

@@ -1,11 +1,11 @@
<ion-content *ngIf="matchStats" [scrollEvents]="true">
<ion-content *ngIf="currentMatch">

<section class="header-with-action-buttons">
<div class="nav">
<button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
</div>
<header> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br>
<span> Live from {{ matchStats.stadium }} Stadium </span> </header>
<header> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }} <br>
<span> {{ currentMatch.Matchdetail.Venue.Name }} </span> </header>
<div class="action">
<button> <ion-icon name="share-social"></ion-icon> </button>
</div>
@@ -20,7 +20,8 @@


<div class="score-container" *ngIf="selectedSegment === 'SCORE'">
<section class="score-card">
<!-- <section class="score-card">
<header>
<img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </h5>
@@ -82,10 +83,10 @@
</table>
</div>
</section>
</section> -->
<section class="score-card">
<!-- <section class="score-card">
<header>
<img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5>
@@ -146,7 +147,7 @@
</table>
</div>
</section>
</section> -->

</div>

@@ -222,23 +223,21 @@
</div>
<div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">
<button (click)="selectedRoster = 'HOME'"> {{ matchData.home.name }} </button>
<button (click)="selectedRoster = 'HOME'"> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} </button>
<button class="live" (click)="selectedRoster = 'LIVE'"> <span></span> </button>
<button (click)="selectedRoster = 'AWAY'"> {{ matchData.away.name }} </button>
<button (click)="selectedRoster = 'AWAY'"> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }} </button>
</div>

<section class="player-list" *ngIf="selectedRoster === 'HOME'">
<ul>
<li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
<label> {{ player.jersey }} </label>
<img [src]="player.image" class="player-image">
<li *ngFor="let player of getArrayOfPlayers(currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players)" (click)="selectPlayerDetails(player)">
<label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Position }} </label>
<div class="details">
<h4> {{ player.name }} </h4>
<img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
<img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
<img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png">
<img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
<img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
<h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Name_Full }} </h4>
<!-- <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '4'" src="assets/icons/captain-band.png"> -->
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '4'" src="assets/icons/gloves.png">
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '1'" src="assets/icons/batsman.png">
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '2'" src="assets/icons/ball.png">
</div>
</li>
</ul>
@@ -246,30 +245,25 @@
<section class="player-list" *ngIf="selectedRoster === 'AWAY'">
<ul>
<li *ngFor="let player of matchData.away.players" (click)="selectPlayerDetails()">
<label> {{ player.jersey }} </label>
<img [src]="player.image" class="player-image">
<div class="details">
<h4> {{ player.name }} </h4>
<img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
<img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
<img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png">
<img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
<img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
</div>
</li>
<li *ngFor="let player of getArrayOfPlayers(currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players)" (click)="selectPlayerDetails(player)">
<label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Position }} </label>
<div class="details">
<h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Name_Full }} </h4>
<!-- <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '4'" src="assets/icons/captain-band.png"> -->
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '4'" src="assets/icons/gloves.png">
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '1'" src="assets/icons/batsman.png">
<img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '2'" src="assets/icons/ball.png">
</div>
</li>
</ul>
</section>
</ng-container>


<section class="player-details" *ngIf="isPlayerSelected">
<button class="close-button" (click)="isPlayerSelected = false">
<ion-icon name="close-outline"></ion-icon>
</button>
<app-player-details></app-player-details>
<app-player-details [playerId]="selectedPlayer"></app-player-details>
</section>

</ion-content>

+ 21
- 3
src/app/match-details/match-details.page.scss View File

@@ -85,14 +85,30 @@
}

.player-details {
position: relative;
position: fixed;
z-index: 2;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 0px 5px darken($brand-blue, 30%);
background-color: darken($brand-blue, 30%);
left: 0;
top: 0;
top: 10%;
height: 90%;
overflow: auto;
transform: translateY(50vh);
opacity: 0;

animation: riseUp 0.3s forwards;

@keyframes riseUp {
from {
transform: translateY(50vh);
opacity: 0;
} to {
transform: translateY(0vh);
opacity: 1;
}
}

.close-button {
display: block;
@@ -418,6 +434,7 @@
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 80px;
}

li {
@@ -438,6 +455,7 @@
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
}

.player-image {
@@ -461,7 +479,7 @@
margin: 0;
font-size: 1rem;
color: white;
max-width: calc(100% - 80px);
max-width: calc(100% - 40px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;


+ 18
- 80
src/app/match-details/match-details.page.ts View File

@@ -1,26 +1,9 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit } 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>
};

import { MatchService } from '../services/match.service';
import { ToastService } from '../services/toast.service';
import { RawMatchData } from '../live/live.page';

@Component({
selector: 'app-match-details',
@@ -28,91 +11,46 @@ type ITeam = {
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'];
currentMatch: RawMatchData;

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

constructor(
private location: Location,
private route: ActivatedRoute,
private matchService: MatchService,
private toastService: ToastService
) { }


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: []
}
};
let match_id = JSON.parse(this.route.snapshot.paramMap.get('match_id'));

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))]
});
}
this.matchService.getMatchDetails(match_id).then((match_data: RawMatchData) => {
this.currentMatch = match_data;
});
}

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

selectPlayerDetails() {
selectPlayerDetails(playerId: string) {
this.selectedPlayer = playerId;
this.isPlayerSelected = true;

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

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

getArrayOfPlayers(players) {
return Object.keys(players);
}

}

+ 4
- 0
src/app/services/match.service.ts View File

@@ -31,4 +31,8 @@ export class MatchService {
return this.http.get(BASE_URL + '/standings/').toPromise();
}

getPlayerDetails(id: number | string) {
return this.http.get(BASE_URL + '/player/' + id).toPromise();
}

}

Write Preview
Loading…
Cancel
Save