feat: (big commit) -> UI fixes, finetune, new league manager role

web/src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import {CreateTeamFormComponent} from './components/create-team-form/create-team
 import {TeamManagementDashboardComponent} from './components/team-management-dashboard/team-management-dashboard.component';
 import {TeamPlayersComponent} from './components/team-players/team-players.component';
 import {TeamsComponent} from './components/teams/teams.component';
+import { WelcomeComponent } from './components/welcome/welcome.component';
 
 
 const routes: Routes = [
@@ -16,7 +17,9 @@ const routes: Routes = [
   {path: 'team/players/:id', component: TeamPlayersComponent},
   {path: 'game/create', component: CreateGameFormComponent},
   {path: 'team/create', component: CreateTeamFormComponent},
-  {path: 'team/manage', component: TeamManagementDashboardComponent}
+  {path: 'team/manage', component: TeamManagementDashboardComponent},
+  {path: 'welcome', component: WelcomeComponent},
+  {path: '', redirectTo: 'welcome', pathMatch: 'full'}
 ];
 
 @NgModule({

web/src/app/app.component.html

@@ -4,7 +4,7 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <div class="collapse navbar-collapse">
-      <a class="navbar-brand" href="#">{{title}}</a>
+      <a class="navbar-brand" routerLink="/">{{title}}</a>
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
           <a class="nav-link" routerLink="/teams" routerLinkActive="active">Teams</a>
@@ -16,9 +16,15 @@
           <a class="nav-link" routerLink="/games" routerLinkActive="active">Games</a>
         </li>
 
-        <li *ngIf="this.isAuthenticated" class="nav-item">
+        <li *ngIf="isTeamManager" class="nav-item">
             <a class="nav-link" routerLink="/team/manage" routerLinkActive="active">Manage Team</a>
         </li>
+        <li *ngIf="this.isLeagueManager" class="nav-item">
+            <a class="nav-link" routerLink="/team/create" routerLinkActive="active">Add Team</a>
+        </li>
+        <li *ngIf="this.isLeagueManager" class="nav-item">
+            <a class="nav-link" routerLink="/game/create" routerLinkActive="active">Schedule Match</a>
+        </li>
       </ul>
       <div class="d-flex">
         <mat-action-row>
@@ -31,5 +37,4 @@
   </div>
 </nav>
 
-<!--<h1 class="text-center mt-5 fw-bold fs-1">Welcome to Ice Hockey Manager</h1>-->
 <router-outlet></router-outlet>

web/src/app/app.component.ts

 import {Component} from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import { Observable, of } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 import {LogInDialogComponent} from './components/log-in-dialog/log-in-dialog.component';
 import {AuthServiceService} from './services/auth-service.service';
 
@@ -12,6 +14,8 @@ export class AppComponent {
   title = 'Ice Hockey Manager';
 
   isAuthenticated: boolean = false;
+  isTeamManager: boolean = false;
+  isLeagueManager: boolean = false;
 
   constructor(
     private dialog: MatDialog,
@@ -24,11 +28,12 @@ export class AppComponent {
   }
 
   refreshAuth(): void {
-    this.authService.isAuthenticated()
-      .subscribe(isAuthenticated => this.isAuthenticated = isAuthenticated);
+    this.authService.isAuthenticated().subscribe(e => this.isAuthenticated = e);
+    this.authService.isTeamManager().subscribe(e => this.isTeamManager = e);
+    this.authService.isLeagueManager().subscribe(e => this.isLeagueManager = e);
   }
 
-  handleLogInClick() {
+  handleLogInClick()  {
     const dialogConfig = new MatDialogConfig();
     dialogConfig.data = {};
     const dialogRef = this.dialog.open(LogInDialogComponent, dialogConfig);

web/src/app/app.module.ts

@@ -27,6 +27,7 @@ import {HireNewPlayerDialogComponent} from './components/hire-new-player-dialog/
 import {HireVeteranPlayerDialogComponent} from './components/hire-veteran-player-dialog/hire-veteran-player-dialog.component';
 import {LogInFormComponent} from './components/log-in-form/log-in-form.component';
 import {LogInDialogComponent} from './components/log-in-dialog/log-in-dialog.component';
+import { WelcomeComponent } from './components/welcome/welcome.component';
 
 @NgModule({
   declarations: [
@@ -48,7 +49,8 @@ import {LogInDialogComponent} from './components/log-in-dialog/log-in-dialog.com
     HireNewPlayerDialogComponent,
     HireVeteranPlayerDialogComponent,
     LogInFormComponent,
-    LogInDialogComponent
+    LogInDialogComponent,
+    WelcomeComponent
   ],
   imports: [
     BrowserModule,

web/src/app/components/components.module.ts

@@ -18,6 +18,7 @@ import {HireNewPlayerDialogComponent} from './hire-new-player-dialog/hire-new-pl
 import {HireVeteranPlayerDialogComponent} from './hire-veteran-player-dialog/hire-veteran-player-dialog.component';
 import {LogInFormComponent} from './log-in-form/log-in-form.component';
 import {LogInDialogComponent} from './log-in-dialog/log-in-dialog.component';
+import { WelcomeComponent } from './welcome/welcome.component';
 
 
 @NgModule({
@@ -39,7 +40,8 @@ import {LogInDialogComponent} from './log-in-dialog/log-in-dialog.component';
     HireNewPlayerDialogComponent,
     HireVeteranPlayerDialogComponent,
     LogInFormComponent,
-    LogInDialogComponent
+    LogInDialogComponent,
+    WelcomeComponent
   ],
   imports: [
     CommonModule

web/src/app/components/delete-game-button/delete-game-button.component.ts

@@ -20,7 +20,6 @@ export class DeleteGameButtonComponent implements OnInit {
   }
 
   onDeleteClick(): void {
-    this.gameService.deleteGame(this.id);
-    this.onDelete.emit(this.id);
+    this.gameService.deleteGame(this.id, () => this.onDelete.emit(this.id));
   }
 }

web/src/app/components/log-in-form/log-in-form.component.html

 <div class="container">
-  <div [hidden]="submitted">
+  <div [hidden]="confirmed">
     <h1>Log In</h1>
     <form #logInForm="ngForm" (ngSubmit)="onSubmit()">
       <div class="form-group">
@@ -29,5 +29,6 @@
       <button [disabled]="!logInForm.form.valid" class="mt-2 btn btn-success" type="submit">Login</button>
       <button (click)="resetForm(); logInForm.reset()" class="mt-2 ms-2 btn btn-danger" type="button">Reset Form</button>
     </form>
-  </div>
+</div>
+<p [hidden]="!submitted" class="fw-bold fs-4">Logging you in...</p>
 </div>

web/src/app/components/log-in-form/log-in-form.component.ts

@@ -36,7 +36,6 @@ export class LogInFormComponent implements OnInit {
 
   confirmSubmission(): void {
     this.confirmed = true;
-    this.authService.authenticate(this.model);
-    this.formSubmitEvent.emit(null);
+    this.authService.authenticate(this.model, () => this.formSubmitEvent.emit(null));
   }
 }

web/src/app/components/team-management-dashboard/team-management-dashboard.component.ts

@@ -72,8 +72,11 @@ export class TeamManagementDashboardComponent implements OnInit {
 
   handleFirePlayerClick() {
     if (this.selectedPlayerID != -1) {
-      this.playerService.firePlayer(this.selectedPlayerID);
-      this.getPlayers();
+      this.playerService.firePlayer(this.selectedPlayerID,
+        () => {
+            this.getPlayers();
+            this.refreshed = !this.refreshed;
+        });
     }
   }
 

web/src/app/components/teams/teams.component.html

 <h2 class="fw-bold ms-4 mt-1 fs-2">Teams</h2>
 <ul class="teams">
-  <li *ngFor="let team of teams">
-    <span class="badge">{{team.id}}</span>
+  <li *ngFor="let team of teams let i = index">
+    <span class="badge">{{i + 1}}</span>
     <span class="text">{{team.name}}</span>
   </li>
 </ul>

web/src/app/services/auth-service.service.ts

@@ -10,6 +10,10 @@ export class AuthServiceService {
 
   readonly AUTH_URL: string = 'http://localhost:8080/pa165/auth/login';
   readonly JWT: string = "JWT";
+  readonly ROLE: string = "ROLE";
+
+  readonly TEAM_MANAGER = "TEAM_MANAGER";
+  readonly LEAGUE_MANAGER = "LEAGUE_MANAGER";
 
   authenticated: boolean = false;
   leagueManager: boolean = false;
@@ -18,13 +22,15 @@ export class AuthServiceService {
   constructor(private http: HttpClient) {
   }
 
-  authenticate(userAuthRequest: UserAuthRequest) {
+  authenticate(userAuthRequest: UserAuthRequest, callback : Function) {
     this.http.post(
       this.AUTH_URL, 
       userAuthRequest,
       {responseType : 'text'}
       )
-      .subscribe((response: string) => this.handleAuthResponse(response));
+      .subscribe((response: string) => {
+          this.handleAuthResponse(response);
+        callback()});
   }
 
   logOut(): Observable<boolean> {
@@ -41,17 +47,19 @@ export class AuthServiceService {
   }
 
   isLeagueManager(): Observable<boolean> {
-    return of(this.leagueManager);
+    return of(this.authenticated && localStorage.getItem(this.ROLE) == this.LEAGUE_MANAGER);
   }
 
   isTeamManager(): Observable<boolean> {
-    return of(this.teamManager);
+    return of(this.authenticated && localStorage.getItem(this.ROLE) == this.TEAM_MANAGER);
   }
 
   handleAuthResponse(response: string) : void {
-    console.log("aaaaaaaaaaaaaaa");
     let parts = response.split(" ");
-    let token = parts[1];
+    let role = parts[1];
+    console.log(parts[1]);
+    let token = parts[2];
+    localStorage.setItem(this.ROLE, role);
     localStorage.setItem(this.JWT, token);
   }
 

web/src/app/services/game.service.ts

@@ -4,10 +4,10 @@ import {Observable} from 'rxjs';
 import {CreateGame} from '../models/create-game';
 import {CreateGameShort} from '../models/create-game-short';
 import {Game} from '../models/game';
-import {Team} from '../models/team';
 import {UpdateGameWinner} from '../models/update-game-winner';
 import {UpdateGameWinnerShort} from '../models/update-game-winner-short';
 import {GameShort} from '../models/game-short';
+import { AuthServiceService } from './auth-service.service';
 
 @Injectable({
   providedIn: 'root'
@@ -20,39 +20,51 @@ export class GameService {
   deleteUrl: string = 'http://localhost:8080/pa165/api/manage/league/game/delete/';
   updateUrl: string = 'http://localhost:8080/pa165/api/manage/league/game/update';
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private auth: AuthServiceService) {
   }
 
   getGames(): Observable<Game[]> {
     return this.http.get<Game[]>(this.getAllUrl);
   }
 
-  deleteGame(id: number) {
-    this.http.delete(this.deleteUrl + id).subscribe();
+  deleteGame(id: number, callback: Function) {
+    const headerVal = this.auth.getBearerHeader();
+    this.http.delete(this.deleteUrl + id, {
+        headers: {Authorization : headerVal}
+      }).subscribe(e => callback());
   }
 
   createGame(game: CreateGame): void {
+    const headerVal = this.auth.getBearerHeader();
     let newGame: CreateGameShort = {
       gameDateTime: game.gameDateTime,
       homeTeamId: game.homeTeam?.id, awayTeamId: game.awayTeam?.id,
       homeTeamScore: 0, awayTeamScore: 0
     };
-    this.http.post<GameShort>(this.createUrl, newGame).subscribe();
+    this.http.post<GameShort>(this.createUrl, newGame, {
+        headers: {Authorization : headerVal}
+      }).subscribe();
   }
 
   updateGameScore(game: Game): void {
+    const headerVal = this.auth.getBearerHeader();
     let updateGame: GameShort = {
       id: game.id, gameDateTime: game.gameDateTime,
       homeTeamId: game.homeTeam.id, awayTeamId: game.awayTeam.id,
       winnerId: game.winner.id, awayTeamScore: game.awayTeamScore, homeTeamScore: game.homeTeamScore
     };
-    this.http.put<GameShort>(this.updateUrl, updateGame).subscribe();
+    this.http.put<GameShort>(this.updateUrl, updateGame, {
+        headers: {Authorization : headerVal}
+      }).subscribe();
   }
 
   updateGameWinner(game: UpdateGameWinner): void {
+    const headerVal = this.auth.getBearerHeader();
     let updateGame: UpdateGameWinnerShort = {
       id: game.id, winnerId: game.winner?.id
     };
-    this.http.put<GameShort>(this.updateWinnerUrl, updateGame).subscribe();
+    this.http.put<GameShort>(this.updateWinnerUrl, updateGame, {
+        headers: {Authorization : headerVal}
+      }).subscribe();
   }
 }

web/src/app/services/player.service.ts

@@ -7,6 +7,7 @@ import {Player} from '../models/player';
 import {Team} from '../models/team';
 import {RecruitNewPlayer} from '../models/recruit-new-player';
 import {RecruitVeteran} from '../models/recruit-veteran';
+import { AuthServiceService } from './auth-service.service';
 
 @Injectable({
   providedIn: 'root'
@@ -20,7 +21,8 @@ export class PlayerService {
   recruitUrl: string = 'http://localhost:8080/pa165/api/manage/team/player/transfer';
   fireUrl: string = 'http://localhost:8080/pa165/api/manage/team/player/fire/';
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private auth : AuthServiceService) {
+
   }
 
   getPlayers(): Observable<Player[]> {
@@ -36,16 +38,25 @@ export class PlayerService {
   }
 
   recruitPlayer(player: CreatePlayer, team: Team): void {
+    const headerVal = this.auth.getBearerHeader();
     let newPlayer: RecruitNewPlayer = {name: player.name, teamId: team.id};
-    this.http.post<RecruitNewPlayer>(this.createNewUrl, newPlayer).subscribe();
+    this.http.post<RecruitNewPlayer>(this.createNewUrl, newPlayer, {headers : 
+        {Authorization : headerVal}
+    }).subscribe();
   }
 
   recruitVeteranPlayer(player: Player, team: Team): void {
+    const headerVal = this.auth.getBearerHeader();
     let newPlayer: RecruitVeteran = {playerId: player.id, teamId: team.id};
-    this.http.post<RecruitVeteran>(this.recruitUrl, newPlayer).subscribe();
+    this.http.post<RecruitVeteran>(this.recruitUrl, newPlayer, {headers : 
+        {Authorization : headerVal}
+    }).subscribe();
   }
 
-  firePlayer(id: number): void {
-    this.http.delete(this.fireUrl + id).subscribe();
+  firePlayer(id: number, callback : Function): void {
+    const headerVal = this.auth.getBearerHeader();
+    this.http.delete(this.fireUrl + id, {headers : 
+        {Authorization : headerVal}
+    }).subscribe(() => callback());
   }
 }

web/src/app/services/team.service.ts

@@ -31,7 +31,10 @@ export class TeamService {
   }
 
   createTeam(team: CreateTeam): void {
-    this.http.post<Team>(this.createUrl, team)
+    const headerVal = this.auth.getBearerHeader();
+    this.http.post<Team>(this.createUrl, team, {
+        headers: {Authorization : headerVal}
+      })
       .subscribe();
   }
 
@@ -43,15 +46,6 @@ export class TeamService {
           headers: {Authorization : headerVal}
         }
       );
-    // return of({
-    //   stats: AccessEnum.OK,
-    //   team: this.teams[0]
-    // });
   }
 }
-function mergeMap(arg0: (team: any) => void): import("rxjs").OperatorFunction<Team, unknown> {
-  throw new Error('Function not implemented.');
-}
-
 
-// mergeMap(team => {stats: AccessEnum.OK; team: team});
\ No newline at end of file