Commentary structure changes implmented

src/app/live/live.page.html

@@ -20,7 +20,8 @@
             <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>
+            <p *ngIf="currentMatch.Matchdetail.Tosswonby"> {{ currentMatch.Teams[currentMatch.Matchdetail.Tosswonby].Name_Short }} won the toss and elected to {{ currentMatch.Matchdetail.Toss_elected_to }} </p>
+            <p *ngIf="currentMatch.Matchdetail.Equation"> {{ currentMatch.Matchdetail.Equation }} </p>
 
             <section class="score-card" *ngIf="currentMatch.Innings">
                 <div class="team" *ngFor="let inning of currentMatch.Innings">
@@ -59,7 +60,7 @@
                             <ng-container *ngFor="let batsman of inning.Batsmen">
                                 <tr *ngIf="batsman.Runs !== ''">
                                     <td>
-                                        {{ currentMatch.Teams[inning.Battingteam].Players[batsman].Name_Full }} <br>
+                                        {{ currentMatch.Teams[inning.Battingteam].Players[batsman.Batsman].Name_Full }} <br>
                                         <span> {{ batsman.Howout }} </span>
                                     </td>
     

src/app/live/live.page.scss

@@ -171,8 +171,11 @@
         }
         
         .card {
-            width: 100%;
+            width: 90%;
+            margin: 20px auto;
             padding: 15px;
+            background-color: lighten($brand-blue, 1%);
+            border-radius: 7px;
         }
 
         table {

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

@@ -21,7 +21,7 @@
 
     <div class="score-container" *ngIf="selectedSegment === 'SCORE' && currentMatch.Innings">
         
-        <section class="score-card" *ngFor="let inning of currentMatch.Innings">
+        <section class="score-card" *ngFor="let inning of getReversedArray(currentMatch.Innings)">
         
             <header>
                 <h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5>
@@ -53,10 +53,10 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <ng-container *ngIf="batsman.Runs !== ''">
-                            <tr *ngFor="let batsman of inning.Batsmen">
+                        <ng-container *ngFor="let batsman of inning.Batsmen">
+                            <tr>
                                 <td>
-                                    <label> {{ currentMatch.Teams[inning.Battingteam].Players[Batsman].Name_Full }} </label> <br>
+                                    <label> {{ currentMatch.Teams[inning.Battingteam].Players[batsman.Batsman].Name_Full }} </label> <br>
                                     <span> {{ batsman.Howout }} </span>
                                 </td>
             
@@ -112,34 +112,33 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <ng-container *ngIf="bowler.Overs !== ''">
-
+                        <ng-container *ngFor="let bowler of inning.Bowlers">
+                            <tr>
+                                <td>
+                                    <label> {{ currentMatch.Teams[inning.Bowlingteam].Players[bowler.Bowler].Name_Full }} </label>
+                                </td>
+            
+                                <td>
+                                    {{ bowler.Wickets }}
+                                </td>
+            
+                                <td>
+                                    {{ bowler.Overs }}
+                                </td>
+            
+                                <td>
+                                    {{ bowler.Dots }}
+                                </td>
+            
+                                <td>
+                                    {{ bowler.Runs }}
+                                </td>
+            
+                                <td>
+                                    {{ bowler.Economyrate }}
+                                </td>
+                            </tr>
                         </ng-container>
-                        <tr *ngFor="let bowler of inning.Bowlers">
-                            <td>
-                                <label> {{ currentMatch.Teams[inning.Battingteam].Players[bowler].Name_Full }} </label>
-                            </td>
-        
-                            <td>
-                                {{ bowler.Wickets }}
-                            </td>
-        
-                            <td>
-                                {{ bowler.Overs }}
-                            </td>
-        
-                            <td>
-                                {{ bowler.Dots }}
-                            </td>
-        
-                            <td>
-                                {{ bowler.Runs }}
-                            </td>
-        
-                            <td>
-                                {{ bowler.Economyrate }}
-                            </td>
-                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -148,26 +147,37 @@
     </div>
 
     <ng-container *ngIf="selectedSegment === 'MATCH'">
-        <div class="commentary-container" *ngIf="selectedRoster === 'LIVE'">
+        <div class="commentary-container" *ngIf="selectedRoster === 'LIVE' && commentaryList">
+
+            <section class="score-card" *ngIf="currentMatch.Innings">
+                <div class="team" *ngFor="let inning of getReversedArray(currentMatch.Innings)">
+                    <header> <h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5> {{ inning.Total }}/{{ inning.Wickets }} <span> ({{ inning.Overs }}) </span> </header>
+                </div>
+            </section>
             
-            <header>
-                <h5> Commentary </h5>
-            </header>
+            <ul *ngFor="let list of getReversedArray(commentaryList)">
+                <header>
+                    <h5> Innings #{{ list.InningNo }}  </h5>
+                </header>
 
-            <ul *ngIf="commentaryList">
-                <li *ngFor="let commentary of commentaryList">
+                <li *ngFor="let commentary of list.Commentary">
                     <div class="over-data">
                         <label *ngIf="commentary.Isball"> {{ commentary.Over }} </label>
                         <span *ngIf="commentary.Isball"
                         [ngClass]="{'boundary' : commentary.Runs === '4', 
                         'six': commentary.Runs === '6',
                         'wicket': commentary.Iswicket }"> {{ commentary.Runs }} </span>
