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

Refactor avatar URL generation into reusable method

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/bans/history/history.component.html
View File

@ -21,7 +21,7 @@
<tr *ngFor="let entry of history">
<td class="historyType">{{ getType(entry) }}</td>
<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="">
{{ entry.username }}
</td>

5
frontend/src/app/bans/history/history.component.ts
View File

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

48
frontend/src/app/team/team.component.html
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>

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

@ -44,4 +44,9 @@ export class TeamComponent {
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`;
}
}