Angular

api/classes.py

@@ -36,6 +36,16 @@ class Payment(json.JSONEncoder):
             print("Can't save?")
 
         return 
+
+    @staticmethod 
+    def get_all(conn: Connection):
+        cur = conn.cursor()
+        cur.execute("select id,amount,message,name from orders")
+        data = cur.fetchall()
+        if data is not None:
+            return [Payment(p[0],p[1],p[2],p[3]) for p in data]
+        return None
+
     def __repr__(self) -> str:
         return '{} - {}€- {}'.format(self.name,self.amount/100,self.message)
     def to_json(self) -> dict:

api/results/order.json

@@ -0,0 +1,82 @@
+{
+    "data": {
+        "payer": {
+            "email": "",
+            "address": "TEST",
+            "city": "TEST",
+            "zipCode": "TEST",
+            "country": "FRA",
+            "dateOfBirth": "1986-07-05T00:00:00+02:00",
+            "firstName": "Thomas",
+            "lastName": "Ma"
+        },
+        "items": [
+            {
+                "payments": [
+                    {
+                        "id": 5434,
+                        "shareAmount": 10000
+                    }
+                ],
+                "priceCategory": "Fixed",
+                "customFields": [
+                    {
+                        "id": 928,
+                        "name": "Message",
+                        "type": "TextInput",
+                        "answer": "TEST MESSAGE"
+                    }
+                ],
+                "qrCode": "Nzc5Mjo2MzgzMDA3MDY3NDc3OTIyNjY=",
+                "tierId": 1141,
+                "id": 7792,
+                "amount": 10000,
+                "type": "Donation",
+                "initialAmount": 10000,
+                "state": "Processed"
+            }
+        ],
+        "payments": [
+            {
+                "items": [
+                    {
+                        "id": 7792,
+                        "shareAmount": 10000,
+                        "shareItemAmount": 10000
+                    }
+                ],
+                "cashOutState": "MoneyIn",
+                "paymentReceiptUrl": "https://www.helloasso-sandbox.com/associations/ladoseapi/formulaires/1/paiement-attestation/7792/5434",
+                "id": 5434,
+                "amount": 10000,
+                "date": "2023-09-11T23:11:31.7066918+02:00",
+                "paymentMeans": "Card",
+                "installmentNumber": 1,
+                "state": "Authorized",
+                "meta": {
+                    "createdAt": "2023-09-11T23:11:14.7792266+02:00",
+                    "updatedAt": "2023-09-11T23:11:31.7566667+02:00"
+                },
+                "refundOperations": []
+            }
+        ],
+        "amount": {
+            "total": 10000,
+            "vat": 0,
+            "discount": 0
+        },
+        "id": 7792,
+        "date": "2023-09-11T23:11:31.7066918+02:00",
+        "formSlug": "1",
+        "formType": "Donation",
+        "organizationName": "LaDOSEApi",
+        "organizationSlug": "ladoseapi",
+        "meta": {
+            "createdAt": "2023-09-11T23:11:14.7792266+02:00",
+            "updatedAt": "2023-09-11T23:11:31.8629523+02:00"
+        },
+        "isAnonymous": false,
+        "isAmountHidden": false
+    },
+    "eventType": "Order"
+}

api/results/test.json

