diff --git a/src/app/components/player-details/player-details.component.html b/src/app/components/player-details/player-details.component.html index b7ecd1b..bd3f5cd 100644 --- a/src/app/components/player-details/player-details.component.html +++ b/src/app/components/player-details/player-details.component.html @@ -1,87 +1,120 @@ -
+
- -
-
-
- -
-
- -
-
- -

KL Rahul

+
+

{{ playerDetails.name }}

-
Batsman,
Wicket Keeper
+
{{ playerDetails.player_skill.text }}
- -
- -
-
+ + + +
+

{{ stat.comp_type }}

+
-
    -
  • - -
    26
    -
    • - -
  • - -
    64
    -
    • - -
  • - -
    18
    -
    • -
- -
-
-

Now discussing

-
- -
    -
  • - -

    - KL Rahul wins the player of the season 2018 confirms BCCI -

    - -
    • - -
  • - -

    - KL Rahul planning to head back to RCB -

    - -
    • -
-
+
    +
  • + +
    {{ stat.overall.batting_record.hundreds }}
    +
    • + +
  • + +
    {{ stat.overall.batting_record.fifties }}
    +
    • + +
  • + +
    {{ stat.overall.batting_record.strike_rate }}
    +
    • +
+
    +
  • + +
    {{ stat.overall.bowling_record.wickets }}
    +
    • + +
  • + +
    {{ stat.overall.bowling_record.wickets }}
    +
    • + +
  • + +
    {{ stat.overall.bowling_record.economy_rate }}
    +
    • +
+ + +
ABOUT
  • -

    KL Rahul

    +

    {{ playerDetails.fullname }}

  • - -

    26

    + +

    {{ playerDetails.nick_name }}

  • - -

    Mangaluru

    + +

    {{ playerDetails.dob }}

  • - -

    43.64

    + +

    {{ playerDetails.place_birth }}

    +
    • +
  • + +

+ + + +
+

{{ stat.comp_type }}

+
+ +
    +
  • + +
    {{ stat.overall.batting_record.hundreds }}
    +
    • + +
  • + +
    {{ stat.overall.batting_record.fifties }}
    +
    • + +
  • + +
    {{ stat.overall.batting_record.strike_rate }}
    +
    • +
+ +
    +
  • + +
    {{ stat.overall.bowling_record.wickets }}
    +
    • + +
  • + +
    {{ stat.overall.bowling_record.wickets }}
    +
    • + +
  • + +
    {{ stat.overall.bowling_record.economy_rate }}
    +
    • +
+ + +
\ No newline at end of file diff --git a/src/app/components/player-details/player-details.component.scss b/src/app/components/player-details/player-details.component.scss index fc34b2b..d17a4c0 100644 --- a/src/app/components/player-details/player-details.component.scss +++ b/src/app/components/player-details/player-details.component.scss @@ -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; diff --git a/src/app/components/player-details/player-details.component.ts b/src/app/components/player-details/player-details.component.ts index 4fd6c8b..6375791 100644 --- a/src/app/components/player-details/player-details.component.ts +++ b/src/app/components/player-details/player-details.component.ts @@ -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; + }; + stats: { + format: Array; + }; +} + +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"); + }); + } } diff --git a/src/app/live/live.page.ts b/src/app/live/live.page.ts index ded2bb3..cd224a5 100644 --- a/src/app/live/live.page.ts +++ b/src/app/live/live.page.ts @@ -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 }]); } } diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index 2ef39b5..004315c 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -1,11 +1,11 @@ - +
-
{{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }}
- Live from {{ matchStats.stadium }} Stadium
+
{{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Short }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Short }}
+ {{ currentMatch.Matchdetail.Venue.Name }}
@@ -20,7 +20,8 @@
-
+ + -
+
@@ -222,23 +223,21 @@
- + - +
@@ -246,30 +245,25 @@
- - -
- +
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index b1739d8..c98dd28 100644 --- a/src/app/match-details/match-details.page.scss +++ b/src/app/match-details/match-details.page.scss @@ -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; diff --git a/src/app/match-details/match-details.page.ts b/src/app/match-details/match-details.page.ts index f3cc830..574a3ce 100644 --- a/src/app/match-details/match-details.page.ts +++ b/src/app/match-details/match-details.page.ts @@ -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 -}; - +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); + } + } diff --git a/src/app/services/match.service.ts b/src/app/services/match.service.ts index a06cdce..a1f5c0b 100644 --- a/src/app/services/match.service.ts +++ b/src/app/services/match.service.ts @@ -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(); + } + }