+
+                        <span *ngIf="!commentary.Isball">
+                            <ion-icon name="mic-outline"></ion-icon>
+                        </span>
+
                     </div>
                     <div class="comment">
                         <p>
                             {{ commentary.Commentary }}
                         </p>
-                        <div class="small-stats">
+                        <div class="small-stats" *ngIf="commentary.Batsman_Name">
                             <span> <strong> Score: </strong> {{ commentary.Score }} </span>
                             <span> <strong> Strike: </strong> {{ commentary.Batsman_Name }} </span>
                             <span> <strong> Bowling: </strong> {{ commentary.Bowler_Name }}  </span>

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

@@ -5,6 +5,7 @@
     padding-bottom: 60px;
     width: 100%;
     z-index: 0;
+    position: relative;
 
     header {
         padding: 0 5%;
@@ -12,6 +13,30 @@
         font-size: 14px;
     }
 
+    .score-card {
+        box-shadow: 0px 0px 15px -6px darken($brand-blue, 10%);
+        margin: 0px auto 30px;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 140px;
+        z-index: 1;
+    }
+
+    .score-card .team {
+        header {
+            background-color: white;
+            margin-bottom: 0;
+
+            &:first-child {
+                border-bottom: 1px solid rgba($brand-blue, 0.1);
+            }
+
+            h5 {
+                margin-right: 10px;
+            }
+        }
+    }
+
     ul {
         list-style: none;
         color: darken($brand-blue, 20%);
@@ -346,7 +371,7 @@
     border-radius: 7px;
     overflow: hidden;
     width: 90%;
-    margin: 30px auto;
+    margin: 10px auto 30px;
 
     .container {
         width: 90%;

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

@@ -29,6 +29,8 @@ interface RawCommentaryForBall {
     Ball_Speed: string;
 }
 
+// 200556
+
 export interface RawCommentary {
     InningNo: string;
     BattingTeam_Id: string;
@@ -59,7 +61,7 @@ export class MatchDetailsPage implements OnInit {
 
     selectedPlayer: string = '';
 
-    commentaryList: Array<RawCommentaryForBall> = [];
+    commentaryList: Array<RawCommentary> = [];
 
     constructor(
         private location: Location,
@@ -75,14 +77,18 @@ export class MatchDetailsPage implements OnInit {
             this.currentMatch = match_data;
         });
 
-        this.matchService.getCommentary(match_id).then((data: Array<RawCommentaryForBall>) => {
-            this.commentaryList = data;
+        this.matchService.getCommentary(match_id).then((data: Array<RawCommentary>) => {
+            this.commentaryList = data;            
         }, (err) => {
             console.log(err);
             this.toastService.presentToastWithOptions("Failed to fetch Commentary", "danger");
         })
     }
 
+    getReversedArray(array: Array<RawCommentary>) {
+        return array.reverse();
+    }
+
     back() {
         this.location.back();
     }

src/app/services/match.service.ts

@@ -22,7 +22,7 @@ export class MatchService {
     getFixtures() {
         return this.http.get(BASE_URL + '/fixtures/').toPromise();
     }
-
+    // 200556
     getMatchDetails(id: number | string) {
         return this.http.get(BASE_URL + '/match/' + id).toPromise();
     }

src/index.html

@@ -24,30 +24,6 @@
 <body>
     <app-root></app-root>
     <noscript>Please enable JavaScript to continue using this application.</noscript>
-
-    <!-- The core Firebase JS SDK is always required and must be listed first -->
-    <!-- <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script> -->
-
-    <!-- TODO: Add SDKs for Firebase products that you want to use
-        https://firebase.google.com/docs/web/setup#available-libraries -->
-    <!-- <script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-analytics.js"></script> -->
-
-    <!-- <script>
-    // Your web app's Firebase configuration
-    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-    var firebaseConfig = {
-        apiKey: "AIzaSyCYlFdGEsSA3bPlYYJMh3TcMiHzAUK2his",
-        authDomain: "kxip-21.firebaseapp.com",
-        projectId: "kxip-21",
-        storageBucket: "kxip-21.appspot.com",
-        messagingSenderId: "5602499136",
-        appId: "1:5602499136:web:57b81f812e2cbf4b419da5",
-        measurementId: "G-4KDJZFCZ59"
-    };
-    // Initialize Firebase
-    firebase.initializeApp(firebaseConfig);
-    firebase.analytics();
-    </script> -->
 </body>
 
 </html>