Top Donators / Total

frontend/src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
+import {HttpClientModule} from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet],
+  imports: [CommonModule, RouterOutlet,HttpClientModule],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

frontend/src/app/app.config.ts

@@ -1,8 +1,9 @@
+import {provideHttpClient} from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes),provideHttpClient()]
 };

frontend/src/app/app.routes.ts

@@ -1,9 +1,10 @@
 import {DonationComponent} from "./donation/donation.component";
 import {TopdonorsComponent} from "./topdonors/topdonors.component";
 import { Routes } from '@angular/router';
+import {TotalComponent} from "./total/total.component";
 
 export const routes: Routes = [
     { path: 'topdonors' , component: TopdonorsComponent },
-    { path: 'donation' , component: DonationComponent }
-
+    { path: 'donations' , component: DonationComponent },
+    { path: 'total' , component: TotalComponent },
 ];

frontend/src/app/models/WSMessage.ts

@@ -8,3 +8,8 @@ export class WSMessage {
     Name : String;
     Euro : number;
 }
+
+export class Donator {
+    name : String;
+    amount : number;
+}

frontend/src/app/topdonors/topdonors.component.html

@@ -1 +1,12 @@
-<p>topdonors works!</p>
+<table>
+    <thead>
+        <th>Nom</th>
+        <th>Montant</th>
+    </thead>
+    <tbody>
+        <tr *ngFor="let d of donators" >
+            <td>{{d.name}}</td>
+            <td>{{d.amount}}</td>
+        </tr>
+    </tbody>
+</table>

frontend/src/app/topdonors/topdonors.component.ts

@@ -1,5 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {WebsocketService} from '../../services/websocket';
+import {ApiService} from '../../services/api';
+import {Donator} from '../models/WSMessage';
 
 @Component({
   selector: 'app-topdonors',
@@ -8,6 +11,20 @@ import { CommonModule } from '@angular/common';
   templateUrl: './topdonors.component.html',
   styleUrl: './topdonors.component.scss'
 })
-export class TopdonorsComponent {
+export class TopdonorsComponent implements OnInit{
 
+    donators: Donator[] = []
+
+    constructor( private socket : WebsocketService,private ApiService: ApiService) {};
+
+    ngOnInit(): void {
+        this.getDonators();
+        this.socket.Messages.subscribe(s => {
+            this.getDonators();
+        });
+    }
+
+    getDonators(){
+            this.ApiService.TopDonators().subscribe(donators => this.donators = donators);
+    }
 }

frontend/src/app/total/total.component.html

@@ -0,0 +1 @@
+<p>{{Total}}</p>

frontend/src/app/total/total.component.spec.ts

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

frontend/src/app/total/total.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {WebsocketService} from '../../services/websocket';
+import {ApiService} from '../../services/api';
+
+@Component({
+  selector: 'app-total',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './total.component.html',
+  styleUrl: './total.component.scss'
+})
+export class TotalComponent implements OnInit{
+
+    Total : string;
+
+    constructor( private socket : WebsocketService,private ApiService: ApiService) {};
+
+    ngOnInit(): void {
+        this.getTotal();
+        this.socket.Messages.subscribe(s => {
+            this.getTotal();
+        });
+    }
+
+    getTotal(){
+            this.ApiService.Total().subscribe(t => this.Total = t as string);
+    }
+}

frontend/src/environments/environment.development.ts

@@ -0,0 +1,4 @@
+export const environment = {
+    production : false,
+    apiUrl : 'http://localhost:5000/'
+};

frontend/src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+    production : false,
+    apiUrl : 'http://localhost:5000/'
+};

frontend/src/services/api.ts

@@ -0,0 +1,22 @@
+
+import {HttpClient} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import {Observable, Observer, Subject} from 'rxjs';
+import { Donator, WSMessage } from '../app/models/WSMessage';
+import {environment} from '../environments/environment';
+@Injectable({
+    providedIn: 'root',
+})
+export class ApiService {
+
+    constructor(private httpClient : HttpClient) {
+    }
+
+    Total() {
+        return this.httpClient.get(`${environment.apiUrl}/total`);
+    }
+
+    TopDonators() : Observable<Donator[]> {
+        return this.httpClient.get<Donator[]>(`${environment.apiUrl}/topdonators`);
+    }
+}