Add vote statistics feature and improve vote page functionality

frontend/src/app/guards/auth.guard.ts

@@ -21,7 +21,7 @@ export class AuthGuard implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    if (!this.authService.checkAuthStatus()) {
+    if (!this.authService.isAuthenticated$()) {
       this.router.createUrlTree(['/']);
       const dialogRef = this.dialog.open(LoginDialogComponent, {
         width: '400px',

frontend/src/app/pages/vote/vote.component.html

@@ -41,78 +41,26 @@
       </section>
     </section>
     <section class="voteSection">
-      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
-        <div class="vote">
-          <h2>MinecraftServers</h2>
-          <div>
-            <a onclick="clickVote('vote1');" oncontextmenu="clickVote('vote1');" target="_blank" rel="noopener"
-               href="https://minecraftservers.org/vote/284208">
-              <div class="button-outer">
-                <span id="vote1" class="button-inner">Vote!</span>
+      <div class="container voteContainer">
+        @for (voteSite of Object.keys(voteSites); track voteSite) {
+          <div class="vote">
+            <h2>{{ voteSite }}</h2>
+            <div>
+              <a (click)="clickVote(voteSite)" (contextmenu)="clickVote(voteSite); $event.preventDefault()"
+                 target="_blank" rel="noopener"
+                 [href]="voteSites[voteSite]">
+                <div class="button-outer">
+                  <span class="button-inner">{{ getVoteText(voteSite) }}</span>
+                </div>
+              </a>
+            </div>
+            @if (voteStats) {
+              <div class="voteStats">
+                <p>Last voted: {{ getLastVoted(voteSite) | TimeAgo: true }}</p>
               </div>
-            </a>
+            }
           </div>
-        </div>
-        <div class="vote">
-          <h2>TopMinecraftServers</h2>
-          <div>
-            <a (click)="clickVote('vote2')" oncontextmenu="clickVote('vote2'); return false;" target="_blank"
-               rel="noopener"
-               href="https://topminecraftservers.org/vote/4906">
-              <div class="button-outer">
-                <span id="vote2" class="button-inner">Vote!</span>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div class="vote">
-          <h2>MCSL</h2>
-          <div>
-            <a (click)="clickVote('vote3')" oncontextmenu="clickVote('vote3'); return false;" target="_blank"
-               rel="noopener"
-               href="https://minecraft-server-list.com/server/298238/vote/">
-              <div class="button-outer">
-                <span id="vote3" class="button-inner">Vote!</span>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div class="vote">
-          <h2>Minecraft-Server</h2>
-          <div>
-            <a (click)="clickVote('vote4')" oncontextmenu="clickVote('vote4'); return false;" target="_blank"
-               rel="noopener"
-               href="https://minecraft-server.net/vote/Altitude/">
-              <div class="button-outer">
-                <span id="vote4" class="button-inner">Vote!</span>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div class="vote">
-          <h2>PlanetMinecraft</h2>
-          <div>
-            <a (click)="clickVote('vote5')" oncontextmenu="clickVote('vote5'); return false;" target="_blank"
-               rel="noopener"
-               href="https://www.planetminecraft.com/server/alttd/vote/">
-              <div class="button-outer">
-                <span id="vote5" class="button-inner">Vote!</span>
-              </div>
-            </a>
-          </div>
-        </div>
-        <div class="vote">
-          <h2>Minecraft-MP</h2>
-          <div>
-            <a (click)="clickVote('vote6')" oncontextmenu="clickVote('vote6'); return false;" target="_blank"
-               rel="noopener"
-               href="https://minecraft-mp.com/server/98955/vote/">
-              <div class="button-outer">
-                <span id="vote6" class="button-inner">Vote!</span>
-              </div>
-            </a>
-          </div>
-        </div>
+        }
       </div>
     </section>
     <section class="darkmodeSection">

frontend/src/app/pages/vote/vote.component.scss

@@ -4,6 +4,11 @@
   margin: 0 auto;
 }
 
+.voteContainer {
+  padding: 50px 0 0 0;
+  justify-content: center;
+}
+
 .voteSection {
   background-color: var(--link-color);
   transition: 0.5s ease;

frontend/src/app/pages/vote/vote.component.ts

@@ -1,24 +1,91 @@
-import {Component} from '@angular/core';
+import {Component, effect, inject, OnDestroy, OnInit} from '@angular/core';
 import {ScrollService} from '@services/scroll.service';
 
 import {HeaderComponent} from '@header/header.component';
+import {SiteService, VoteData} from '@api';
+import {AuthService} from '@services/auth.service';
+import {interval, Subscription} from 'rxjs';
+import {TimeAgoPipe} from '@pipes/TimeAgoPipe';
 
 @Component({
   selector: 'app-vote',
   standalone: true,
   imports: [
-    HeaderComponent
-],
+    HeaderComponent,
+    TimeAgoPipe
+  ],
   templateUrl: './vote.component.html',
   styleUrl: './vote.component.scss'
 })
-export class VoteComponent {
-  constructor(public scrollService: ScrollService) {
+export class VoteComponent implements OnInit, OnDestroy {
+  private readonly defaultVoteMessage = 'Vote!';
+  private readonly clickedVoteMessage = 'Clicked!';
+
+  private voteMessages: { [key: string]: string } = {}
+  private refreshSubscription: Subscription | null = null;
+
+  protected readonly voteSites: { [key: string]: string } = {
+    'PlanetMinecraft': 'https://www.planetminecraft.com/server/alttd/vote/',
+    'TopMinecraftServers': 'https://topminecraftservers.org/vote/4906',
+    'Minecraft-Server': 'https://minecraft-server.net/vote/Altitude/',
+    'MinecraftServers': 'https://minecraftservers.org/vote/284208',
+    'MCSL': 'https://minecraft-server-list.com/server/298238/vote/',
+    'Minecraft-MP': 'https://minecraft-mp.com/server/98955/vote/',
   }
 
-  voteMessage: string = '';
+  protected scrollService: ScrollService = inject(ScrollService);
+  protected siteService = inject(SiteService)
+  protected authService = inject(AuthService)
+
+  protected voteStats: VoteData | null = null
+
+  constructor() {
+    effect(() => {
+      if (this.authService.isAuthenticated$()) {
+        this.loadVoteStats();
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.refreshSubscription = interval(300000).subscribe(() => {
+      this.loadVoteStats();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.refreshSubscription?.unsubscribe();
+  }
 
   clickVote(id: string) {
-    this.voteMessage = 'Clicked!';
+    this.voteMessages[id] = this.clickedVoteMessage;
   }
+
+  getVoteText(id: string) {
+    return this.voteMessages[id] || this.defaultVoteMessage;
+  }
+
+  private loadVoteStats(): void {
+    if (!this.authService.isAuthenticated$()) {
+      return
+    }
+    this.siteService.getVoteStats().subscribe(voteStats => {
+      this.voteStats = voteStats;
+    });
+  }
+
+  protected getLastVoted(id: string): Date | null {
+    if (!this.voteStats) {
+      return null;
+    }
+    const filteredVoteInfo = this.voteStats.allVoteInfo
+      .filter(voteInfo => voteInfo.siteName === id);
+    if (filteredVoteInfo.length !== 1) {
+      return null;
+    }
+
+    return new Date(filteredVoteInfo[0].lastVoteTimestamp);
+  }
+
+  protected readonly Object = Object;
 }

frontend/src/app/pipes/TimeAgoPipe.ts

@@ -0,0 +1,55 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'TimeAgo',
+  standalone: true
+})
+export class TimeAgoPipe implements PipeTransform {
+  transform(value: Date | string | number | null, short?: boolean): string {
+    if (!value) {
+      return '';
+    }
+
+    const date = new Date(value);
+    const now = new Date();
+
+    const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (seconds < 60) {
+      return 'just now';
+    }
+
+    let returnText = 'ago';
+
+    const allMinutes = Math.floor(seconds / 60);
+    const minutes = allMinutes % 60;
+    if (short) {
+      returnText = `${minutes}m ${returnText}`
+    } else {
+      returnText = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ${returnText}`
+    }
+    if (allMinutes < 60) {
+      return returnText
+    }
+
+
+    const allHours = Math.floor(allMinutes / 60);
+    const hours = allHours % 24;
+    if (short) {
+      returnText = `${hours}h ${returnText}`
+    } else {
+      returnText = `${hours} ${hours === 1 ? 'hour' : 'hours'} ${returnText}`
+    }
+    if (allHours < 24) {
+      return returnText
+    }
+
+    const days = Math.floor(allHours / 24);
+    if (short) {
+      returnText = `${days}d ${returnText}`
+    } else {
+      returnText = `${days} ${days === 1 ? 'day' : 'days'} ${returnText}`
+    }
+    return returnText
+  }
+}

frontend/src/app/services/auth.service.ts

@@ -68,7 +68,7 @@ export class AuthService {
   /**
    * Check if the user is authenticated
    */
-  public checkAuthStatus(): boolean {
+  private checkAuthStatus(): boolean {
     const jwt = this.getJwt();
     if (!jwt) {
       console.log("No JWT found");