@@ -0,0 +1,54 @@
+{
+    "data": {
+        "order": {
+            "id": 7780,
+            "date": "2023-09-11T22:55:04.923001+02:00",
+            "formSlug": "1",
+            "formType": "Donation",
+            "organizationName": "LaDOSEApi",
+            "organizationSlug": "ladoseapi",
+            "formName": "Faire un don",
+            "meta": {
+                "createdAt": "0001-01-01T00:00:00+00:00",
+                "updatedAt": "0001-01-01T00:00:00+00:00"
+            },
+            "isAnonymous": false,
+            "isAmountHidden": false
+        },
+        "payer": {
+            "email": "",
+            "address": "ddd",
+            "city": "dddd",
+            "zipCode": "ddd",
+            "country": "FRA",
+            "dateOfBirth": "1986-07-05T00:00:00+02:00",
+            "firstName": "Thomas",
+            "lastName": "Ma"
+        },
+        "items": [
+            {
+                "shareAmount": 10000,
+                "shareItemAmount": 10000,
+                "id": 7780,
+                "amount": 10000,
+                "type": "Donation",
+                "state": "Processed"
+            }
+        ],
+        "cashOutDate": "0001-01-01T00:00:00+00:00",
+        "cashOutState": "MoneyIn",
+        "paymentReceiptUrl": "https://www.helloasso-sandbox.com/associations/ladoseapi/formulaires/1/paiement-attestation/7780/5428",
+        "id": 5428,
+        "amount": 10000,
+        "date": "2023-09-11T22:55:04.923001+02:00",
+        "paymentMeans": "Card",
+        "installmentNumber": 1,
+        "state": "Authorized",
+        "meta": {
+            "createdAt": "2023-09-11T22:54:49.7032496+02:00",
+            "updatedAt": "2023-09-11T22:55:04.97+02:00"
+        },
+        "refundOperations": []
+    },
+    "eventType": "Payment"
+}

api/serv.py

@@ -60,6 +60,16 @@ def test():
     notify_client_payment(p)
     return jsonify(p), 200
 
+@app.route('/replay')
+def replay():
+    ps = Payment.get_all(get_db())
+    print(ps)
+    if ps:
+        for p in ps:
+            print(repr(p))
+            notify_client_payment(p)
+    return jsonify(ps), 200
+
 @app.route('/last')
 def last():
     print(len(clients_list))

front-end/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@angular/cli": "^17.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

front-end/src/App.tsx

@@ -3,16 +3,21 @@ import {Route , Routes} from 'react-router-dom'
 import Donations from './Pages/Donations'
 import Total from './Pages/Total'
 import Home from './Pages/Home'
