Add vote statistics feature and improve vote page functionality

This commit is contained in:
2025-10-24 19:39:08 +02:00
parent 41dab473b0
commit 00bf7caec2
16 changed files with 447 additions and 80 deletions
+18 -70
View File
@@ -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">
@@ -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;
+74 -7
View File
@@ -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;
}