Fixtures API connection --partial commit

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
 
 // Custom Services
 import { NewsService } from './services/news.service';
+import { MatchService } from './services/match.service';
 import { ToastService } from './services/toast.service';
 
 @NgModule({
@@ -30,6 +31,7 @@ import { ToastService } from './services/toast.service';
     StatusBar,
     SplashScreen,
     NewsService,
+    MatchService,
     ToastService,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig },

src/app/live/live.page.html

@@ -13,7 +13,7 @@
         </div>
 
 
-        <section class="match-card" (click)="showMatchDetails()">
+        <!-- <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>
@@ -30,10 +30,10 @@
                     <div class="score"> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </div>
                 </div>
             </section>
-        </section>
+        </section> -->
 
         <ul class="statistical-pages">
-            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}">
+            <!-- <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}">
                 <header>
                     <label> Scorecard </label>
                     <button (click)="showScoreCard = !showScoreCard"> 
@@ -78,7 +78,7 @@
                     <button class="view-more-button" (click)="showMatchDetails()"> View More </button>
                 </section>
 
-            </li>
+            </li> -->
 
             <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                 <header>
@@ -90,32 +90,31 @@
                 </header>
 
                 <section class="card">
-                    <ion-slides  #slides [options]="slideOpts" (ionSlideDidChange)="selectIndex()">
+                    <ion-slides  #slides [options]="slideOpts">
                         
-                        <ion-slide *ngFor="let matchDay of bookingSeatsData"
-                        (click)="showBookingDetails(matchDay)">
+                        <ion-slide *ngFor="let fixture of fixtures">
                             <div class="image-holder">
                                 <figure>
-                                    <img [src]="matchDay.staduim.sideView">
+                                    <img src="https://s3.ap-south-1.amazonaws.com/assets-kxip.sportz.io/prod/waf-images/91/55/a5/16-9/5PE9uqJSZw.jpg">
                                 </figure>
                             </div>
                 
                             <section class="content">
                                 <section class="match-day-card">
                                     <div class="teams">
-                                        <img [src]="matchDay.matchDetails.home.image" alt="">
+                                        {{ fixture.team_a_short }}
                                         <span></span>
-                                        <img [src]="matchDay.matchDetails.away.image" alt="">
+                                        {{ fixture.team_b_short }}
                                     </div>
                     
                                     <p class="event-details">
-                                        {{ getEventDateTime(matchDay.dateTime) }} <br>
-                                        {{ matchDay.staduim.name }} Stadium
+                                        {{ getEventDateTime(fixture.match_date + ' ' + fixture.match_time) }} 
+                                        <br>
+                                        <br>
+                                        {{ fixture.venue }}
                                     </p>                        
                     
-                                    <h4> {{ matchDay.matchDetails.home.name }} v/s {{ matchDay.matchDetails.away.name }}</h4>
-                    
-                                    <h5> {{ matchDay.matchType }} </h5>
+                                    <!-- <h4> {{ fixture.team_a_short }} v/s {{ fixture.team_b_short }}</h4> -->
                                 </section>
                             </section>
                 
@@ -134,14 +133,6 @@
                 </header>
             </li>
         </ul>
-
     </div>
 
-    <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button class="chat-button" (click)="presentChatModal()">
-            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
-            <ion-badge color="dark"> 10 </ion-badge>
-        </ion-fab-button>
-    </ion-fab> -->
-
 </ion-content>

src/app/live/live.page.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IonSlides, ModalController } from '@ionic/angular';
+import { IonSlides } from '@ionic/angular';
 import * as moment from 'moment';
-import { ChatPage } from '../chat/chat.page';
 import * as faker from 'faker';
 import { Router } from '@angular/router';