+import {WebSocketProvider} from './Context/Webscoket'
 import './App.css';
 function App() {
   return (
     <div className="App">
     <>
+    <WebSocketProvider>
+
     <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/donations" element={<Donations />} />
         <Route path="/total" element={<Total />} />
     </Routes>
+
+    </WebSocketProvider>
     </>
     </div>
   );

front-end/src/Context/Webscoket.tsx

@@ -0,0 +1,45 @@
+import React, {Children, PropsWithChildren} from "react";
+import {BooleanLiteral} from "typescript";
+
+
+
+export type WebSocketInfo  = {
+    isReady : Boolean;
+    data : any;
+}
+
+export interface WebSocketProps {
+    readonly data : WebSocketInfo | null
+    readonly setData : (data : WebSocketInfo) => void;
+    readonly loadData: () => Promise<void>;
+}
+
+export const WebSocketContext = React.createContext<WebSocketProps>({ data : null, 
+                                                               setData: () => null,
+                                                               loadData: async () => {} });
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const WebSocketProvider : React.FC<Props> = ({ children }) => {
+    const [data, setData] = React.useState<WebSocketInfo|null>(null);
+
+    const loadData = async () => {
+        console.log("data");
+    }
+    const value = {
+        data,
+        setData,
+        loadData
+    }
+
+    return (
+    <WebSocketContext.Provider value = {value}>
+        { children }
+    </WebSocketContext.Provider>
+    );
+
+};
+
+

front-end/src/Pages/Donations.tsx

@@ -1,31 +1,40 @@
-import {useState} from "react";
+import {Component, useState} from "react";
+import {WebSocketContext} from "../Context/Webscoket";
 import Box from './Box'
-function Donations(){
-    const [donations,setDonations] = useState([{name:"",amount:0.,message:""}]);
-    const ws = new WebSocket('ws://localhost:5000/notify');
-    ws.onopen = (event) => {
-        console.log(event);
-    }
-    ws.onmessage = (event) => {
-        const json = JSON.parse(event.data);
-        try{
-            setDonations([...donations.slice(-4),json]);
-        }
-        catch(err)
-        {
-            console.log(err);
-        }
-    }
-    const setError = (ev:any) =>{
-        setDonations([{name:"error",amount:0,message:"We lost connection"}]);
-    }
-    ws.onclose = setError;
-    ws.onerror = setError;
+class Donations extends Component {
+ static contextType = WebSocketContext;
 
-    return (<div>
-            {donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
+    
+ //   const [donations,setDonations] = useState([{name:"",amount:0.,message:""}]);
+//    const ws = new WebSocket('ws://localhost:5000/notify');
+//    ws.onopen = (event) => {
+//        console.log(event);
+//    }
+//    ws.onmessage = (event) => {
+//        const json = JSON.parse(event.data);
+//        try{
+//            console.log(json);
+//            setDonations((d) => {return [...d.slice(-4),json]});
+//        }
+//        catch(err)
+//        {
+//            console.log(err);
+//        }
+//    }
+//    const setError = (ev:any) =>{
+//        setDonations([{name:"error",amount:0,message:"We lost connection"}]);
+//    }
+//    ws.onclose = setError;
+//    ws.onerror = setError;
+//           {donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
+// 
+    render(){
+    let data = this.context;
+    console.log(data?.data);
+    return (<div> 
             </div>
            );
+        }
 }
 
 export default Donations

frontend/.gitignore

@@ -0,0 +1,61 @@
+.DS_STORE
+
+/dist/
+/bazel-out
+/integration/bazel/bazel-*
+*.log
+/node_modules/
+
+# CircleCI temporary file for cache key computation.
+# See `save_month_to_file` in `.circleci/config.yml`.
+month.txt
+
+# Include when developing application packages.
+pubspec.lock
+.c9
+.idea/
+.devcontainer/*
+!.devcontainer/README.md
+!.devcontainer/recommended-devcontainer.json
+!.devcontainer/recommended-Dockerfile
+.settings/
+.vscode/launch.json
+.vscode/settings.json
+.vscode/tasks.json
+*.swo
+*.swp
+modules/.settings
+modules/.vscode
+.vimrc
+.nvimrc
+
+# Don't check in secret files
+*secret.js
+
+# Ignore npm/yarn debug log
+npm-debug.log
+yarn-error.log
+
+# build-analytics
+.build-analytics
+
+# rollup-test output
+/modules/rollup-test/dist/
+
+# User specific bazel settings
+.bazelrc.user
+
+# User specific ng-dev settings
+.ng-dev.user*
+
+.notes.md
+baseline.json
+
+# Ignore .history for the xyz.local-history VSCode extension
+.history
+
+# Husky
+.husky/_
+aio/content/examples/.DS_Store
+
+.angular/*

frontend/README.md

@@ -0,0 +1,27 @@
+# Helloasso
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

frontend/angular.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "helloasso": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/helloasso",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "helloasso:build:production"
+            },
+            "development": {
+              "buildTarget": "helloasso:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "helloasso:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "helloasso",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.2.2"
+  }
+}

frontend/src/app/app.component.html

@@ -0,0 +1,2 @@
+
+<router-outlet></router-outlet>

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

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'helloasso' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('helloasso');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, helloasso');
+  });
+});

frontend/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'helloasso';
+}

frontend/src/app/app.config.ts

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

frontend/src/app/app.routes.ts

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

frontend/src/app/config/config.component.html

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

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

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

frontend/src/app/config/config.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-config',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './config.component.html',
+  styleUrl: './config.component.scss'
+})
+export class ConfigComponent {
+
+}

frontend/src/app/donation/donation.component.html

@@ -0,0 +1,30 @@
+<style>
+.like {
+    display: block;
+    width: 384px; 
+    height: 161px;
+    margin:0 auto;
+}
+.pause {
+    animation-play-state: paused;
+}
+div {
+    width: 384px;
+    margin:0 auto;
+    text-align:center;
+}
+
+</style>
+<div *ngIf="playing">
+    <audio autoplay>
+        <source src="/assets/sound.mp3"/>
+    </audio>
+    <video autoplay (ended)="onEnd()">
+        <source src="/assets/img.mp4"/>
+    </video>
+    <div>
+        <p>{{ Name }}</p>
+        <p>{{ Euro }}</p>
+        <p>{{ Message }}</p>
+    </div>
+</div>

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

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

frontend/src/app/donation/donation.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {WebsocketService} from '../../services/websocket';
+import {Subscription, delay,pipe, delayWhen, concatMap, forkJoin, timer, ignoreElements, startWith, merge} from 'rxjs';
+import { EMPTY,of,from, concat,interval,zip,throttle, filter } from 'rxjs';
+import { WSMessage } from '../models/WSMessage';
+@Component({
+    selector: 'app-donation',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './donation.component.html',
+    styleUrl: './donation.component.scss'
+})
+export class DonationComponent implements OnInit {
+    private test : number = 0;
+    private sub : Subscription;
+    public Data : String[]
+    public Name : String
+    public Euro : number
+    public playing : Boolean = false;
+    public Message : String
+
+    bound = timer(10000).pipe(filter(_ => false));
+    constructor( private socket : WebsocketService) {};
+    ngOnInit(){
+        this.sub = 
+//           this.socket.Messages.asObservable().pipe(concat(item => timer(10000).pipe(ignoreElements(),startWith(item))))
+//           zip(from(this.socket.Messages),interval(10000),(a,b) => a)
+                //
+//            this.socket.Messages.pipe(concatMap((value,index) => concat(of(value), EMPTY.pipe(delay(10000)))))
+            this.socket.Messages.pipe(concatMap(v => merge(of(v),this.bound)))
+            .subscribe((r)  => {
+            this.test+=1
+            let e = r as WSMessage;
+            console.log('Donation',this.test,e)
+            this.Name = e.Name;
+            this.Euro = e.Euro;
+            this.Message = e.Message;
+            this.playing = true;
+        });
+    }
+
+    public onEnd(){
+        setTimeout(()=>{ this.playing = false; } , 3000);
+    }
+
+
+}

frontend/src/app/donator-box/donator-box.component.html

@@ -0,0 +1 @@
+<p>donator-box works!</p>

frontend/src/app/donator-box/donator-box.component.spec.ts

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

frontend/src/app/donator-box/donator-box.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-donator-box',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './donator-box.component.html',
+  styleUrl: './donator-box.component.scss'
+})
+export class DonatorBoxComponent {
+
+}

frontend/src/app/models/WSMessage.ts

@@ -0,0 +1,10 @@
+export class WSMessage {
+    constructor(message:String,name:String,euro:number){
+        this.Euro = euro;
+        this.Name = name;
+        this.Message = message;
+    }
+    Message : String;
+    Name : String;
+    Euro : number;
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-topdonors',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './topdonors.component.html',
+  styleUrl: './topdonors.component.scss'
+})
+export class TopdonorsComponent {
+
+}

frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Helloasso</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

frontend/src/services/websocket.ts

@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import {Observable, Observer, Subject} from 'rxjs';
+import { WSMessage } from '../app/models/WSMessage';
+@Injectable({
+    providedIn: 'root',
+})
+export class WebsocketService {
+
+    private isConnected: Boolean = false;
+    private socket: WebSocket;
+    
+    public Messages: Subject<WSMessage>
+
+    constructor() {
+        this.connect();
+        this.Messages = new Subject<WSMessage>();
+    }
+
+    needConnect() {
+        return !this.isConnected;
+    }
+    connect(){
+        this.socket = new WebSocket('ws://localhost:5000/notify');
+
+    this.socket.onopen = () => {
+      this.isConnected = true;
+      console.log('WebSocket connection established.');
+    };
+
+    this.socket.onmessage = (event) => {
+      console.log('Received message:', event.data);
+      let e = JSON.parse(event.data);
+      this.Messages.next(
+          new WSMessage(e.message as String,e.name as String,e.amount as number)
+      );
+    };
+
+    this.socket.onclose = (event) => {
+     this.isConnected = false;  
+      console.log('WebSocket connection closed:', event);
+    };
+
+    this.socket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+        console.log("Connection");
+    }
+
+
+}

frontend/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

frontend/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}