kj
/
kxip-app
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

Commentary API connection + data integration

master
kj1352 4 lat temu
rodzic
083829c2e9
commit
c42c87efb1
5 zmienionych plików z 134 dodań i 120 usunięć
Widok podzielony
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +3
    -3
      src/app/live/live.page.html
  2. +71
    -116
      src/app/match-details/match-details.page.html
  3. +9
    -1
      src/app/match-details/match-details.page.scss
  4. +47
    -0
      src/app/match-details/match-details.page.ts
  5. +4
    -0
      src/app/services/match.service.ts

+ 3
- 3
src/app/live/live.page.html Wyświetl plik

@@ -45,7 +45,7 @@
<thead>
<tr>
<th>
Player
Batsman
</th>
<th>
Score
@@ -57,9 +57,9 @@
</thead>
<tbody>
<ng-container *ngFor="let batsman of inning.Batsmen">
<tr *ngIf="batsman.Runs >= 0">
<tr *ngIf="batsman.Runs !== ''">
<td>
{{ currentMatch.Teams[inning.Battingteam].Players[Batsman].Name_Full }} <br>
{{ currentMatch.Teams[inning.Battingteam].Players[batsman].Name_Full }} <br>
<span> {{ batsman.Howout }} </span>
</td>


+ 71
- 116
src/app/match-details/match-details.page.html Wyświetl plik

@@ -19,13 +19,13 @@
</div>


<div class="score-container" *ngIf="selectedSegment === 'SCORE'">
<div class="score-container" *ngIf="selectedSegment === 'SCORE' && currentMatch.Innings">
<!-- <section class="score-card">
<section class="score-card" *ngFor="let inning of currentMatch.Innings">
<header>
<img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </h5>
<p> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </p>
<h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5>
<p> {{ inning.Total }}/{{ inning.Wickets }} <span> ({{ inning.Overs }}) </span> </p>
</header>
<div class="container">
@@ -33,7 +33,7 @@
<thead>
<tr>
<th>
Player
Batsman
</th>
<th>
Score
@@ -48,106 +48,102 @@
4s
</th>
<th>
RR
SR
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let player of matchStats.awayTeam.batting">
<td>
<label> {{ player.name }} </label> <br>
<span> {{ player.wicketTo }} </span>
</td>
<td>
{{ player.score }}
</td>
<td>
{{ player.ballsPlayed }}
</td>
<td>
{{ player.sixes }}
</td>
<td>
{{ player.boundaries }}
</td>
<td>
{{ limitDecimals(player.score / player.ballsPlayed) }}
</td>
</tr>
<ng-container *ngIf="batsman.Runs !== ''">
<tr *ngFor="let batsman of inning.Batsmen">
<td>
<label> {{ currentMatch.Teams[inning.Battingteam].Players[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>
</section> -->
<!-- <section class="score-card">
<header>
<img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5>
<p> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </p>
</header>

<br>

<div class="container">
<table>
<thead>
<tr>
<th>
Player
Bowler
</th>
<th>
Score
Wickets
</th>
<th>
Balls
Overs
</th>
<th>
6s
Dots
</th>
<th>
4s
Runs
</th>
<th>
RR
Economy
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let player of matchStats.homeTeam.batting">
<ng-container *ngIf="bowler.Overs !== ''">

</ng-container>
<tr *ngFor="let bowler of inning.Bowlers">
<td>
<label> {{ player.name }} </label> <br>
<span> {{ player.wicketTo }} </span>
<label> {{ currentMatch.Teams[inning.Battingteam].Players[bowler].Name_Full }} </label>
</td>
<td>
{{ player.score }}
{{ bowler.Wickets }}
</td>
<td>
{{ player.ballsPlayed }}
{{ bowler.Overs }}
</td>
<td>
{{ player.sixes }}
{{ bowler.Dots }}
</td>
<td>
{{ player.boundaries }}
{{ bowler.Runs }}
</td>
<td>
{{ limitDecimals(player.score / player.ballsPlayed) }}
{{ bowler.Economyrate }}
</td>
</tr>
</tbody>
</table>
</div>
</section> -->
</section>

</div>

@@ -158,68 +154,27 @@
<h5> Commentary </h5>
</header>

<ul>
<li>
<div class="over-data">
<label> 0.1 </label>
<span>
2
</span>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
</p>
</li>

<li>
<div class="over-data">
<label> 0.2 </label>
<span>
0
</span>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
</p>
</li>

<li>
<div class="over-data">
<label> 0.3 </label>
<span class="boundary">
4
</span>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
</p>
</li>

<li>
<ul *ngIf="commentaryList">
<li *ngFor="let commentary of commentaryList">
<div class="over-data">
<label> 0.4 </label>
<span class="six">
6
</span>
<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>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
</p>
</li>

<li>
<div class="over-data">
<label> 0.5 </label>
<span class="wicket">
W
</span>
<div class="comment">
<p>
{{ commentary.Commentary }}
</p>
<div class="small-stats">
<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>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, assumenda? Voluptas impedit in dolore amet eligendi, tempore magnam adipisci voluptatum numquam cum et nesciunt, tenetur quidem alias eaque ut animi?
</p>
</li>
</ul>
</div>
<div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">


+ 9
- 1
src/app/match-details/match-details.page.scss Wyświetl plik

@@ -62,9 +62,17 @@
}
}

p {
.comment {
width: calc(100% - 55px);
margin: 0;

p {
margin: 0;
}

.small-stats {
margin-top: 10px;
}
}
}



+ 47
- 0
src/app/match-details/match-details.page.ts Wyświetl plik

@@ -5,6 +5,44 @@ import { MatchService } from '../services/match.service';
import { ToastService } from '../services/toast.service';
import { RawMatchData } from '../live/live.page';


interface RawCommentaryForBall {
Over: string;
Id: string;
Runs: string;
ZAD: string;
Detail: string;
Isball: boolean;
Bowler: string;
Bowler_Name: string;
Batsman: string;
Batsman_Name: string;
Batsman_Style: string;
Commentary: string;
Timestamp: string;
Non_Striker: string;
Non_Striker_Name: string;
Score: string;
Batsman_Runs: string;
Bowler_Conceded_Runs: string;
Extras_Runs: string;
Ball_Speed: string;
}

export interface RawCommentary {
InningNo: string;
BattingTeam_Id: string;
BattingTeam: string;
BowlingTeam_Id: string;
BowlingTeam: string;
GameCode: string;
MatchId: string;
Timestamp: string;

Commentary: Array<RawCommentaryForBall>;
}


@Component({
selector: 'app-match-details',
templateUrl: './match-details.page.html',
@@ -21,6 +59,8 @@ export class MatchDetailsPage implements OnInit {

selectedPlayer: string = '';

commentaryList: Array<RawCommentaryForBall> = [];

constructor(
private location: Location,
private route: ActivatedRoute,
@@ -34,6 +74,13 @@ export class MatchDetailsPage implements OnInit {
this.matchService.getMatchDetails(match_id).then((match_data: RawMatchData) => {
this.currentMatch = match_data;
});

this.matchService.getCommentary(match_id).then((data: Array<RawCommentaryForBall>) => {
this.commentaryList = data;
}, (err) => {
console.log(err);
this.toastService.presentToastWithOptions("Failed to fetch Commentary", "danger");
})
}

back() {


+ 4
- 0
src/app/services/match.service.ts Wyświetl plik

@@ -35,4 +35,8 @@ export class MatchService {
return this.http.get(BASE_URL + '/player/' + id).toPromise();
}

getCommentary(id: number | string) {
return this.http.get(BASE_URL + '/commentary/' + id).toPromise();
}

}

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz