131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
import {Component, OnDestroy, OnInit} from '@angular/core';
|
|
import {Observable, Subscription} from "rxjs";
|
|
import {environment} from "../../environments/environment";
|
|
import {LocalCacheService} from "../../corelib/service/local-cache.service";
|
|
import {RxStompService} from "../../corelib/stomp/stomp.service";
|
|
import {Message} from "@stomp/stompjs/esm6";
|
|
import {ErrorDistribution, ReplayData, ReplayDataChart, ReplayDataSimilarScore} from "../replays";
|
|
import {DecimalPipe, NgForOf, NgIf} from "@angular/common";
|
|
import {Router, RouterLink} from "@angular/router";
|
|
import {HttpClient} from "@angular/common/http";
|
|
import {CuteLoadingComponent} from "../../corelib/components/cute-loading/cute-loading.component";
|
|
|
|
interface Statistics {
|
|
total_beatmaps: number;
|
|
total_users: number;
|
|
total_scores: number;
|
|
total_replay_scores: number;
|
|
total_replay_similarity: number;
|
|
}
|
|
|
|
interface AnalyzeReplayResponse {
|
|
id: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-home',
|
|
standalone: true,
|
|
templateUrl: './home.component.html',
|
|
imports: [
|
|
DecimalPipe,
|
|
RouterLink,
|
|
NgIf,
|
|
NgForOf,
|
|
CuteLoadingComponent
|
|
],
|
|
styleUrls: ['./home.component.css']
|
|
})
|
|
export class HomeComponent implements OnInit, OnDestroy {
|
|
|
|
liveScores: ReplayData[] = [];
|
|
|
|
liveScoresSub: Subscription | undefined;
|
|
statistics: Statistics | null = null;
|
|
wantsConnection: boolean = true;
|
|
|
|
loading = false;
|
|
|
|
constructor(
|
|
private localCacheService: LocalCacheService,
|
|
private router: Router,
|
|
private httpClient: HttpClient,
|
|
private rxStompService: RxStompService,
|
|
) { }
|
|
|
|
ngOnInit(): void {
|
|
const storedWantsConnection = localStorage.getItem('wantsConnection');
|
|
if (storedWantsConnection !== null) {
|
|
this.wantsConnection = JSON.parse(storedWantsConnection);
|
|
if (this.wantsConnection) {
|
|
this.subscribe();
|
|
}
|
|
} else {
|
|
this.subscribe();
|
|
}
|
|
|
|
this.getStatistics().subscribe((response: Statistics) => {
|
|
this.statistics = response;
|
|
});
|
|
}
|
|
|
|
private subscribe() {
|
|
this.liveScoresSub = this.rxStompService
|
|
.watch("/topic/live-scores/")
|
|
.subscribe((message: Message) => {
|
|
const data: ReplayData = JSON.parse(message.body);
|
|
this.liveScores.unshift(data);
|
|
if (this.liveScores.length > 50) {
|
|
this.liveScores = this.liveScores.slice(0, 50);
|
|
}
|
|
});
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
this.liveScoresSub?.unsubscribe();
|
|
}
|
|
|
|
toggleConnection(): void {
|
|
this.wantsConnection = !this.wantsConnection;
|
|
localStorage.setItem('wantsConnection', JSON.stringify(this.wantsConnection));
|
|
|
|
if(!this.wantsConnection) {
|
|
this.liveScoresSub?.unsubscribe()
|
|
} else {
|
|
this.subscribe();
|
|
}
|
|
}
|
|
|
|
getStatistics(): Observable<Statistics> {
|
|
return this.localCacheService.fetchData<Statistics>(
|
|
'statistics',
|
|
`${environment.apiUrl}/stats`,
|
|
60
|
|
);
|
|
}
|
|
|
|
uploadReplay(event: any) {
|
|
if (event.target.files.length <= 0) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
const file: File = event.target.files[0];
|
|
|
|
const formData = new FormData();
|
|
formData.append('replay', file);
|
|
|
|
this.httpClient.post<AnalyzeReplayResponse>(`${environment.apiUrl}/analyze`, formData).subscribe({
|
|
next: (response) => {
|
|
this.loading = false;
|
|
this.router.navigate(['/c/' + response.id ]);
|
|
},
|
|
error: () => {
|
|
alert('Error uploading replay :(');
|
|
this.loading = false;
|
|
},
|
|
});
|
|
}
|
|
|
|
}
|