-import { AddPartyPage } from '../add-party/add-party.page';
+import { MatchService } from '../services/match.service';
+import { ToastService } from '../services/toast.service';
 
 export type IscoreCard = {
     teamName: string,
@@ -40,9 +40,7 @@ export class LivePage implements OnInit {
     @ViewChild('slides') slides: IonSlides;
     
     showScoreCard: boolean = true;
-    showFixtures: boolean = false;
-
-    selectedIndex: number = 0;
+    showFixtures: boolean = true;
 
     slideOpts = {
         slidesPerView: 1.5,
@@ -53,269 +51,37 @@ export class LivePage implements OnInit {
         // followFinger: false,
     };
 
-    matchStats: {
-        stadium: string,
-        homeTeam: IscoreCard,
-        awayTeam: IscoreCard
-    };
-
-    teams = [{
-        name: 'RCB',
-        image: 'https://i.pinimg.com/originals/4f/f9/99/4ff99925fd51296daf76425b11c04195.jpg'
-    }, {
-        name: 'MI',
-        image: 'assets/logos/mi.svg',
-    }, {
-        name: 'CSK',
-        image: 'https://www.searchpng.com/wp-content/uploads/2019/02/Chennai-Super-Kings-Logo-PNG-Image-.png'
-    }];
-
-    stadiums = [{
-        name: 'Chinnaswamy',
-        sideView: 'https://www.royalchallengers.com/PRRCB01/public/styles/1061x767_landscape/public/2020-04/275679.jpg?h=61617f72&itok=6xKgHpE-',
-        topView: 'assets/home-team/stadium-tv.svg',
-    }, {
-        name: 'IS Bindra',
-        sideView: 'https://5.imimg.com/data5/VO/UB/MY-3103550/ae-cricket-stadium-lighting-500x500.jpg',
-        topView: 'assets/home-team/stadium-tv.svg'
-    }, {
-        name: 'Chidambaram Stadium',
-        sideView: 'https://sportzwiki.com/wp-content/uploads/2019/03/11.jpg',
-        topView: 'assets/home-team/stadium-tv.svg',
-    }];
-
-    bookingSeatsData: Array<{
-        dateTime: Date,
-        staduim: {
-            name: string,
-            topView: string,
-            sideView: string,
-        },
-        matchType: string,
-        matchDetails: {
-            home: {
-                name: string,
-                image: string,
-            },
-            away: {
-                name: string,
-                image: string,
-            }
-        },
-        seatsAvailable: Array<{
-            stand: 'Grand' | 'Pavilion' | 'First' | 'Second',
-            seats: Array<{
-                id: number | string,
-                price: number
-            }>
-        }>
-    }> = [];
-
-    showAddParty: boolean = false;
+    fixtures = [];
 
     constructor(
-        public modalController: ModalController,
-        private router: Router
+        private router: Router,
+        private matchService: MatchService,
+        private toastService: ToastService
     ) { }
 
     getFormattedDateTime(dateTime: Date) {
         return moment(dateTime).format('DD MMM');
     }
 
-    getEventDateTime(dateTime: Date) {
+    getEventDateTime(dateTime: string) {
         return moment(dateTime).format('ddd, MMM DD YYYY hh:mm a');
     }
 
-    selectIndex() {
-        this.slides.getActiveIndex().then((index) => this.selectedIndex = index);
-    }
-
     ngOnInit() {
-        for (let i = 0; i < 3; i += 1) {
-            this.bookingSeatsData.push({
-                dateTime: faker.date.future(),
-                staduim : this.stadiums[i],
-                matchType: 'T20 League',
-                matchDetails: {
-                    home: i !==1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' },
-                    away: i ===1 ? this.teams[i] : { name: 'KXIP', image: 'assets/home-team/KXIP.svg' }
-                },
-                seatsAvailable: [{
-                    stand: 'Grand',
-                    seats: [],
-                }, {
-                    stand: 'Pavilion',
-                    seats: [],
-                }, {
-                    stand: 'First',
-                    seats: [],
-                }, {
-                    stand: 'Second',
-                    seats: [],
-                }]
-            });
-        }
-
-        for (let i = 0; i < this.bookingSeatsData.length; i += 1) {
-            for (let j = 0; j < this.bookingSeatsData[i].seatsAvailable.length; j += 1) {
-
-                let price = faker.commerce.price();
-
-                let randomNumber = Math.random() * (15 - 0) + 0;
-
-                for (let k = 0; k < randomNumber; k += 1) {
-                    this.bookingSeatsData[i].seatsAvailable[j].seats.push({
-                        id: this.bookingSeatsData[i].seatsAvailable[j].stand + '##' + k.toString(),
-                        price
-                    });
-                }                    
-            }
-        }
-
-        this.matchStats = {
-            stadium: 'IS Bindra',
-            homeTeam: {
-                teamName: 'KXIP',
-                teamLogo: 'assets/home-team/KXIP.svg',
-                batting: [{
-                    name: 'V Sehwag',
-                    jersey: 44,
-                    score: 62,
-                    ballsPlayed: 30,
-                    wicketTo: 'c Sachin, b D.Steyn',
-                    boundaries: 8,
-                    sixes: 4,
-                }, {
-                    name: 'KL Rahul',
-                    jersey: 10,
-                    score: 85,
-                    ballsPlayed: 80,
-                    boundaries: 10,
-                    sixes: 3,
-                }, {
-                    name: 'G Maxwell',
-                    jersey: 11,
-                    score: 10,
-                    ballsPlayed: 10,
-                    boundaries: 0,
-                    sixes: 1,
-                }],
-                bowling: [{
-                    name: 'Harmeet Singh',
-                    jersey: 13,
-                    runs: 22,
-                    overs: 2,
-                    wickets: 1
-                }, {
-                    name: 'Mishra',
-                    jersey: 25,
-                    runs: 10,
-                    overs: 1,
-                    wickets: 0
-                }],
-                totalScore: 157,
-                overs: 20,
-                extras: 0,
-                totalWickets: 1,
-            },
-            awayTeam : {
-                teamName: 'MI',
-                teamLogo: 'assets/logos/mi.svg',
-                batting: [{
-                    name: 'S Tendulkar',
-                    jersey: 10,
-                    score: 10,
-                    ballsPlayed: 12,
-                    wicketTo: 'b H.Singh',
-                    boundaries: 0,
-                    sixes: 1,
-                }, {
-                    name: 'K Pollard',
-                    jersey: 22,
-                    score: 44,
-                    ballsPlayed: 11,
-                    boundaries: 1,
-                    sixes: 5,
-                }, {
-                    name: 'D Bravo',
-                    jersey: 38,
-                    score: 5,
-                    ballsPlayed: 3,
-                    boundaries: 1,
-                    sixes: 0,
-                }],
-                bowling: [{
-                    name: 'D Steyn',
-                    jersey: 12,
-                    runs: 55,
-                    overs: 4,
-                    wickets: 1
-                }, {
-                    name: 'D Bravo',
-                    jersey: 38,
-                    runs: 40,
-                    overs: 4,
-                    wickets: 0
-                }, {
-                    name: 'S Tendulkar',
-                    jersey: 10,
-                    runs: 25,
-                    overs: 4,
-                    wickets: 0
-                }, {
-                    name: 'Trent Boult',
-                    jersey: 17,
-                    runs: 37,
-                    overs: 4,
-                    wickets: 0
-                }],
-                totalScore: 60,
-                overs: 3.2,
-                extras: 1,
-                totalWickets: 1,
-            }
-        }
+        this.matchService.getFixtures().then((data: any) => {
+            console.log(data);
+            this.fixtures = data;
+        }, (err) => {
+            console.log(err);
+            this.toastService.presentToastWithOptions("Failed to get Fixtures", "danger");
+        });       
     }
 
     ionViewDidEnter() {
-        if (localStorage.isPartyChatOn === 'no') {
-            this.showAddParty = true;
-        }
-    }
-
-    async presentChatModal() {
-        const modal = await this.modalController.create({
-          component: ChatPage,
-        });
-        return await modal.present();
-    }
-
-    async presentAddChatModal() {
-        const modal = await this.modalController.create({
-            component: AddPartyPage,
-          });
-
-          modal.onDidDismiss().then((data) => {
-              if(data.data.createParty) {
-                  this.showAddParty = false;
-                  localStorage.isPartyChatOn = 'yes';
-              }
-          });
-
-          return await modal.present();
-    }
-
-    showBookingDetails(matchData) {
-        this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]);
-    }
-
-    showBookingDetailsByIndex() {
-        let index = this.selectedIndex;
-        this.router.navigate(['/booking-details' , { matchData: JSON.stringify(this.bookingSeatsData[index]) }]);
     }
 
     showMatchDetails() {
-        this.router.navigate(['/match-details', { matchStats: JSON.stringify(this.matchStats) }]);
+        this.router.navigate(['/match-details']);
     }
 
 }

src/app/services/match.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatchService } from './match.service';
+
+describe('MatchService', () => {
+  let service: MatchService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatchService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/match.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+export const BASE_URL = 'http://fan-engagement.webtrigon.com';
+
+// http://fan-engagement.webtrigon.com/ - Base URL
+// /fixtures/
+// /player/<id>
+// /match/<id>
+// /team/<id>
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MatchService {
+
+    constructor(
+        private http: HttpClient
+    ) { }
+    
+    getFixtures() {
+        return this.http.get(BASE_URL + '/fixtures/').toPromise();
+    }
+
+}

src/app/services/news.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 
 export const IMAGE_BASE_URL: string = 'https://www.punjabkingsipl.in/static-assets/waf-images/';