wip vote page

package.json

@@ -27,7 +27,7 @@
     "@angular/platform-server": "^17.3.7",
     "@angular/router": "^17.3.7",
     "@angular/ssr": "^17.3.6",
-    "@funixproductions/funixproductions-requests": "^0.2.2",
+    "@funixproductions/funixproductions-requests": "^0.2.4",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.0",

src/app/components/navbar/navbar.component.html

@@ -14,13 +14,13 @@
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link {{ currentUrl.startsWith('/news') ? 'current' : '' }}" href="/news">News</a>
+                            <a class="nav-link {{ currentUrl.startsWith('/vote') ? 'current' : '' }}" href="/vote">Voter</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link {{ currentUrl.startsWith('/wiki') ? 'current' : '' }}" href="/wiki">Wiki</a>
+                            <a class="nav-link {{ currentUrl.startsWith('/news') ? 'current' : '' }}" href="/news">News</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link {{ currentUrl.startsWith('/vote') ? 'current' : '' }}" href="/vote">Vote</a>
+                            <a class="nav-link {{ currentUrl.startsWith('/wiki') ? 'current' : '' }}" href="/wiki">Wiki</a>
                         </li>
 
                         <a class="nav-link" href="/user" rel="nofollow">

src/app/pages/vote/components/vote-top-classement/vote-classement-row/vote-classement-row.component.html

@@ -0,0 +1 @@
+<p>vote-classement-row works!</p>

src/app/pages/vote/components/vote-top-classement/vote-classement-row/vote-classement-row.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {VoteClassementRowComponent} from './vote-classement-row.component';
+
+describe('VoteClassementRowComponent', () => {
+  let component: VoteClassementRowComponent;
+  let fixture: ComponentFixture<VoteClassementRowComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VoteClassementRowComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VoteClassementRowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/vote/components/vote-top-classement/vote-classement-row/vote-classement-row.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-vote-classement-row',
+  templateUrl: './vote-classement-row.component.html',
+  styleUrl: './vote-classement-row.component.scss'
+})
+export class VoteClassementRowComponent {
+
+  @Input() position: number = 1;
+  @Input() username: string = 'Username';
+  @Input() votes: number = 1;
+
+}

src/app/pages/vote/components/vote-top-classement/vote-top-classement.component.html

@@ -0,0 +1,17 @@
+<div *ngIf="topVoters.length > 0; else noVoters">
+    <div *ngFor="let userVote of topVoters; let i = index">
+        <div class="row ">
+            <app-vote-classement-row
+                    [position]="i + 1"
+                    [username]="userVote.username"
+                    [votes]="userVote.votesCount"
+            ></app-vote-classement-row>
+        </div>
+    </div>
+</div>
+
+<ng-template #noVoters>
+    <p>
+        Pas encore de votes, soyez le premier à voter !
+    </p>
+</ng-template>

