Angular

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 */