Live Page data integration

src/app/live/live.page.html

@@ -13,73 +13,30 @@
         </div>
 
 
-        <!-- <section class="match-card" (click)="showMatchDetails()">
-            <span class="format"> T20 Qualifiers </span>
-            <header> <h4> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} </h4> </header>
-            <p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>
-            <p> <ion-icon name="baseball-outline"></ion-icon> <span> Pollard </span> </p>
-
-            <section class="score-card">
+        <section class="match-card" (click)="showMatchDetails()" *ngIf="currentMatch">
+            <span class="format"> {{ currentMatch.Matchdetail.Series.Name }} </span>
+            <header> <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Full }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Full }} </h4> </header>
+            <p> <ion-icon name="calendar-outline"></ion-icon> {{ getEventDateTime(currentMatch.Matchdetail.Match.Date + ' ' + currentMatch.Matchdetail.Match.Time) }} </p>
+            <p> <ion-icon name="location-outline"></ion-icon> <span> {{ currentMatch.Matchdetail.Venue.Name }} </span> </p>
+            <p> <ion-icon name="information-circle-outline"></ion-icon> {{ currentMatch.Matchdetail.Match.Number }} </p>
+            <p> <ion-icon name="mic-outline"></ion-icon> {{ currentMatch.Matchdetail.Match.Coverage_level }} </p>
+            <p> <ion-icon name="radio-outline"></ion-icon> {{ currentMatch.Matchdetail.Status }} </p>
+            <p *ngIf="currentMatch.Matchdetail.Tosswonby"> {{ currentMatch.Matchdetail.Tosswonby }}, {{ currentMatch.Matchdetail.Toss_elected_to }} </p>
+
+            <!-- <section class="score-card">
                 <div class="team">
-                    <header> <img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5> </header>
+                    <header> <h5> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} </h5> </header>
                     <div class="score"> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </div>
                 </div>
 
                 <div class="team">
-                    <header> <img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </h5> </header>
+                    <header> <h5> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }} </h5> </header>
                     <div class="score"> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </div>
                 </div>
-            </section>
-        </section> -->
-
-        <ul class="statistical-pages">
-            <!-- <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}">
-                <header>
-                    <label> Scorecard </label>
-                    <button (click)="showScoreCard = !showScoreCard"> 
-                        <span *ngIf="!showScoreCard"> + </span> 
-                        <span *ngIf="showScoreCard"> - </span>
-                    </button>
-                </header>
-                
-                <section class="card">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>
-                                    Player
-                                </th>
-                                <th>
-                                    Score
-                                </th>
-                                <th>
-                                    Balls
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr *ngFor="let player of matchStats.awayTeam.batting">
-                                <td>
-                                    {{ player.name }} <br>
-                                    <span> {{ player.wicketTo }} </span>
-                                </td>
-
-                                <td>
-                                    {{ player.score }}
-                                </td>
-
-                                <td>
-                                    {{ player.ballsPlayed }}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-
-                    <button class="view-more-button" (click)="showMatchDetails()"> View More </button>
-                </section>
-
-            </li> -->
+            </section> -->
+        </section>
 
+        <ul class="statistical-pages">            
             <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                 <header>
                     <label> Fixtures </label>

src/app/live/live.page.scss

@@ -39,7 +39,7 @@
         color: white;
         line-height: 1.5;
         margin: 10px 0;
-        font-size: 1rem;
+        font-size: 0.8rem;
         font-weight: 500;
         display: flex;
         align-items: center;

src/app/live/live.page.ts

@@ -1,36 +1,206 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { IonSlides } from '@ionic/angular';
 import * as moment from 'moment';
-import * as faker from 'faker';
 import { Router } from '@angular/router';
 import { MatchService } from '../services/match.service';
 import { ToastService } from '../services/toast.service';
 