src/app/pages/vote/components/vote-top-classement/vote-top-classement.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {VoteTopClassementComponent} from './vote-top-classement.component';
+
+describe('VoteTopClassementComponent', () => {
+  let component: VoteTopClassementComponent;
+  let fixture: ComponentFixture<VoteTopClassementComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VoteTopClassementComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VoteTopClassementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/vote/components/vote-top-classement/vote-top-classement.component.ts

@@ -0,0 +1,35 @@
+import {AfterViewInit, Component} from '@angular/core';
+import {VotesCountDTO, VoteService} from "@funixproductions/funixproductions-requests";
+import {HttpClient} from "@angular/common/http";
+import NotificationService from "../../../../services/notifications/services/NotificationService";
+import {environment} from "../../../../../environments/environment";
+
+@Component({
+  selector: 'app-vote-top-classement',
+  templateUrl: './vote-top-classement.component.html',
+  styleUrl: './vote-top-classement.component.scss'
+})
+export class VoteTopClassementComponent implements AfterViewInit {
+
+  private readonly voteApiService: VoteService;
+  protected topVoters: VotesCountDTO[] = [];
+
+  constructor(http: HttpClient,
+              private notificationService: NotificationService) {
+    this.voteApiService = new VoteService(http, environment.production)
+  }
+
+  ngAfterViewInit(): void {
+    let date = new Date();
+
+    this.voteApiService.getTopVoters(date.getMonth() + 1, date.getFullYear()).subscribe({
+      next: (response) => {
+        this.topVoters = response;
+      },
+      error: (error) => {
+        this.notificationService.onErrorRequest(error)
+      }
+    })
+  }
+
+}

src/app/pages/vote/components/vote-user/vote-user.component.html

@@ -0,0 +1 @@
+<p>vote-user works!</p>

src/app/pages/vote/components/vote-user/vote-user.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {VoteUserComponent} from './vote-user.component';
+
+describe('VoteUserComponent', () => {
+  let component: VoteUserComponent;
+  let fixture: ComponentFixture<VoteUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VoteUserComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VoteUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/vote/components/vote-user/vote-user.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-vote-user',
+  templateUrl: './vote-user.component.html',
+  styleUrl: './vote-user.component.scss'
+})
+export class VoteUserComponent {
+
+}

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

@@ -1,5 +1,39 @@
-<div class="container bg-dark rounded-3">
-  <h1 class="text-center">Voter pour Pacifista</h1>
+<div class="container pb-4">
+    <h1>Voter pour Pacifista</h1>
+    <p class="w-50">
+        Voter permet au projet d'être mieux référencé sur des listes de serveurs
+        Minecraft et donc permet aux joueurs qui ne connaissent pas Pacifista de rejoindre le serveur !
+        Merci de voter et de nous soutenir ❤️ !
+    </p>
+
+    <div class="row justify-content-around">
+        <div class="col-md-8 pb-3">
+            <div class="bg-dark p-3 rounded-3">
+                <h2>Séléction du site de vote</h2>
+
+                <app-vote-user></app-vote-user>
+            </div>
+        </div>
+
+        <div class="col-md-4 pb-4">
+            <div class="card" style="width: 18rem;">
+                <img ngSrc="assets/img/vote/box-vote-reward-logo.webp" width="227" height="224" class="card-img-top p-3" alt="Image d'illustration de la récompense de vote pour Pacifista Minecraft.">
+                <div class="card-header">
+                    Récompense par vote
+                </div>
+                <div class="card-body">
+                    <p class="card-text">
+                        Une BOX Vote est offerte à chaque vote, elle contient des items et une possibilité de gagner des box payantes.<br/>
+                        Rendez-vous sur le wiki concernant les box pour plus d'informations.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div>
+        <h2>Top 50 des meilleurs voteurs</h2>
+        <app-vote-top-classement></app-vote-top-classement>
+    </div>
 
-  <p>En cours de production</p>
 </div>

src/app/pages/vote/vote.module.ts

@@ -1,16 +1,25 @@
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {VoteComponent} from "./vote.component";
 import {VoteRoutingModule} from "./vote-routing.module";
+import {VoteUserComponent} from "./components/vote-user/vote-user.component";
+import {VoteTopClassementComponent} from "./components/vote-top-classement/vote-top-classement.component";
+import {
+    VoteClassementRowComponent
+} from "./components/vote-top-classement/vote-classement-row/vote-classement-row.component";
 
 
 @NgModule({
-  declarations: [
-    VoteComponent
-  ],
-  imports: [
-    CommonModule,
-    VoteRoutingModule
-  ]
+    declarations: [
+        VoteComponent,
+        VoteUserComponent,
+        VoteTopClassementComponent,
+        VoteClassementRowComponent
+    ],
+    imports: [
+        CommonModule,
+        VoteRoutingModule,
+        NgOptimizedImage
+    ]
 })
 export class VoteModule { }