mirror of
https://codeberg.org/beerbrawl/beerbrawl.git
synced 2024-09-23 01:30:52 +02:00
feat(#3): improve sidebar
This commit is contained in:
parent
bf8c4cc4e8
commit
15eec6bb89
|
@ -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));
|
||||
|
|
1
frontend/package-lock.json
generated
1
frontend/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -46,3 +46,7 @@ h1 {
|
|||
mat-nav-list {
|
||||
height: calc(100% - var(--mat-toolbar-standard-height) - 16px);
|
||||
}
|
||||
|
||||
.list-item-sub-title {
|
||||
text-indent: 1rem;
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Reference in a new issue