Vote module page (#64)

* wip vote page

* wip vote module

* made countdown on buttons

* done v1 of vote system

* lang

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.5",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.0",

src/app/components/inputs/pacifista-search-player-input/pacifista-search-player-input.component.html

@@ -10,6 +10,21 @@
             (textChange)="onInputTextChange($event)"
     ></app-input-text>
 
+    <div *ngIf="playerSelected && playerSelected.minecraftUsername" class="pt-2">
+        <button
+                class="btn btn-danger pl-2"
+                (click)="clear()"
+        ><i class="bi bi-x-circle-fill"></i></button>
+
+        <minecraft-head
+                [username]="playerSelected.minecraftUsername"
+                [size]="32"
+                class="ps-2 pe-2"
+        ></minecraft-head>
+
+        <strong>{{ playerSelected.minecraftUsername }}</strong>
+    </div>
+
     <div class="card position-absolute results-container" *ngIf="loading; else doneLoading">
         <div class="card-body">
             <div class="spinner-border text-primary" role="status">

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/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,3 @@
+<div class="progress" role="progressbar" attr.aria-label="{{ label }}" attr.aria-valuenow="{{ progress.toString() }}" aria-valuemin="0" aria-valuemax="100">
+    <div class="progress-bar progress-bar-striped progress-bar-animated {{ bgClass }}" [style]="'width: ' + progress + '%'"></div>
+</div>

src/app/components/progress-bar/progress-bar.component.spec.ts

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

src/app/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'progress-bar',
+  standalone: true,
+  imports: [],
+  templateUrl: './progress-bar.component.html',
+  styleUrl: './progress-bar.component.scss'
+})
+export class ProgressBarComponent {
+
+  @Input() progress: number = 0;
+  @Input() bgClass: string = '';
+  @Input() label: string = 'Chargement';
+
+}

src/app/pages/accueil/components/news/news-accueil-section.component.ts

@@ -1,20 +1,19 @@
-import {AfterViewInit, Component, Inject, PLATFORM_ID} from '@angular/core';
+import {Component, Inject, OnInit, PLATFORM_ID} from '@angular/core';
 import {
-  PacifistaNewsDTO,
-  PacifistaNewsService,
-  PageOption,
-  QueryBuilder
+    PacifistaNewsDTO,
+    PacifistaNewsService,
+    PageOption,
+    QueryBuilder
 } from "@funixproductions/funixproductions-requests";
 import {HttpClient} from "@angular/common/http";
 import {environment} from "../../../../../environments/environment";
-import {isPlatformBrowser} from "@angular/common";
 
 @Component({
   selector: 'news-section',
   templateUrl: './news-accueil-section.component.html',
   styleUrls: ['./news-accueil-section.component.scss']
 })
-export class NewsAccueilSectionComponent implements AfterViewInit {
+export class NewsAccueilSectionComponent implements OnInit {
 
   private readonly newsService: PacifistaNewsService;
 
@@ -26,9 +25,7 @@ export class NewsAccueilSectionComponent implements AfterViewInit {
     this.newsService = new PacifistaNewsService(httpClient, environment.production);
   }
 
-  ngAfterViewInit(): void {
-    if (!isPlatformBrowser(this.platfomId)) return;
-
+  ngOnInit(): void {
     const pageOption = new PageOption();
     pageOption.elemsPerPage = 3;
     pageOption.sort = 'createdAt:desc';

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

@@ -0,0 +1,37 @@
+<div class="row align-items-center bg-dark rounded-3 p-2 mb-3">
+    <div class="col-md-6">
+        <div class="row align-items-center justify-content-start">
+            <div class="col-md-2">
+                <h3># {{ position }}</h3>
+            </div>
+            <div class="col-md-3 align-self-center">
+                <minecraft-head
+                        [username]=username
+                        [size]="64">
+                </minecraft-head>
+            </div>
+            <div class="col-md-4">
+                <h3>{{ username }}</h3>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-3">
+        <div *ngIf="position == 1">
+            <span class="badge text-bg-primary">10 jours de Pacifista+</span>
+        </div>
+        <div *ngIf="position == 2">
+            <span class="badge text-bg-primary">5 jours de Pacifista+</span>
+        </div>
+        <div *ngIf="position == 3">
+            <span class="badge text-bg-primary">3 jours de Pacifista+</span>
+        </div>
+        <div *ngIf="position >= 1 && position <= 10">
+            <span class="badge text-bg-warning">{{ getMoneyGain() }} PC</span>
+        </div>
+    </div>
+
+    <div class="col-md-3">
+        <h3>{{ votes }}</h3>
+    </div>
+</div>

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

@@ -0,0 +1,3 @@
+h3 {
+  font-size: 25px;
+}

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,44 @@
+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;
+
+  getMoneyGain(): number | undefined {
+    if (this.position >= 1 && this.position <= 10) {
+      if (this.position === 1) {
+        return 15000;
+      } else if (this.position === 2) {
+        return 10000;
+      } else if (this.position === 3) {
+        return 7500;
+      } else if (this.position === 4) {
+        return 5000;
+      } else if (this.position === 5) {
+        return 4000;
+      } else if (this.position === 6) {
+        return 3000;
+      } else if (this.position === 7) {
+        return 2000;
+      } else if (this.position === 8) {
+        return 1500;
+      } else if (this.position === 9) {
+        return 1000;
+      } else if (this.position === 10) {
+        return 500;
+      } else {
+        return undefined;
+      }
+    } else {
+      return undefined;
+    }
+  }
+
+}

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

@@ -0,0 +1,37 @@
+<div *ngIf="topVoters.length > 0; else noVoters">
+    <hr>
+    <div class="row align-items-center p-2 mb-2">
+        <div class="col-6">
+            <div class="row align-items-center justify-content-start">
+                <div class="col-2">
+                    <h3>Rang</h3>
+                </div>
+                <div class="col-6">
+                    <h3>Pseudo</h3>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-3">
+            <h3>Récompenses</h3>
+        </div>
+
+        <div class="col-3">
+            <h3>Votes</h3>
+        </div>
+    </div>
+
+    <div *ngFor="let userVote of topVoters; let i = index">
+        <app-vote-classement-row
+                [position]="i + 1"
+                [username]="userVote.username"
+                [votes]="userVote.votesCount"
+        ></app-vote-classement-row>
+    </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.scss

@@ -0,0 +1,3 @@
+h3 {
+  font-size: 20px;
+}

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,32 @@
+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;
+      }
+    })
+  }
+
+}

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

@@ -0,0 +1,28 @@
+<div *ngIf="!loading; else loadingState" class="p-1">
+    <button type="button" *ngIf="!availableAt; else voteCooldown" class="btn btn-success position-relative" (click)="makeVote()">
+        <i class="bi bi-box-arrow-up-right"></i>
+        {{ voteWebsite.displayName }}
+
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+            <i class="bi bi-clock-fill"></i>
+            {{ convertMinutesInHours() }}
+        </span>
+    </button>
+    <ng-template #voteCooldown>
+        <button class="btn btn-secondary" disabled>
+            <i class="bi bi-clock-fill"></i>
+            {{ countdown }}
+        </button>
+    </ng-template>
+</div>
+
+<ng-template #loadingState>
+    <button class="btn btn-success" disabled>
+        <div class="d-flex justify-content-center align-items-center p-1">
+            <div class="spinner-border text-white" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <span class="ps-1">{{ voteWebsite.displayName }}</span>
+        </div>
+    </button>
+</ng-template>