Scorecard Structure + dropdown scorecard

src/app/booking/booking.page.ts

@@ -127,8 +127,6 @@ export class BookingPage implements OnInit {
 
         this.selectedDate = this.bookingSeatsData[0].dateTime;
 
-        console.log(this.bookingSeatsData);
-
     }
 
 

src/app/chat/chat.page.ts

@@ -132,7 +132,7 @@ export class ChatPage implements OnInit {
 
             setTimeout(() => {
                 this.scrollToEnd();
-            }, 500);
+            }, 300);
             
 
         }, 200);

src/app/live/live.page.html

@@ -15,37 +15,76 @@
 
         <section class="match-card" [routerLink]="['/match-details']">
             <span class="format"> T20 Qualifiers </span>
-            <header> <h4> Kings XI Punjab v/s Mumbai Indians </h4> </header>
+            <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">
                 <div class="team">
-                    <header> <img src="assets/home-team/KXIP.svg"> <h5> Kings XI Punjab </h5> </header>
-                    <div class="score"> 179/9 <span> (19.3) </span> </div>
+                    <header> <img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5> </header>
+                    <div class="score"> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </div>
                 </div>
 
                 <div class="team">
-                    <header> <img src="assets/logos/mi.svg"> <h5> Mumbai Indians </h5> </header>
-                    <div class="score"> 10/2 <span> (5.5) </span> </div>
+                    <header> <img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </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>
-                <label> Scorecard </label>
-                <button> + </button>
-            </li>
+            <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"> View More </button>
+                </section>
 
-            <li>
-                <label> Statistical Analysis </label>
-                <button> + </button>
             </li>
 
-            <li>
-                <label> Matches </label>
-                <button> + </button>
+            <li class="collapsible-card">
+                <header>
+                    <label> Matches </label>
+                    <button> + </button>
+                </header>                
             </li>
         </ul>
 

src/app/live/live.page.scss

@@ -8,6 +8,10 @@ ion-content {
     background: linear-gradient(90deg, $dark-blue-shade1 50%, $dark-blue-shade2);    
 }
 
+.content-container {
+    padding-bottom: 50px;
+}
+
 .heading-holder {
     margin-bottom: 2.7rem;
     padding: 0px 7%;
@@ -129,39 +133,113 @@ ion-content {
     width: 86%;
     margin: 0 auto;
 
-    li {
-        display: flex;
-        width: 100%;
-        background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2);
+    .collapsible-card {
         margin: 30px auto;
-        border-radius: 10px;
-        padding: 0px 15px;
-        justify-content: space-between;
+        border-radius: 10px;  
+        overflow: hidden;
+        background: linear-gradient(90deg, darken($dark-blue-shade2, 10%) 50%, $dark-blue-shade2);
+        box-shadow: 0px 0px 5px darken($dark-blue-shade2, 30%);
         height: 50px;
-        align-items: center;
 
-        label {
+        -webkit-perspective: 1200px;
+        -moz-perspective: 1200px;
+        -ms-perspective: 1200px;
+        perspective: 1200px;
+
+        &.active {
+            height: auto;
+
+            header {
+                border-bottom: 1px solid rgba(white, 0.1);
+            }
+        }
+
+        header {
+            margin: 0 auto;
+            display: flex;
+            width: calc(100% - 30px);
+            justify-content: space-between;
+            height: 50px;
+            align-items: center;            
+            
+            label {
+                font-size: 1rem;
+                color: white;
+                font-weight: 500;
+                letter-spacing: 0.5px;
+                opacity: 0.9;
+            }
+    
+            button {
+                border-radius: 50%;
+                background-color: $green;
+                height: 30px;
+                width: 30px;
+                font-size: 24px;
+                color: white;            
+            }
+        }
+
+        .view-more-button {
+            display: block;
+            width: 100%;
+            border-radius: 7px;
+            background-color: $pink;
+            color: white;
             font-size: 1rem;
+            height: 40px;
+            margin-top: 15px;
+            box-shadow: 0px 0px 5px 2px darken($dark-blue-shade2, 10%);           
+        }
+        
+        .card {
+            width: 100%;
+            padding: 15px;
+        }
+
+        table {
+            width: 100%;
             color: white;
-            font-weight: 500;
-            letter-spacing: 0.5px;
-            opacity: 0.9;
+            font-size: 1rem;
+            
+            thead {
+                line-height: 2;
+            }
         }
 
-        button {
-            border-radius: 50%;
-            background-color: $green;
-            height: 30px;
-            width: 30px;
-            font-size: 24px;
-            color: white;            
+        tr {
+            &:last-child {
+                td {
+                    padding-bottom: 0px;
+                }
+            }
+
+            td {
+                overflow: hidden;
+                width: 100%;
+                padding-bottom: 15px;
+    
+                span {
+                    font-size: 0.8rem;
+                    color: rgba(white, 0.5);
+                }
+    
+                &:nth-child(1) {
+                    width: 60%;
+                }
+    
+                &:nth-child(2) {
+                    width: 20%;
+                }
+    
+                &:nth-child(3) {
+                    width: 20%;
+                }
+            }
         }
     }
 }
 
-ion-fab {
-    transform: translateX(-30%);
-}
 
 .chat-button {
     --background: #d73e53;

src/app/live/live.page.ts

@@ -1,6 +1,34 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import * as moment from 'moment';
 import { ChatPage } from '../chat/chat.page';
+import * as faker from 'faker';
+import { Router } from '@angular/router';
+
+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
+}
 
 @Component({
     selector: 'app-live',
@@ -8,12 +36,218 @@ import { ChatPage } from '../chat/chat.page';
     styleUrls: ['./live.page.scss'],
 })
 export class LivePage implements OnInit {
+    showScoreCard: boolean = true;
+
+    matchStats: {
+        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
+            }>
+        }>
+    }> = [];
 
     constructor(
-        public modalController: ModalController
+        public modalController: ModalController,
+        private router: Router
     ) { }
 
+    getFormattedDateTime(dateTime: Date) {
+        return moment(dateTime).format('DD MMM');
+    }
+
     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 = {
+            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,
+            }
+        }
     }
 
     async presentChatModal() {
@@ -24,4 +258,8 @@ export class LivePage implements OnInit {
         return await modal.present();
     }
 
+    showBookingDetails(matchData) {
+        this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]);
+    }
+
 }