Skip to content

Commit

Permalink
Added header component, player details page and fixed routing errors
Browse files Browse the repository at this point in the history
  • Loading branch information
Leo-037 committed Jul 18, 2024
1 parent 89880be commit 28b8d42
Show file tree
Hide file tree
Showing 30 changed files with 2,297 additions and 1,705 deletions.
3,380 changes: 1,776 additions & 1,604 deletions courtsight/package-lock.json

Large diffs are not rendered by default.

40 changes: 20 additions & 20 deletions courtsight/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,36 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"@angular/animations": "^18.1.1",
"@angular/common": "^18.1.1",
"@angular/compiler": "^18.1.1",
"@angular/core": "^18.1.1",
"@angular/forms": "^18.1.1",
"@angular/platform-browser": "^18.1.1",
"@angular/platform-browser-dynamic": "^18.1.1",
"@angular/router": "^18.1.1",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primeng": "^17.18.3",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
"primeng": "^17.18.4",
"rxjs": "^7.8.1",
"tslib": "^2.6.3",
"zone.js": "~0.14.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.7",
"@angular/cli": "^18.0.7",
"@angular/compiler-cli": "^18.0.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"@angular-devkit/build-angular": "^18.1.1",
"@angular/cli": "^18.1.1",
"@angular/compiler-cli": "^18.1.1",
"@types/jasmine": "~5.1.4",
"jasmine-core": "~5.1.2",
"karma": "~6.4.3",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
},
"engines": {
"node": "^18.19",
"node": "^20.11.1",
"npm": "^9.0.0"
}
}
23 changes: 19 additions & 4 deletions courtsight/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {HomeComponent} from "./homepage/home/home.component";
import {HomeComponent as BasketHome} from "./basket/home/home.component";
import {TeamDetailsComponent} from "./basket/team-details/team-details.component";
import {MatchDetailsComponent} from "./basket/match-details/match-details.component";
import {BasketComponent} from "./basket/basket.component";
import {PlayerDetailsComponent} from "./basket/player-details/player-details.component";
import {SimpleRouterComponent} from "./shared/simple-router/simple-router.component";

