nise/nise-frontend/src/app/home/home.component.ts

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 {ReplayData} 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;
      },
    });
  }

}