-export type IscoreCard = {
-    teamName: string,
-    teamLogo: string,
-    batting: Array<{
-        name: string,
-        jersey: number,
-        score: number,
-        ballsPlayed: number,
-        wicketTo?: string,
-        boundaries: number,
-        sixes: number
-    }>,
-    bowling: Array<{
-        name: string,
-        jersey: number,
-        runs: number,
-        overs: number,
-        wickets: number
-    }>,
-    totalScore: number,
-    totalWickets: number,
-    overs: number,
-    extras: number
+export type IMatch = {
+    match_date: string,
+    match_id: string,
+    match_time: string,
+    team_a: string,
+    team_a_id: string,
+    team_a_short: string,
+    team_b: string,
+    team_b_id: string,
+    team_b_short: string,
+    venue: string,
+    venue_id: string,
+};
+
+
+interface RawMatchDetailMatchInfo {
+    Livecoverage: string;
+    Id: string;
+    Code: string;
+    League: string;
+    League_Id: string;
+    Number: string;
+    Type: string;
+    Date: string;
+    Time: string;
+    Offset: string;
+    Group: string;
+    Coverage_level_id: string;
+    Coverage_level: string;
+    Match_ordinal: string;
+    Daynight: string;
+    Comp_type_id: string;
+    End_date: string;
+    End_time: string;
+}
+
+interface RawMatchDetailsSeries {
+    Id: string;
+    Name: string;
+    Series_short_display_name: string;
+    Series_start_date: string;
+    Series_end_date: string;
+    Series_type: string;
+    Status: string;
+    Tour: string;
+    Tour_Name: string;
 }
 
+interface RawMatchDetails {
+    Team_Home: string;
+    Team_Away: string;
+
+    Match: RawMatchDetailMatchInfo;
+    Series: RawMatchDetailsSeries;
+    
+    Venue: {
+        Id: string;
+        Name: string;
+    };
+
+    Tosswonby: string;
+    Toss_elected_to: string;
+    Status: string;
+    Status_Id: string;
+
+    // Info during or after completion of match
+
+    Result?: string;
+    Winningteam?: string;
+    Winmargin?: string;
+    Equation?: string;
+}
+
+interface RawMatchPlayerBatting {
+    Style: string;
+    Average: string;
+    Strikerate: string;
+    Runs: string;
+}
+
+interface RawMatchPlayerBowling {
+    Style: string;
+    Average: string;
+    Economyrate: string;
+    Wickets: string;
+}
+
+interface RawMatchPlayerDetails {
+    Position: string;
+    Name_Full: string;
+    Skill: string;
+    Matches: string;
+    Batting: RawMatchPlayerBatting;
+    Bowling: RawMatchPlayerBowling;
+}
+
+interface RawMatchPlayersDetails {
+    [player_id: string]: RawMatchPlayerDetails;
+}
+
+interface RawMatchTeamDetails {
+    Name_Full: string;
+    Name_Short: string;
+    Players: RawMatchPlayersDetails;
+}
+
+interface RawMatchTeamsDetails {
+    [team_id: string]: RawMatchTeamDetails;
+}
+
+interface RawMatchInningsBatsman {
+    Batsman: string;
+    Runs: string;
+    Balls: string;
+    Fours: string;
+    Sixes: string;
+    Dots: string;
+    Strikerate: string;
+    Dismissal: string;
+    Howout: string;
+    Bowler: string;
+    Fielder: string;
+    Number: number;
+    DismissalType: string;
+    DismissalId: string;
+}
+
+interface RawMatchInningsBowler {
+    Bowler: string;
+    Overs: string;
+    Maidens: string;
+    Runs: string;
+    Wickets: string;
+    Economyrate: string;
+    Noballs: string;
+    Wides: string;
+    Dots: string;
+    Number: number;
+}
+
+interface RawMatchInningsCurrentPartnershipBatsman {
+    Batsman: string;
+    Runs: string;
+    Balls: string;
+}
+
+interface RawMatchInningsPartnership {
+    Runs: string,
+    Balls: string,
+    Batsmen: Array<RawMatchInningsCurrentPartnershipBatsman>;
+    ForWicket: number;
+}
+
+interface RawMatchInningsFallOfWicket {
+    Batsman: string;
+    Score: string;
+    Overs: string;
+    Wicket_No: string;
+    Review_status_id: string;
+}
+
+interface RawMatchInnings {
+    Number: string;
+    Battingteam: string;
+    Bowlingteam: string;
+    Total: string;
+    Wickets: string;
+    Overs: string;
+    Runrate: string;
+    Byes: string;
+    Legbyes: string;
+    Wides: string;
+    Noballs: string;
+    Penalty: string;
+    AllottedOvers: string;
+
+    Batsmen: Array<RawMatchInningsBatsman>;
+    Partnership_Current: RawMatchInningsPartnership;
+    Bowlers: Array<RawMatchInningsBowler>;
+    FallofWickets: Array<RawMatchInningsFallOfWicket>;
+    Partnerships: Array<RawMatchInningsPartnership>;
+    
+    OverNo: string;
+    BallNo: string;
+}
+
+export interface RawMatchData {
+    Timestamp: string;
+    Matchdetail: RawMatchDetails;
+    Teams: RawMatchTeamsDetails;
+    
+    // Info during or after completion of match
+    Innings?: Array<RawMatchInnings>;
+}
+
+
 @Component({
     selector: 'app-live',
     templateUrl: './live.page.html',
@@ -51,7 +221,8 @@ export class LivePage implements OnInit {
         // followFinger: false,
     };
 
-    fixtures = [];
+    fixtures: Array<IMatch> = [];
+    currentMatch: RawMatchData;
 
     constructor(
         private router: Router,
@@ -68,13 +239,39 @@ export class LivePage implements OnInit {
     }
 
     ngOnInit() {
-        this.matchService.getFixtures().then((data: any) => {
-            console.log(data);
+        this.matchService.getFixtures().then((data: Array<IMatch>) => {
             this.fixtures = data;
+
+            let current_date = moment(),
+            tempDiffDays = [],
+            closestDay = null,
+            closestIndex = null,
+            closestMatch: IMatch;
+
+            for (let i = 0; i < this.fixtures.length; i += 1) {
+                tempDiffDays.push(current_date.diff(moment(this.fixtures[i].match_date + ' ' + this.fixtures[i].match_time), 'days'));
+            }
+
+            closestDay = tempDiffDays.reduce((prev, curr) => {
+                return (Math.abs(curr - 0) < Math.abs(prev - 0) ? curr : prev);
+            });
+
+            closestIndex = tempDiffDays.findIndex((days) => {
+                return days === closestDay;
+            });
+
+            closestMatch = this.fixtures[closestIndex];
+
+            if (closestMatch) {
+                this.matchService.getMatchDetails(closestMatch.match_id).then((match_data: RawMatchData) => {
+                    this.currentMatch = match_data;
+                });
+            }            
+
         }, (err) => {
             console.log(err);
             this.toastService.presentToastWithOptions("Failed to get Fixtures", "danger");
-        });       
+        });
     }
 
     ionViewDidEnter() {

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

@@ -1,7 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-import { IscoreCard } from '../live/live.page';
 import * as faker from 'faker';
 import { IonContent } from '@ionic/angular';
 
@@ -45,8 +44,8 @@ export class MatchDetailsPage implements OnInit {
     
     matchStats: {
         stadium: string,
-        homeTeam: IscoreCard,
-        awayTeam: IscoreCard
+        homeTeam: any,
+        awayTeam: any
     };
 
     constructor(

src/app/services/match.service.ts

@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-export const BASE_URL = 'http://fan-engagement.webtrigon.com';
+export const BASE_URL = 'https://fan-engagement.webtrigon.com';
 
-// http://fan-engagement.webtrigon.com/ - Base URL
+// https://fan-engagement.webtrigon.com/ - Base URL
 // /fixtures/
 // /player/<id>
 // /match/<id>
 // /team/<id>
+// /standings/ 
 
 @Injectable({
     providedIn: 'root'
@@ -22,4 +23,12 @@ export class MatchService {
         return this.http.get(BASE_URL + '/fixtures/').toPromise();
     }
 
+    getMatchDetails(id: number | string) {
+        return this.http.get(BASE_URL + '/match/' + id).toPromise();
+    }
+
+    getLeagueTable() {
+        return this.http.get(BASE_URL + '/standings/').toPromise();
+    }
+
 }