AltitudeWeb/frontend/src/app/bans/history/history.component.ts
Teriuihi 21f2b3e4a5 Refactor pagination logic and add error handling in history
Introduced `updatePageSize` for better page size management and added checks to prevent rapid page changes. Enhanced error handling in `history.component` with retry logic on failure. Implemented `RemoveTrailingPeriodPipe` for cleaner UI formatting.
2025-04-18 19:32:23 +02:00

127 lines
3.8 KiB
TypeScript

import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
import {catchError, map, Observable, shareReplay} from 'rxjs';
import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
import {CookieService} from 'ngx-cookie-service';
import {RemoveTrailingPeriodPipe} from '../../util/RemoveTrailingPeriodPipe';
import {HttpErrorResponse} from '@angular/common/http';
@Component({
selector: 'app-history',
imports: [
NgIf,
NgForOf,
NgOptimizedImage,
RemoveTrailingPeriodPipe
],
templateUrl: './history.component.html',
styleUrl: './history.component.scss',
providers: [
CookieService,
{provide: BASE_PATH, useValue: 'http://localhost:8080/'}
],
})
export class HistoryComponent implements OnInit, OnChanges {
@Input() userType: 'player' | 'staff' = "player";
@Input() punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
@Input() page: number = 0;
@Input() searchTerm: string = '';
@Output() pageChange = new EventEmitter<number>();
private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
public history: PunishmentHistoryInner[] = []
constructor(private historyApi: HistoryService) {
}
ngOnChanges(): void {
this.reloadHistory();
}
ngOnInit(): void {
this.reloadHistory();
}
private reloadHistory(): void {
let historyObservable: Observable<PunishmentHistoryInner[]>;
if (this.searchTerm.length === 0) {
historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
} else {
if (this.uuidRegex.test(this.searchTerm)) {
historyObservable = this.historyApi.getHistoryForUuid(this.userType, this.punishmentType, this.searchTerm, this.page);
} else {
historyObservable = this.historyApi.getHistoryForUsers(this.userType, this.punishmentType, this.searchTerm, this.page)
}
}
historyObservable.pipe(
map(history => {
this.history = history;
this.pageChange.emit(this.history.length);
}),
catchError(err => {
this.pageChange.emit(-1);
let retrySeconds = 5;
if (err instanceof HttpErrorResponse) {
const headers = err.headers;
const retryAfterHeader = headers.get('Retry-After');
console.warn(err.error);
if (retryAfterHeader) {
const retryAfter = parseInt(retryAfterHeader || '0', 10);
if (!isNaN(retryAfter) && retryAfter > 0) {
retrySeconds = retryAfter + 1;
}
}
} else {
console.error(err);
}
setTimeout(() => this.reloadHistory(), retrySeconds * 1000);
return this.history;
}),
shareReplay(1)
).subscribe();
}
public getPunishmentTime(entry: PunishmentHistoryInner) {
const date = new Date(entry.punishmentTime);
return date.toLocaleString(navigator.language, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false
});
}
public getType(entry: PunishmentHistoryInner) {
return entry.type.charAt(0).toUpperCase() + entry.type.slice(1);
}
public getExpiredTime(entry: PunishmentHistoryInner) {
if (entry.expiryTime <= 0) {
return "Permanent " + this.getType(entry);
}
const date = new Date(entry.expiryTime);
return date.toLocaleString(navigator.language, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: false
});
}
public getAvatarUrl(entry: string): string {
let uuid = entry.replace('-', '');
if (uuid === 'C') {
return '/public/img/random/console.png';
}
return `https://crafatar.com/avatars/${uuid}?size=25&overlay`;
}
}