Angular

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"
+  ]
+}