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:
auto
2025-04-10 02:08:27 +02:00
parent d5daa8458b
commit f10c3ab2d3
2 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/team/team.component.html
+35 -9
View File
@@ -12,17 +12,16 @@
<section class="darkmodeSection">
<div class="container teamContainer">
<h2 class="sectionTitle">Management</h2>
<div class="member">
<img ngSrc="https://crafatar.com/avatars/55e46bc32a294c53850fdbd944dc5c5f?overlay"
alt="akastijn's Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>akastijn</h2>
<div *ngFor="let members of getTeamMembers('owner') | 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>Owner</p>
<p>{{ members }}</p>
</div>
<div class="member">
<img ngSrc="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay"
alt="akalexu's Minecraft skin" height="160" width="160" style="width: 160px;">
<h2>akalexu</h2>
<div *ngFor="let members of getTeamMembers('manager') | 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>Manager</p>
</div>
</div>
@@ -30,16 +29,43 @@
<section class="darkmodeSectionThree">
<div class="container teamContainer">
<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>
</section>
<section class="darkmodeSection">
<div class="container teamContainer">
<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>
</section>
<section class="darkmodeSectionThree">
<div class="container teamContainer">
<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>
</section>
</main>