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

<ion-content *ngIf="currentMatch">

    <section class="header-with-action-buttons">
        <div class="nav">
            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
        </div>
        <header> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }} <br> 
            <span> {{ currentMatch.Matchdetail.Venue.Name }} </span> </header>
        <div class="action">
            <button> <ion-icon name="share-social"></ion-icon> </button>
        </div>
    </section>
    
    <div class="segment-holder">
        <section class="segments" [ngClass]="{'active': selectedSegment === 'MATCH' }">
            <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
            <button (click)="selectedSegment = 'MATCH'"> Match </button>
        </section>
    </div>


    <div class="score-container" *ngIf="selectedSegment === 'SCORE' && currentMatch.Innings">
        
        <section class="score-card" *ngFor="let inning of getReversedArray(currentMatch.Innings)">
        
            <header>
                <h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5>
                <p> {{ inning.Total }}/{{ inning.Wickets }} <span> ({{ inning.Overs }}) </span> </p>
            </header>
    
            <div class="container">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Batsman
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                Balls
                            </th>
                            <th>
                                6s
                            </th>
                            <th>
                                4s
                            </th>
                            <th>
                                SR
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container *ngFor="let batsman of inning.Batsmen">
                            <tr>
                                <td>
                                    <label> {{ currentMatch.Teams[inning.Battingteam].Players[batsman.Batsman].Name_Full }} </label> <br>
                                    <span> {{ batsman.Howout }} </span>
                                </td>
            
                                <td>
                                    {{ batsman.Runs }}
                                </td>
            
                                <td>
                                    {{ batsman.Balls }}
                                </td>
            
                                <td>
                                    {{ batsman.Sixes }}
                                </td>
            
                                <td>
                                    {{ batsman.Fours }}
                                </td>
            
                                <td>
                                    {{ batsman.Strikerate }}
                                </td>
                            </tr>
                        </ng-container>                        
                    </tbody>
                </table>
            </div>

            <br>

            <div class="container">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Bowler
                            </th>
                            <th>
                                Wickets
                            </th>
                            <th>
                                Overs
                            </th>
                            <th>
                                Dots
                            </th>
                            <th>
                                Runs
                            </th>
                            <th>
                                Economy
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <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>
                    </tbody>
                </table>
            </div>
        </section>

    </div>

    <ng-container *ngIf="selectedSegment === 'MATCH'">
        <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>
            
            <ul *ngFor="let list of getReversedArray(commentaryList)">
                <header>
                    <h5> Innings #{{ list.InningNo }}  </h5>
                </header>

                <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" *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>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    
        <div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">
            <button (click)="selectedRoster = 'HOME'"> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} </button>
            <button class="live" (click)="selectedRoster = 'LIVE'"> <span></span> </button>
            <button (click)="selectedRoster = 'AWAY'"> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }} </button>
        </div>

        <section class="player-list" *ngIf="selectedRoster === 'HOME'">
            <ul>
                <li *ngFor="let player of getArrayOfPlayers(currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players)" (click)="selectPlayerDetails(player)">
                     <label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Position }} </label>
                     <div class="details">
                        <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Name_Full }} </h4>
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '4'" src="assets/icons/gloves.png">
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '1'" src="assets/icons/batsman.png">
                        <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Players[player].Skill === '2'" src="assets/icons/ball.png">
                     </div>
                </li>
            </ul>
        </section>
    
        <section class="player-list" *ngIf="selectedRoster === 'AWAY'">
            <ul>
                <li *ngFor="let player of getArrayOfPlayers(currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players)" (click)="selectPlayerDetails(player)">
                    <label> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Position }} </label>
                    <div class="details">
                       <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Name_Full }} </h4>
                       <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '4'" src="assets/icons/gloves.png">
                       <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '1'" src="assets/icons/batsman.png">
                       <img *ngIf="currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Players[player].Skill === '2'" src="assets/icons/ball.png">
                    </div>
               </li>
            </ul>
        </section>
    </ng-container>
    
    <section class="player-details" *ngIf="isPlayerSelected">
        <button class="close-button" (click)="isPlayerSelected = false"> 
            <ion-icon name="close-outline"></ion-icon> 
        </button>
        <app-player-details [playerId]="selectedPlayer"></app-player-details>
    </section>

</ion-content>