League table API integration

src/app/league-table/league-table.page.html

@@ -9,7 +9,7 @@
         </div>
     </section>
 
-    <div class="table-container" *ngIf="tableData">
+    <div class="table-container" *ngIf="standings">
 
         <table class="team">
             <thead>
@@ -20,9 +20,9 @@
                 </tr>
             </thead>
             <tbody>                
-                <tr *ngFor="let data of tableData">
+                <tr *ngFor="let standing of standings">
                     <td>
-                        {{ data.team }}
+                        {{ standing.short_name }}
                     </td>
                 </tr>
             </tbody>
@@ -49,21 +49,21 @@
                 </tr>
             </thead>
             <tbody>
-                <tr *ngFor="let data of tableData">
+                <tr *ngFor="let standing of standings">
                     <td>
-                        {{ data.played }}
+                        {{ standing.total }}
                     </td>
                     <td>
-                        {{ data.won }}
+                        {{ standing.wins }}
                     </td>
                     <td>
-                        {{ data.lost }}
+                        {{ standing.lost }}
                     </td>
                     <td>
-                        {{ data.tied }}
+                        {{ standing.tied }}
                     </td>
                     <td>
-                        {{ data.netrr }}
+                        {{ standing.net_run_rate }}
                     </td>
                 </tr>
             </tbody>

src/app/league-table/league-table.page.scss

@@ -39,6 +39,7 @@
         color: white;
         background-color: darken($brand-blue, 15%);
         table-layout:fixed;
+        height: 100%;
         
         thead {
             background-color: rgba($green, 0.3);
@@ -53,7 +54,6 @@
         td {
             font-size: 16px;
             height: 50px;
-            padding: 30px 0;
         }
     }
 }

src/app/league-table/league-table.page.ts

@@ -1,5 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
+import { MatchService } from '../services/match.service';
+import { ToastService } from '../services/toast.service';
+
+export interface MobileAppStanding {
+    id: string;
+    name: string;
+    short_name: string;
+    position: number;
+
+    total: number;
+    
+    wins: number;
+    lost: number;
+    tied: number;
+    no_result: number;
+
+    net_run_rate: number;
+}
 
 @Component({
     selector: 'app-league-table',
@@ -8,39 +26,21 @@ import { Location } from '@angular/common';
 })
 export class LeagueTablePage implements OnInit {
 
-    tableData = [{
-        team: 'KXIP',
-        played: '20',
-        won: '10',
-        lost: '9',
-        tied: '1',
-        netrr: '+1.107'
-    }, {
-        team: 'MI',
-        played: '20',
-        won: '10',
-        lost: '9',
-        tied: '1',
-        netrr: '+1.107'
-    }, {
-        team: 'RCB',
-        played: '20',
-        won: '10',
-        lost: '9',
-        tied: '1',
-        netrr: '+1.107'
-    }, {
-        team: 'CSK',
-        played: '20',
-        won: '10',
-        lost: '9',
-        tied: '1',
-        netrr: '+1.107'
-    }];
-
-    constructor(private location: Location) { }
+    standings: Array<MobileAppStanding> = [];
+
+    constructor(
+        private location: Location,
+        private matchService: MatchService,
+        private toastService: ToastService
+    ) { }
 
     ngOnInit() {
+        this.matchService.getLeagueTable().then((data: Array<MobileAppStanding>) => {
+            this.standings = data;
+        }, (err) => {
+            console.log(err);
+            this.toastService.presentToastWithOptions("Failed to get standings data", "danger");
+        });
     }
 
     back() {

src/app/live/live.page.html

@@ -36,7 +36,7 @@
             </section> -->
         </section>
 
-        <ul class="statistical-pages">            
+        <ul class="statistical-pages">
             <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                 <header>
                     <label> Fixtures </label>
@@ -59,8 +59,7 @@
                             <section class="content">
                                 <section class="match-day-card">
                                     <div class="teams">
-                                        {{ fixture.team_a_short }}
-                                        <span></span>
+                                        {{ fixture.team_a_short }} <span> vs </span>
                                         {{ fixture.team_b_short }}
                                     </div>
                     
@@ -69,9 +68,7 @@
                                         <br>
                                         <br>
                                         {{ fixture.venue }}
-                                    </p>                        
-                    
-                                    <!-- <h4> {{ fixture.team_a_short }} v/s {{ fixture.team_b_short }}</h4> -->
+                                    </p>
                                 </section>
                             </section>
                 

src/app/live/live.page.scss

@@ -289,7 +289,7 @@ ion-slides {
 
     .teams {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         width: 130px;
         margin: 0 auto -25px auto;
         height: 50px;
@@ -300,18 +300,13 @@ ion-slides {
         position: relative;
         transform: translateY(-25px);
         z-index: 1;
+        font-size: 0.9rem;
+        color: darken($brand-blue, 20%);
+        font-weight: 500;
 
         span {
-            font-size: 1rem;
-            width: 12px;
-            height: 3px;
-            background-color: darken(#cecece, 15%);
-        }
-        
-        img {
-            width: 33px;
-            height: 33px;
-            border-radius: 50%;
+            font-size: 0.7rem;
+            padding: 0 10px;
         }
     }
 
@@ -323,19 +318,19 @@ ion-slides {
 
     .event-details {
         margin: 20px 0 5px;
-        color: darken(#cecece, 30%);
+        color: lighten($brand-red, 20%);
         font-size: 0.8rem;
         font-weight: 500;
     }
 
     h4 {
-        color: darken(#cecece, 50%);
+        color: lighten($brand-red, 20%);
         font-size: 1.1rem;
         line-height: 1.5;
     }
 
     h5 {
-        color: darken(#cecece, 50%);
+        color: lighten($brand-red, 20%);
         font-size: 0.9rem;
         line-height: 1.5;
     }