@@ -1,87 +1,120 @@ | |||
<div class="container"> | |||
<div class="container" *ngIf="playerDetails"> | |||
<section class="player-primary-data"> | |||
<section class="details"> | |||
<div class="teams-holder"> | |||
<figure> | |||
<img src="assets/home-team/KXIP.svg" alt=""> | |||
</figure> | |||
<figure> | |||
<img src="assets/home-team/india.png" alt=""> | |||
</figure> | |||
</div> | |||
<h2 class="name"> KL Rahul </h2> | |||
<section class="details"> | |||
<h2 class="name"> {{ playerDetails.name }} </h2> | |||
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> Batsman, <br> Wicket Keeper </div> | |||
<div class="role"> <ion-icon name="shirt-outline"></ion-icon> {{ playerDetails.player_skill.text }} </div> | |||
</section> | |||
<figure class="player-image"> | |||
<img src="assets/home-team/player.png" alt=""> | |||
</figure> | |||
</section> | |||
<ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;"> | |||
<ng-container *ngIf="i === 2"> | |||
<header class="stats-header"> | |||
<h4> {{ stat.comp_type }} </h4> | |||
</header> | |||
<ul class="statistics"> | |||
<li> | |||
<label> Age </label> | |||
<h5> 26 </h5> | |||
</li> | |||
<li> | |||
<label> Games </label> | |||
<h5> 64 </h5> | |||
</li> | |||
<li> | |||
<label> Centuries </label> | |||
<h5> 18 </h5> | |||
</li> | |||
</ul> | |||
<section class="news"> | |||
<header> | |||
<span></span> <h4> Now discussing </h4> | |||
</header> | |||
<ul> | |||
<li> | |||
<label> 30 <span> Jan </span> </label> | |||
<p> | |||
KL Rahul wins the player of the season 2018 confirms BCCI | |||
</p> | |||
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button> | |||
</li> | |||
<li> | |||
<label> 22 <span> Oct </span> </label> | |||
<p> | |||
KL Rahul planning to head back to RCB | |||
</p> | |||
<button class="share-button"> <ion-icon name="share-social-outline"></ion-icon> </button> | |||
</li> | |||
</ul> | |||
</section> | |||
<ul class="statistics" *ngIf="stat.overall.batting_record"> | |||
<li> | |||
<label> 100s </label> | |||
<h5> {{ stat.overall.batting_record.hundreds }} </h5> | |||
</li> | |||
<li> | |||
<label> 50s </label> | |||
<h5> {{ stat.overall.batting_record.fifties }} </h5> | |||
</li> | |||
<li> | |||
<label> SR </label> | |||
<h5> {{ stat.overall.batting_record.strike_rate }} </h5> | |||
</li> | |||
</ul> | |||
<ul class="statistics" *ngIf="stat.overall.bowling_record"> | |||
<li> | |||
<label> Wickets </label> | |||
<h5> {{ stat.overall.bowling_record.wickets }} </h5> | |||
</li> | |||
<li> | |||
<label> Maidens </label> | |||
<h5> {{ stat.overall.bowling_record.wickets }} </h5> | |||
</li> | |||
<li> | |||
<label> Economy </label> | |||
<h5> {{ stat.overall.bowling_record.economy_rate }} </h5> | |||
</li> | |||
</ul> | |||
</ng-container> | |||
</ng-container> | |||
<section class="about"> | |||
<header> ABOUT </header> | |||
<ul> | |||
<li> | |||
<label> Full name </label> | |||
<p> KL Rahul </p> | |||
<p> {{ playerDetails.fullname }} </p> | |||
</li> | |||
<li> | |||
<label> Age </label> | |||
<p> 26 </p> | |||
<label> Nick Name </label> | |||
<p> {{ playerDetails.nick_name }} </p> | |||
</li> | |||
<li> | |||
<label> Native </label> | |||
<p> Mangaluru </p> | |||
<label> DOB </label> | |||
<p> {{ playerDetails.dob }} </p> | |||
</li> | |||
<li> | |||
<label> Avg. Run rate </label> | |||
<p> 43.64 </p> | |||
<label> POB </label> | |||
<p> {{ playerDetails.place_birth }} </p> | |||
</li> | |||
<li *ngIf="playerDetails.writeup"> | |||
<label> Description </label> | |||
<p [innerHTML]="playerDetails.writeup"></p> | |||
</li> | |||
</ul> | |||
</section> | |||
<ng-container *ngFor="let stat of playerDetails.stats.format;let i = index;"> | |||
<ng-container *ngIf="i !== 2"> | |||
<header class="stats-header"> | |||
<h4> {{ stat.comp_type }} </h4> | |||
</header> | |||
<ul class="statistics" *ngIf="stat.overall.batting_record"> | |||
<li> | |||
<label> 100s </label> | |||
<h5> {{ stat.overall.batting_record.hundreds }} </h5> | |||
</li> | |||
<li> | |||
<label> 50s </label> | |||
<h5> {{ stat.overall.batting_record.fifties }} </h5> | |||
</li> | |||
<li> | |||
<label> SR </label> | |||
<h5> {{ stat.overall.batting_record.strike_rate }} </h5> | |||
</li> | |||
</ul> | |||
<ul class="statistics" *ngIf="stat.overall.bowling_record"> | |||
<li> | |||
<label> Wickets </label> | |||
<h5> {{ stat.overall.bowling_record.wickets }} </h5> | |||
</li> | |||
<li> | |||
<label> Maidens </label> | |||
<h5> {{ stat.overall.bowling_record.wickets }} </h5> | |||
</li> | |||
<li> | |||
<label> Economy </label> | |||
<h5> {{ stat.overall.bowling_record.economy_rate }} </h5> | |||
</li> | |||
</ul> | |||
</ng-container> | |||
</ng-container> | |||
</div> |
@@ -3,6 +3,7 @@ | |||
.container { | |||
background: linear-gradient(45deg, darken($brand-blue, 15%), darken($brand-blue, 20%) 80%); | |||
padding: 40px 0; | |||
width: 100vw; | |||
} | |||
.player-primary-data { | |||
@@ -10,57 +11,12 @@ | |||
width: 95%; | |||
padding-left: 5%; | |||
position: relative; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-image: url('../../../assets/home-team/KXIP-lion-white.svg'); | |||
background-size: contain; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
opacity: 0.1; | |||
} | |||
.details { | |||
width: 50%; | |||
width: 100%; | |||
position: relative; | |||
} | |||
.teams-holder { | |||
position: relative; | |||
z-index: 0; | |||
display: flex; | |||
justify-content: flex-start; | |||
figure { | |||
width: 50px; | |||
height: 50px; | |||
border-radius: 50%; | |||
position: relative; | |||
z-index: 1; | |||
margin: 0; | |||
display: block; | |||
overflow: hidden; | |||
box-shadow: 0px 0px 5px darken($brand-blue, 20%); | |||
&:nth-child(2) { | |||
z-index: 0; | |||
transform: translateX(-10px); | |||
} | |||
img { | |||
width: 100%; | |||
height: 100%; | |||
display: block; | |||
transform: scale(1.5); | |||
} | |||
} | |||
} | |||
.name { | |||
font-size: 2rem; | |||
font-weight: 700; | |||
@@ -86,19 +42,21 @@ | |||
color: lighten($brand-red, 15%); | |||
} | |||
} | |||
} | |||
.player-image { | |||
width: 50%; | |||
display: block; | |||
height: 40vh; | |||
img { | |||
display: block; | |||
object-fit: contain; | |||
width: 100%; | |||
height: 100%; | |||
object-position: bottom; | |||
} | |||
.stats-header { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
width: 100%; | |||
padding: 0 5%; | |||
h4 { | |||
color: $green; | |||
font-size: 1.5rem; | |||
font-weight: 500; | |||
letter-spacing: 0.5px; | |||
margin: 0; | |||
} | |||
} | |||
@@ -107,9 +65,8 @@ | |||
width: 100%; | |||
padding: 0 5%; | |||
list-style: none; | |||
margin: 0 auto -30px auto; | |||
margin: 20px auto; | |||
justify-content: space-between; | |||
transform: translateY(-50px); | |||
z-index: 1; | |||
position: relative; | |||
background-color: rgba(darken($brand-blue, 20%), 0.8); | |||
@@ -120,11 +77,8 @@ | |||
height: 27vw; | |||
background-color: rgba($brand-blue, 0.8); | |||
border: 1px solid rgba($blue-grey, 0.3); | |||
display: flex; | |||
border-radius: 10px; | |||
color: white; | |||
align-items: flex-end; | |||
justify-content: space-between; | |||
padding: 10px; | |||
overflow: hidden; | |||
position: relative; | |||
@@ -143,115 +97,18 @@ | |||
label { | |||
font-weight: 500; | |||
font-size: 0.8rem; | |||
align-self: flex-start; | |||
width: 50%; | |||
overflow: visible; | |||
white-space: nowrap; | |||
position: relative; | |||
position: absolute; | |||
top: 10px; | |||
left: 10px; | |||
} | |||
h5 { | |||
width: 50%; | |||
white-space: nowrap; | |||
overflow: visible; | |||
margin: 0; | |||
font-weight: 700; | |||
font-size: 1.8rem; | |||
align-self: flex-end; | |||
text-align: right; | |||
position: relative; | |||
} | |||
} | |||
.news { | |||
width: 90%; | |||
margin: 0 auto 20px auto; | |||
header { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
h4 { | |||
color: lighten($green, 10%); | |||
font-size: 0.8rem; | |||
font-weight: 500; | |||
letter-spacing: 0.5px; | |||
margin: 0; | |||
} | |||
span { | |||
margin-right: 10px; | |||
border: 7px solid lighten($green, 10%); | |||
border-radius: 50%; | |||
height: 25px; | |||
width: 25px; | |||
background-color: darken($brand-blue, 20%); | |||
} | |||
} | |||
ul { | |||
list-style: none; | |||
padding: 0; | |||
background-color: darken($brand-blue, 10%); | |||
box-shadow: 0px 0px 10px darken($brand-blue, 20%); | |||
border-radius: 10px; | |||
overflow: hidden; | |||
li { | |||
width: 90%; | |||
margin: 0 auto; | |||
padding: 15px 0px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
border-bottom: 1px solid rgba($blue-grey, 0.2); | |||
&:last-child { | |||
border-bottom: none; | |||
} | |||
} | |||
label { | |||
width: 40px; | |||
text-align: center; | |||
color: white; | |||
font-size: 0.8rem; | |||
display: block; | |||
line-height: 1.3; | |||
span { | |||
color: lighten($brand-blue, 10%); | |||
font-size: 0.8rem; | |||
display: block; | |||
} | |||
} | |||
p { | |||
width: calc(100% - 100px); | |||
font-size: 0.8rem; | |||
color: white; | |||
font-weight: 500; | |||
line-height: 1.5; | |||
margin: 0; | |||
} | |||
.share-button { | |||
width: 30px; | |||
height: 30px; | |||
border: 1px solid lighten($brand-blue, 10%); | |||
background-color: rgba(lighten($brand-blue, 10%), 0.2); | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
margin-left: 10px; | |||
ion-icon { | |||
color: lighten($brand-blue, 10%); | |||
font-size: 15px; | |||
} | |||
} | |||
font-size: 1.5rem; | |||
position: absolute; | |||
right: 10px; | |||
bottom: 10px; | |||
} | |||
} | |||
@@ -261,7 +118,7 @@ | |||
border-radius: 10px; | |||
overflow: hidden; | |||
width: 90%; | |||
margin: 0 auto; | |||
margin: 0 auto 40px auto; | |||
padding: 0px 0px 5px 0px; | |||
header { | |||
@@ -269,7 +126,7 @@ | |||
font-weight: 500; | |||
color: white; | |||
padding: 15px 5%; | |||
border-bottom: 1px solid rgba($blue-grey, 0.2); | |||
border-bottom: 1px solid lighten($brand-blue, 5%); | |||
margin: 0; | |||
} | |||
@@ -281,12 +138,9 @@ | |||
} | |||
li { | |||
padding: 10px 5px; | |||
display: flex; | |||
padding: 20px 10px; | |||
width: 100%; | |||
align-items: center; | |||
justify-content: space-between; | |||
border-bottom: 1px solid rgba($blue-grey, 0.2); | |||
border-bottom: 1px solid lighten($brand-blue, 5%); | |||
text-align: left; | |||
&:last-child { | |||
@@ -295,15 +149,15 @@ | |||
} | |||
label { | |||
color: lighten($brand-blue, 10%); | |||
font-size: 0.7rem; | |||
color: lighten($brand-blue, 20%); | |||
font-size: 1rem; | |||
display: block; | |||
line-height: 1.3; | |||
width: 100px; | |||
display: block; | |||
margin-bottom: 10px; | |||
} | |||
p { | |||
width: calc(100% - 100px); | |||
font-size: 0.9rem; | |||
color: white; | |||
font-weight: 500; | |||
@@ -1,4 +1,110 @@ | |||
import { Component, OnInit } from '@angular/core'; | |||
import { Component, OnInit, Input } from '@angular/core'; | |||
import { MatchService } from '../../services/match.service'; | |||
import { ToastService } from '../../services/toast.service'; | |||
interface HighestScoreDetails { | |||
score: { | |||
is_no: string; | |||
balls_faced: string; | |||
text: string; | |||
}; | |||
match_id: string; | |||
match_date: string; | |||
vs: IdentifiableData; | |||
} | |||
interface BattingRecord { | |||
matches: string; | |||
innings: string; | |||
not_outs: string; | |||
runs: string; | |||
balls_faced: string; | |||
hundreds: string; | |||
fifties: string; | |||
fours: string; | |||
sixes: string; | |||
average: string; | |||
strike_rate: string; | |||
hs: HighestScoreDetails; | |||
} | |||
interface BestBowlingDetails { | |||
figure: { | |||
wickets: string; | |||
runs_given: string; | |||
text: string; | |||
}; | |||
match_id: string; | |||
match_date: string; | |||
vs: HighestScoreDetails; | |||
} | |||
interface BowlingRecord { | |||
matches: string; | |||
innings: string; | |||
overs: string; | |||
balls_bowled: string; | |||
maidens: string; | |||
runs: string; | |||
wickets: string; | |||
average: string; | |||
strike_rate: string; | |||
economy_rate: string; | |||
four_wk_hauls: string; | |||
five_wk_hauls: string; | |||
best_bowling: BestBowlingDetails; | |||
} | |||
interface FieldingRecord { | |||
catches: string; | |||
stumpings: string; | |||
run_outs: string; | |||
} | |||
interface StatsForFormat { | |||
comp_type_id: string; | |||
comp_type: string; | |||
rankings: { | |||
bat: string; | |||
bowl: string; | |||
}; | |||
overall: { | |||
batting_record: BattingRecord; | |||
bowling_record: BowlingRecord; | |||
fielding_record: FieldingRecord; | |||
} | |||
} | |||
interface RawPlayerTeamDetails { | |||
id: string; | |||
active: string; | |||
is_primary: string; | |||
is_international: string; | |||
text: string; | |||
} | |||
interface RawPlayerProfile { | |||
player_id: string; | |||
last_updated: string; | |||
fullname: string; | |||
name: string; | |||
dob: string; | |||
date_of_death: string; | |||
place_birth: string; | |||
nick_name: string; | |||
majorteams: { | |||
team: Array<RawPlayerTeamDetails>; | |||
}; | |||
stats: { | |||
format: Array<StatsForFormat>; | |||
}; | |||
} | |||
export interface RawPlayerData { | |||
profile: RawPlayerProfile; | |||
} | |||
@Component({ | |||
selector: 'app-player-details', | |||
@@ -6,9 +112,22 @@ import { Component, OnInit } from '@angular/core'; | |||
styleUrls: ['./player-details.component.scss'], | |||
}) | |||
export class PlayerDetailsComponent implements OnInit { | |||
@Input() playerId: string; | |||
playerDetails: RawPlayerData; | |||
constructor() { } | |||
constructor( | |||
private matchService: MatchService, | |||
private toastService: ToastService | |||
) { } | |||
ngOnInit() {} | |||
ngOnInit() { | |||
this.matchService.getPlayerDetails(this.playerId).then((data: RawPlayerData) => { | |||
console.log(data); | |||
this.playerDetails = data; | |||
}, (err) => { | |||
console.log(err); | |||
this.toastService.presentToastWithOptions("Failed to fetch player details", "danger"); | |||
}); | |||
} | |||
} |
@@ -278,7 +278,7 @@ export class LivePage implements OnInit { | |||
} | |||
showMatchDetails() { | |||
this.router.navigate(['/match-details']); | |||
this.router.navigate(['/match-details', { match_id: this.currentMatch.Matchdetail.Match.Id }]); | |||
} | |||
} |
@@ -1,11 +1,11 @@ | |||
<ion-content *ngIf="matchStats" [scrollEvents]="true"> | |||
<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> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br> | |||
<span> Live from {{ matchStats.stadium }} Stadium </span> </header> | |||
<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> | |||
@@ -20,7 +20,8 @@ | |||
<div class="score-container" *ngIf="selectedSegment === 'SCORE'"> | |||
<section class="score-card"> | |||
<!-- <section class="score-card"> | |||
<header> | |||
<img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </h5> | |||
@@ -82,10 +83,10 @@ | |||
</table> | |||
</div> | |||
</section> | |||
</section> --> | |||
<section class="score-card"> | |||
<!-- <section class="score-card"> | |||
<header> | |||
<img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5> | |||
@@ -146,7 +147,7 @@ | |||
</table> | |||
</div> | |||
</section> | |||
</section> --> | |||
</div> | |||
@@ -222,23 +223,21 @@ | |||
</div> | |||
<div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }"> | |||
<button (click)="selectedRoster = 'HOME'"> {{ matchData.home.name }} </button> | |||
<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'"> {{ matchData.away.name }} </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 matchData.home.players" (click)="selectPlayerDetails()"> | |||
<label> {{ player.jersey }} </label> | |||
<img [src]="player.image" class="player-image"> | |||
<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> {{ player.name }} </h4> | |||
<img *ngIf="player.isCaptain" src="assets/icons/captain-band.png"> | |||
<img *ngIf="player.isKeeper" src="assets/icons/gloves.png"> | |||
<img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png"> | |||
<img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png"> | |||
<img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png"> | |||
<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/captain-band.png"> --> | |||
<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> | |||
@@ -246,30 +245,25 @@ | |||
<section class="player-list" *ngIf="selectedRoster === 'AWAY'"> | |||
<ul> | |||
<li *ngFor="let player of matchData.away.players" (click)="selectPlayerDetails()"> | |||
<label> {{ player.jersey }} </label> | |||
<img [src]="player.image" class="player-image"> | |||
<div class="details"> | |||
<h4> {{ player.name }} </h4> | |||
<img *ngIf="player.isCaptain" src="assets/icons/captain-band.png"> | |||
<img *ngIf="player.isKeeper" src="assets/icons/gloves.png"> | |||
<img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png"> | |||
<img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png"> | |||
<img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png"> | |||
</div> | |||
</li> | |||
<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/captain-band.png"> --> | |||
<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></app-player-details> | |||
<app-player-details [playerId]="selectedPlayer"></app-player-details> | |||
</section> | |||
</ion-content> |
@@ -85,14 +85,30 @@ | |||
} | |||
.player-details { | |||
position: relative; | |||
position: fixed; | |||
z-index: 2; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
box-shadow: 0px 0px 5px darken($brand-blue, 30%); | |||
background-color: darken($brand-blue, 30%); | |||
left: 0; | |||
top: 0; | |||
top: 10%; | |||
height: 90%; | |||
overflow: auto; | |||
transform: translateY(50vh); | |||
opacity: 0; | |||
animation: riseUp 0.3s forwards; | |||
@keyframes riseUp { | |||
from { | |||
transform: translateY(50vh); | |||
opacity: 0; | |||
} to { | |||
transform: translateY(0vh); | |||
opacity: 1; | |||
} | |||
} | |||
.close-button { | |||
display: block; | |||
@@ -418,6 +434,7 @@ | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
padding-bottom: 80px; | |||
} | |||
li { | |||
@@ -438,6 +455,7 @@ | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 50%; | |||
margin-right: 10px; | |||
} | |||
.player-image { | |||
@@ -461,7 +479,7 @@ | |||
margin: 0; | |||
font-size: 1rem; | |||
color: white; | |||
max-width: calc(100% - 80px); | |||
max-width: calc(100% - 40px); | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
@@ -1,26 +1,9 @@ | |||
import { Component, OnInit, ViewChild } from '@angular/core'; | |||
import { Component, OnInit } from '@angular/core'; | |||
import { Location } from '@angular/common'; | |||
import { ActivatedRoute } from '@angular/router'; | |||
import * as faker from 'faker'; | |||
import { IonContent } from '@ionic/angular'; | |||
type IPlayer = { | |||
name: string, | |||
image: string, | |||
jersey: number, | |||
isCaptain?: boolean, | |||
isKeeper?: boolean, | |||
isTopScorer?: boolean, | |||
role: string, | |||
}; | |||
type ITeam = { | |||
name: string, | |||
image: string, | |||
players: Array<IPlayer> | |||
}; | |||
import { MatchService } from '../services/match.service'; | |||
import { ToastService } from '../services/toast.service'; | |||
import { RawMatchData } from '../live/live.page'; | |||
@Component({ | |||
selector: 'app-match-details', | |||
@@ -28,91 +11,46 @@ type ITeam = { | |||
styleUrls: ['./match-details.page.scss'], | |||
}) | |||
export class MatchDetailsPage implements OnInit { | |||
@ViewChild(IonContent, { static: false }) content: IonContent; | |||
isPlayerSelected: boolean = false; | |||
isHomeTeamSelected: boolean = true; | |||
selectedSegment: 'MATCH' | 'SCORE' = 'MATCH'; | |||
selectedRoster: 'LIVE' | 'HOME' | 'AWAY' = 'LIVE'; | |||
roles = ['BOWLER', 'BATSMAN']; | |||
currentMatch: RawMatchData; | |||
matchData: { | |||
home: ITeam, | |||
away: ITeam, | |||
}; | |||
matchStats: { | |||
stadium: string, | |||
homeTeam: any, | |||
awayTeam: any | |||
}; | |||
selectedPlayer: string = ''; | |||
constructor( | |||
private location: Location, | |||
private route: ActivatedRoute, | |||
private matchService: MatchService, | |||
private toastService: ToastService | |||
) { } | |||
scrollToPlayerDetails() { | |||
let details: any = document.querySelector('.player-details'); | |||
this.content.scrollToPoint(0, (details.offsetTop - 200), 1000); | |||
} | |||
ngOnInit() { | |||
this.matchStats = JSON.parse(this.route.snapshot.paramMap.get('matchStats')); | |||
this.matchData = { | |||
home : { | |||
name: 'KXIP', | |||
image: 'assets/home-team/KXIP.svg', | |||
players: [] | |||
}, | |||
away: { | |||
name: 'MI', | |||
image: 'assets/logos/mi.svg', | |||
players: [] | |||
} | |||
}; | |||
let match_id = JSON.parse(this.route.snapshot.paramMap.get('match_id')); | |||
for (let i = 1; i < 12; i += 1) { | |||
this.matchData.home.players.push({ | |||
name: faker.name.findName(), | |||
image: 'assets/home-team/roster/' + i.toString() + '.png', | |||
jersey: Math.ceil(Math.random() * (99 - 1)), | |||
isCaptain: i == 3? true : false, | |||
isKeeper: i === 5? true : false, | |||
role: this.roles[Math.floor(Math.random() * (2 - 0))], | |||
isTopScorer: i === 3? true : false | |||
}); | |||
this.matchData.away.players.push({ | |||
name: faker.name.findName(), | |||
image: 'assets/mi-roster/' + i.toString() + '.png', | |||
jersey: Math.ceil(Math.random() * (99 - 1)), | |||
isCaptain: i == 5? true : false, | |||
isKeeper: i === 4? true : false, | |||
role: this.roles[Math.floor(Math.random() * (2 - 0))] | |||
}); | |||
} | |||
this.matchService.getMatchDetails(match_id).then((match_data: RawMatchData) => { | |||
this.currentMatch = match_data; | |||
}); | |||
} | |||
back() { | |||
this.location.back(); | |||
} | |||
selectPlayerDetails() { | |||
selectPlayerDetails(playerId: string) { | |||
this.selectedPlayer = playerId; | |||
this.isPlayerSelected = true; | |||
setTimeout(() => { | |||
this.scrollToPlayerDetails(); | |||
}, 100); | |||
} | |||
limitDecimals(value: number) { | |||
return value.toPrecision(2); | |||
} | |||
getArrayOfPlayers(players) { | |||
return Object.keys(players); | |||
} | |||
} |
@@ -31,4 +31,8 @@ export class MatchService { | |||
return this.http.get(BASE_URL + '/standings/').toPromise(); | |||
} | |||
getPlayerDetails(id: number | string) { | |||
return this.http.get(BASE_URL + '/player/' + id).toPromise(); | |||
} | |||
} |