feat(#3): improve sidebar

backend/src/main/java/at/beerbrawl/backend/service/impl/TestDataServiceImpl.java

@@ -23,9 +23,7 @@ import at.beerbrawl.backend.util.BeerDateTime;
 import lombok.AllArgsConstructor;
 import org.springframework.stereotype.Service;
 
-import java.time.LocalDate;
 import java.time.LocalDateTime;
-import java.time.LocalTime;
 import java.util.LinkedList;
 import java.util.List;
 import java.util.Objects;
@@ -55,7 +53,7 @@ public class TestDataServiceImpl implements TestDataService {
 
         final var tournament1 = new Tournament(
             "Semesterclosing Turnier",
-            LocalDateTime.of(LocalDate.of(2024, 6, 27), LocalTime.of(18, 0)),
+            LocalDateTime.now().plusDays(3),
             32L,
             "Willkommen zum Semesterclosing Beerpongturnier! Viel Spaß! Es gibt tolle Preise zu gewinnen!",
             userRepository.findByUsername(username));

frontend/package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "beerbrawl-frontend",
       "version": "0.0.1",
+      "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@angular/animations": "18.0.4",
         "@angular/cdk": "^18.0.4",

frontend/src/app/components/sidebar/sidebar.component.html

@@ -1,9 +1,46 @@
 <mat-nav-list class="sidebar-container">
   <div>
-    <mat-list-item [routerLink]="['/tournaments']" routerLinkActive="active-link">
+    <mat-list-item
+      [routerLink]="['/tournaments']"
+      routerLinkActive="active-link"
+      [routerLinkActiveOptions]="{ exact: true }"
+    >
       <mat-icon matListItemIcon>event_note</mat-icon>
       <div matListItemTitle>Tournaments</div>
     </mat-list-item>
+    @if (this.tournament() !== null) {
+      <mat-list-item
+        [routerLink]="['/tournaments', this.tournament()?.id]"
+        routerLinkActive="active-link"
+      >
+        <mat-icon matListItemIcon>leaderboard</mat-icon>
+        <div matListItemTitle>{{ this.tournament()?.name }}</div>
+      </mat-list-item>
+      <mat-list-item
+        [routerLink]="['/tournaments', this.tournament()?.id, 'qualification-phase']"
+        routerLinkActive="active-link"
+      >
+        <div matListItemTitle class="list-item-sub-title">Qualification phase</div>
+      </mat-list-item>
+      <mat-list-item
+        [routerLink]="['/tournaments', this.tournament()?.id, 'ko-phase']"
+        routerLinkActive="active-link"
+      >
+        <div matListItemTitle class="list-item-sub-title">Knockout phase</div>
+      </mat-list-item>
+      <mat-list-item
+        [routerLink]="['/tournaments', this.tournament()?.id, 'tables']"
+        routerLinkActive="active-link"
+      >
+        <div matListItemTitle class="list-item-sub-title">Tables</div>
+      </mat-list-item>
+      <mat-list-item
+        [routerLink]="['/tournaments', this.tournament()?.id, 'teams']"
+        routerLinkActive="active-link"
+      >
+        <div matListItemTitle class="list-item-sub-title">Teams</div>
+      </mat-list-item>
+    }
   </div>
   <div>
     <mat-list-item routerLinkActive="active-link">

frontend/src/app/components/sidebar/sidebar.component.scss

@@ -46,3 +46,7 @@ h1 {
 mat-nav-list {
   height: calc(100% - var(--mat-toolbar-standard-height) - 16px);
 }
+
+.list-item-sub-title {
+  text-indent: 1rem;
+}

frontend/src/app/components/sidebar/sidebar.component.ts

@@ -1,8 +1,11 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, computed, inject } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { AuthService } from 'src/app/services/auth.service';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { filter, firstValueFrom, map, switchMap } from 'rxjs';
+import { TournamentEndpointService } from '@api';
 
 @Component({
   selector: 'app-sidebar',
@@ -11,20 +14,64 @@ import { AuthService } from 'src/app/services/auth.service';
 })
 export class SidebarComponent {
   username: string = '';
+  tournamentService = inject(TournamentEndpointService);
+  router = inject(Router);
+  authService = inject(AuthService);
 
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-  ) {
-    this.username = authService.getUsername()!;
+  url = toSignal(
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(event => (event as NavigationEnd).urlAfterRedirects.split('/')),
+    ),
+  );
+
+  isTournamentPath = computed(() => {
+    const path = this.url();
+    return path != undefined && path.length > 2 && path[1] === 'tournaments' && !isNaN(+path[2]);
+  });
+
+  tournament = toSignal(
+    toObservable(this.isTournamentPath).pipe(
+      switchMap(async isTournamentPath => {
+        if (isTournamentPath) {
+          const path = this.url()!;
+          const tournamentId = +path[2];
+          return firstValueFrom(this.tournamentService.get(tournamentId));
+        } else {
+          return null;
+        }
+      }),
+    ),
+  );
+
+  isOverviewPage = computed(() => {
+    return this.isTournamentPath() && this.url()!.length === 3;
+  });
+
+  isQualificationPhasePage = computed(() => {
+    return this.isTournamentPath() && this.url()![3] === 'qualification-phase';
+  });
+
+  isKoPhasePage = computed(() => {
+    return this.isTournamentPath() && this.url()![3] === 'ko-phase';
+  });
+
+  isTablesPage = computed(() => {
+    return this.isTournamentPath() && this.url()![3] === 'tables';
+  });
+
+  isTeamsPage = computed(() => {
+    return this.isTournamentPath() && this.url()![3] === 'teams';
+  });
+
+  constructor() {
+    this.username = this.authService.getUsername()!;
   }
 
   logout() {
     this.authService.logoutUser();
     this.router.navigate(['/']);
   }
-
-  navigateToUserDetails() {
-    this.router.navigate(['/details', this.username]);
-  }
 }
+
+type CurrentTournamentPage = 'overview' | 'qualificationPhase' | 'koPhase' | 'teams' | 'tables';