Live page player details, team lineup API integration

src/app/components/player-details/player-details.component.html

@@ -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>

src/app/components/player-details/player-details.component.scss

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

src/app/components/player-details/player-details.component.ts

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

src/app/live/live.page.ts

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

src/app/match-details/match-details.page.html

@@ -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>

src/app/match-details/match-details.page.scss

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

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

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

src/app/services/match.service.ts

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