export const routes: Routes = [
{
Expand All @@ -17,7 +18,7 @@ export const routes: Routes = [
},
{
path: "basketball",
component: BasketComponent,
component: SimpleRouterComponent,
title: "Basketball",
data: {breadcrumb: 'Basketball'},
children: [
Expand All @@ -29,12 +30,26 @@ export const routes: Routes = [
{
path: 'match/:id/:date',
component: MatchDetailsComponent,
title: "Match",
data: {breadcrumb: 'Match'}
},
{
path: 'team/:ticker',
component: TeamDetailsComponent,
data: {breadcrumb: 'Team'}
component: SimpleRouterComponent,
title: "Team",
data: {breadcrumb: 'Team'},
children: [
{
path: '',
component: TeamDetailsComponent,
data: {breadcrumb: ''}
},
{
path: 'player/:id',
component: PlayerDetailsComponent,
data: {breadcrumb: 'Player'}
},
]
},
]
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="p-5" *ngIf="matchStats">
<div class="flex flex-column mx-6 gap-4">
<div class="lg:px-5" *ngIf="matchStats">
<div class="flex flex-column lg:mx-6 gap-4">

<p-card header="{{matchStats.global_stats.game_date | date: 'fullDate' }}"
subheader="{{match?.home_team?.arena}} ({{match?.home_team?.city}}, {{match?.home_team?.state}})">
Expand Down
42 changes: 24 additions & 18 deletions courtsight/src/app/basket/match-details/match-details.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,29 +61,35 @@ export class MatchDetailsComponent {


constructor() {
const match_id = this.route.snapshot.params["id"];
const match_date = this.route.snapshot.params["date"];
this.route.params.subscribe(routeParams => {
const match_id = routeParams["id"];
const match_date = routeParams["date"];

this.matchesService.getMatchStatsById(match_id, match_date).then((matches: ActualAndLastMatchStats) => {
this.matchStats = matches.actual_match_stats
this.matchesService.getMatchStatsById(match_id, match_date).then((matches: ActualAndLastMatchStats) => {
this.matchStats = matches.actual_match_stats

let homePts = this.matchStats.by_home_stats.pts;
let awayPts = this.matchStats.by_away_stats.pts;
let total = homePts + awayPts;
let homePts = this.matchStats.by_home_stats.pts;
let awayPts = this.matchStats.by_away_stats.pts;
let total = homePts + awayPts;

this.meterValue = [
{label: '', value: homePts / total * 100, color: homePts >= awayPts ? colors.winningLeft : colors.losingLeft},
{label: '', value: awayPts / total * 100, color: homePts >= awayPts ? colors.losingRight : colors.winningRight},
]
this.meterValue = [
{label: '', value: homePts / total * 100, color: homePts >= awayPts ? colors.winningLeft : colors.losingLeft},
{
label: '',
value: awayPts / total * 100,
color: homePts >= awayPts ? colors.losingRight : colors.winningRight
},
]

this.matchesService.getMatchesByDate(this.matchStats.global_stats.game_date, this.matchStats.global_stats.game_date).then(matches => {
this.match = matches.find(m => m.game_id === match_id);
})
this.matchesService.getMatchesByDate(this.matchStats.global_stats.game_date, this.matchStats.global_stats.game_date).then(matches => {
this.match = matches.find(m => m.game_id === match_id);
})

const event_id: string = `${this.matchStats?.by_home_stats.team_abbreviation}FAKE${this.matchStats?.by_away_stats.team_abbreviation}`;
this.oddsService.getOddsForMatch(event_id).then((odds: Odds[]) => {
this.odds = odds[0];
})
const event_id: string = `${this.matchStats?.by_home_stats.team_abbreviation}FAKE${this.matchStats?.by_away_stats.team_abbreviation}`;
this.oddsService.getOddsForMatch(event_id).then((odds: Odds[]) => {
this.odds = odds[0];
})
});
});
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<div class="grid mt-3 lg:mx-6 m-2 mb-8">
<div class="flex flex-1 flex-row flex-wrap justify-content-between align-items-baseline">
<div class="flex">
<app-details-header
[title]="player?.player"
[subtitle]="team?.team_info!.full_name"
[items]="header_items"></app-details-header>
</div>
<div class="flex">
<span class="text-6xl font-bold m-3">{{ player?.num }} ({{player?.position}})</span>
</div>
</div>
</div>

<div class="grid lg:mx-6 mb-5 m-1">
<div class="flex flex-1 flex-wrap gap-3">
<ng-container *ngFor="let stat of average_stats">
<div class="flex-1 border-2 border-round p-4">
<div class="flex justify-content-center gap-5">
<div class="flex flex-column align-items-center gap-1">
<span class="text-primary ">{{ stat.name }}</span>
<span class="font-bold text-lg">{{ stat.value }}</span>
</div>
</div>
</div>
</ng-container>
</div>
</div>

<div class="grid lg:mx-6 mb-8" *ngIf="playerStats?.all_stats && playerStats?.all_stats!.length > 0">
<div class="col-12">
<app-player-stats [rows]="playerStats?.all_stats!"
title="Last {{playerStats?.all_stats!.length}} matches"></app-player-stats>
</div>
</div>

<app-time-travel (onDateUpdate)="refreshStats()"></app-time-travel>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { PlayerDetailsComponent } from './player-details.component';

describe('PlayerDetailsComponent', () => {
let component: PlayerDetailsComponent;
let fixture: ComponentFixture<PlayerDetailsComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PlayerDetailsComponent]
})
.compileComponents();

fixture = TestBed.createComponent(PlayerDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
101 changes: 101 additions & 0 deletions courtsight/src/app/basket/player-details/player-details.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {Component, inject} from '@angular/core';
import {DetailsHeaderComponent, Item} from "../../shared/details-header/details-header.component";
import {PlayerStats} from "../stats";
import {PlayersService} from "../players.service";
import {ActivatedRoute} from "@angular/router";
import {TimeTravelService} from "../../shared/time-travel.service";
import {Player} from "../player";
import {Team} from "../team";
import {TeamsService} from "../teams.service";
import {PlayerStatsComponent} from "./player-stats/player-stats.component";
import {CommonModule} from "@angular/common";
import {CardModule} from "primeng/card";
import {DividerModule} from "primeng/divider";
import {TimeTravelComponent} from "../../shared/time-travel/time-travel.component";

@Component({
selector: 'app-player-details',
standalone: true,
imports: [
DetailsHeaderComponent,
PlayerStatsComponent,
CommonModule,
CardModule,
DividerModule,
TimeTravelComponent
],
templateUrl: './player-details.component.html',
styleUrl: './player-details.component.css'
})
export class PlayerDetailsComponent {
route: ActivatedRoute = inject(ActivatedRoute);

teamsService = inject(TeamsService);
playerService = inject(PlayersService);
timetravelService = inject(TimeTravelService);

team: Team | undefined;
player: Player | undefined;
playerStats: PlayerStats | undefined;
header_items: Item[] = [];

average_stats: any[] = []

constructor() {
this.refreshStats()
}

refreshStats() {
const player_id = this.route.snapshot.params["id"];

this.route.parent!.params.subscribe(params => {
const ticker = params['ticker'];

this.teamsService.getTeamFromTicker(ticker, "2023-24").then((team: Team) => {
this.team = team;
this.player = team.team_players.find((p) => String(p.player_id) === player_id);

if (this.player) {
this.header_items = [
{
icon: 'pi pi-info-circle', value: `${this.player.age} y/0`,
},
{
icon: null, value: `${this.player.weight} lb`,
},
{
icon: null, value: `${this.player.height} ft`,
},
]
}

this.playerService.getPlayerStatsById(player_id, "2023-24", this.timetravelService.getDateString(), "5").then(playerStats => {
this.playerStats = playerStats;
this.average_stats = [
{
value: this.player?.exp,
name: "Experience",
},
{
value: playerStats.average.pts,
name: "PPG",
},
{
value: playerStats.average.reb,
name: "RPG",
},
{
value: playerStats.average.ast,
name: "APG",
},
{
value: playerStats.average.blk,
name: "BLK",
},
]
})
})
})
}

}
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<p-table
[value]="rows"
[scrollable]="true"
styleClass="p-datatable-striped"
>
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between">
{{ title }}
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th class="text-center" pFrozenColumn>Date</th>
<th class="text-center" pFrozenColumn>Matchup</th>
<th class="text-center">W/L</th>
<th class="text-center">min</th>
<th class="text-center">pts</th>
<th class="text-center">fgm</th>
<th class="text-center">fga</th>
<th class="text-center">fg %</th>
<th class="text-center">fg3m</th>
<th class="text-center">fg3a</th>
<th class="text-center">fg3 %</th>
<th class="text-center">ftm</th>
<th class="text-center">fta</th>
<th class="text-center">ft %</th>
<th class="text-center">oreb</th>
<th class="text-center">dreb</th>
<th class="text-center">reb</th>
<th class="text-center">ast</th>
<th class="text-center">stl</th>
<th class="text-center">blk</th>
<th class="text-center">tov</th>
<th class="text-center">pf</th>
<th class="text-center">+/-</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-stats>
<tr>
<td class="text-center" pFrozenColumn><a routerLink="/basketball/match/{{stats.game_id}}/{{stats.game_date | date: 'yyyy-MM-dd' }}" class="text-primary">{{ stats.game_date }}</a></td>
<td class="text-center" pFrozenColumn>{{ stats.matchup }}</td>
<td class="text-center">{{ stats.wl }}</td>
<td class="text-center">{{ stats.min }}</td>
<td class="text-center">{{ stats.pts }}</td>
<td class="text-center">{{ stats.fgm }}</td>
<td class="text-center">{{ stats.fga }}</td>
<td class="text-center">{{ stats.fg_pct }}</td>
<td class="text-center">{{ stats.fg3m }}</td>
<td class="text-center">{{ stats.fg3a }}</td>
<td class="text-center">{{ stats.fg3_pct }}</td>
<td class="text-center">{{ stats.ftm }}</td>
<td class="text-center">{{ stats.fta }}</td>
<td class="text-center">{{ stats.ft_pct }}</td>
<td class="text-center">{{ stats.oreb }}</td>
<td class="text-center">{{ stats.dreb }}</td>
<td class="text-center">{{ stats.reb }}</td>
<td class="text-center">{{ stats.ast }}</td>
<td class="text-center">{{ stats.stl }}</td>
<td class="text-center">{{ stats.blk }}</td>
<td class="text-center">{{ stats.tov }}</td>
<td class="text-center">{{ stats.pf }}</td>
<td class="text-center">{{ stats.plus_minus }}</td>
</tr>
</ng-template>


</p-table>

Loading

0 comments on commit 28b8d42

Please sign in to comment.