Refactor avatar URL generation into reusable method

Centralized avatar URL generation with `getAvatarUrl()` method to reduce redundancy and improve code maintainability. Updated relevant components to utilize the new method for cleaner and more consistent implementation.
This commit is contained in:
2025-04-12 17:20:47 +02:00
parent 6a70428c75
commit a70159e88d
4 changed files with 35 additions and 25 deletions
+24 -24
View File
@@ -12,16 +12,16 @@
<section class="darkmodeSection">
<div class="container teamContainer">
<h2 class="sectionTitle">Management</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>
<div *ngFor="let member of getTeamMembers('owner') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.name }}</h2>
<p>Owner</p>
</div>
<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>
<div *ngFor="let member of getTeamMembers('manager') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.name }}</h2>
<p>Manager</p>
</div>
</div>
@@ -29,10 +29,10 @@
<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>
<div *ngFor="let member of getTeamMembers('admin') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.name }}</h2>
<p>Admin</p>
</div>
</div>
@@ -40,10 +40,10 @@
<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>
<div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.name }}</h2>
<p>Admin</p>
</div>
</div>
@@ -51,20 +51,20 @@
<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 *ngFor="let member of getTeamMembers('moderator') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.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 *ngFor="let member of getTeamMembers('trainee') | async" class="member">
<img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
height="160" width="160" style="width: 160px;">
<h2>{{ member.name }}</h2>
</div>
</div>
</section>