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:
Teriuihi 2025-04-12 17:20:47 +02:00
parent 6a70428c75
commit a70159e88d
4 changed files with 35 additions and 25 deletions

View File

@ -21,7 +21,7 @@
<tr *ngFor="let entry of history"> <tr *ngFor="let entry of history">
<td class="historyType">{{ getType(entry) }}</td> <td class="historyType">{{ getType(entry) }}</td>
<td class="historyPlayer"> <td class="historyPlayer">
<img class="avatar" ngSrc="https://cravatar.eu/avatar/cba80e47fcbc407aa5ad37a933b7fe30/25" width="25px" <img class="avatar" [ngSrc]="getAvatarUrl(entry)" width="25px"
height="25px" alt=""> height="25px" alt="">
{{ entry.username }} {{ entry.username }}
</td> </td>

View File

@ -89,4 +89,9 @@ export class HistoryComponent implements OnInit, OnChanges {
hour12: false hour12: false
}); });
} }
public getAvatarUrl(entry: PunishmentHistoryInner): string {
let uuid = entry.uuid.replace('-', '');
return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
}
} }

View File

@ -12,16 +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 *ngFor="let members of getTeamMembers('owner') | async" class="member"> <div *ngFor="let member of getTeamMembers('owner') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
<p>Owner</p> <p>Owner</p>
</div> </div>
<div *ngFor="let members of getTeamMembers('manager') | async" class="member"> <div *ngFor="let member of getTeamMembers('manager') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
<p>Manager</p> <p>Manager</p>
</div> </div>
</div> </div>
@ -29,10 +29,10 @@
<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"> <div *ngFor="let member of getTeamMembers('admin') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
<p>Admin</p> <p>Admin</p>
</div> </div>
</div> </div>
@ -40,10 +40,10 @@
<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"> <div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
<p>Admin</p> <p>Admin</p>
</div> </div>
</div> </div>
@ -51,20 +51,20 @@
<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"> <div *ngFor="let member of getTeamMembers('moderator') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
</div> </div>
</div> </div>
</section> </section>
<section *ngIf="(getTeamMembers('trainee') | async)?.length ?? 0 > 0" class="darkmodeSection"> <section *ngIf="(getTeamMembers('trainee') | async)?.length ?? 0 > 0" class="darkmodeSection">
<div class="container teamContainer"> <div class="container teamContainer">
<h2 class="sectionTitle">Trainees</h2> <h2 class="sectionTitle">Trainees</h2>
<div *ngFor="let members of getTeamMembers('trainee') | async" class="member"> <div *ngFor="let member of getTeamMembers('trainee') | async" class="member">
<img ngSrc="https://crafatar.com/avatars/{{members.uuid.replace('-', '')}}?overlay" <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
alt="{{members.name}}'s Minecraft skin" height="160" width="160" style="width: 160px;"> height="160" width="160" style="width: 160px;">
<h2>{{ members.name }}</h2> <h2>{{ member.name }}</h2>
</div> </div>
</div> </div>
</section> </section>

View File

@ -44,4 +44,9 @@ export class TeamComponent {
index === self.findIndex((p) => p.uuid === player.uuid) index === self.findIndex((p) => p.uuid === player.uuid)
); );
} }
public getAvatarUrl(entry: Player): string {
let uuid = entry.uuid.replace('-', '');
return `https://crafatar.com/avatars/${uuid}?overlay`;
}
} }