Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor team component to use dynamic data loading

Browse Source 
Replaced static member entries with dynamic rendering using `getTeamMembers` for better scalability. Added caching and data deduplication logic to optimize API calls. This enhances maintainability and reduces redundancy in the team component.
This commit is contained in:
Teriuihi 2025-04-10 02:08:27 +02:00
parent d5daa8458b
commit f10c3ab2d3
2 changed files with 55 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/app/team/team.component.html
View File

@ -12,17 +12,16 @@
<section class="darkmodeSection"> <section class="darkmodeSection">
<div class="container teamContainer"> <div class="container teamContainer">
<h2 class="sectionTitle">Management</h2> <h2 class="sectionTitle">Management</h2>
<div class="member"> <div *ngFor="let members of getTeamMembers('owner') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/55e46bc32a294c53850fdbd944dc5c5f?overlay" <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="akastijn's Minecraft skin" height="160" width="160" style="width: 160px;"> alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>akastijn</h2> <h2>{{ members.name }}</h2>
<p>Owner</p> <p>Owner</p>
<p>{{ members }}</p>
</div> </div>
<div class="member"> <div *ngFor="let members of getTeamMembers('manager') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay" <img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="akalexu's Minecraft skin" height="160" width="160" style="width: 160px;"> alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>akalexu</h2> <h2>{{ members.name }}</h2>
<p>Manager</p> <p>Manager</p>
</div> </div>
</div> </div>
@ -30,16 +29,43 @@
<section class="darkmodeSectionThree"> <section class="darkmodeSectionThree">
<div class="container teamContainer"> <div class="container teamContainer">
<h2 class="sectionTitle">Admins</h2> <h2 class="sectionTitle">Admins</h2>
<div *ngFor="let members of getTeamMembers('admin') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2>
<p>Admin</p>
</div>
</div> </div>
</section> </section>
<section class="darkmodeSection"> <section class="darkmodeSection">
<div class="container teamContainer"> <div class="container teamContainer">
<h2 class="sectionTitle">Head Moderators</h2> <h2 class="sectionTitle">Head Moderators</h2>
<div *ngFor="let members of getTeamMembers('headmod') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2>
<p>Admin</p>
</div>
</div> </div>
</section> </section>
<section class="darkmodeSectionThree"> <section class="darkmodeSectionThree">
<div class="container teamContainer"> <div class="container teamContainer">
<h2 class="sectionTitle">Moderators</h2> <h2 class="sectionTitle">Moderators</h2>
<div *ngFor="let members of getTeamMembers('moderator') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2>
</div>
</div>
</section>
<section *ngIf="(getTeamMembers('trainee') | async)?.length ?? 0 > 0" class="darkmodeSection">
<div class="container teamContainer">
<h2 class="sectionTitle">Trainees</h2>
<div *ngFor="let members of getTeamMembers('trainee') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2>
</div>
</div> </div>
</section> </section>
</main> </main>

28
frontend/src/app/team/team.component.ts
View File

@ -1,9 +1,10 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {ScrollService} from '../scroll/scroll.service'; import {ScrollService} from '../scroll/scroll.service';
import {BASE_PATH, TeamMember, TeamService} from '../../api'; import {BASE_PATH, Player, TeamService} from '../../api';
import {CommonModule, NgOptimizedImage} from '@angular/common'; import {CommonModule, NgOptimizedImage} from '@angular/common';
import {HeaderComponent} from '../header/header.component'; import {HeaderComponent} from '../header/header.component';
import {CookieService} from 'ngx-cookie-service'; import {CookieService} from 'ngx-cookie-service';
import {map, Observable, shareReplay} from 'rxjs';
@Component({ @Component({
selector: 'app-team', selector: 'app-team',
@ -22,14 +23,25 @@ import {CookieService} from 'ngx-cookie-service';
styleUrl: './team.component.scss' styleUrl: './team.component.scss'
}) })
export class TeamComponent { export class TeamComponent {
public members: TeamMember[] = [];
private teamMembersCache: { [key: string]: Observable<Player[]> } = {};
constructor(public scrollService: ScrollService, public teamApi: TeamService) { constructor(public scrollService: ScrollService, public teamApi: TeamService) {
console.log("TeamComponent") }
teamApi.getTeamMembers("test").subscribe(res => {
console.log(res) public getTeamMembers(team: string): Observable<Player[]> {
console.log("AHH") if (!this.teamMembersCache[team]) {
this.members = res; this.teamMembersCache[team] = this.teamApi.getTeamMembers(team).pipe(
}); map(res => this.removeDuplicates(res)),
shareReplay(1)
);
}
return this.teamMembersCache[team];
}
private removeDuplicates(array: Player[]): Player[] {
return array.filter((player, index, self) =>
index === self.findIndex((p) => p.uuid === player.uuid)
);
} }
} }