Merge pull request 'catchup' (#13) from devel into main

Reviewed-on: #13

.gitea/workflows/deploy-api.yaml

@@ -0,0 +1,16 @@
+name: Deploy API
+
+jobs:
+  Build-Api:
+    runs-on: rainbow-1
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v7
+      - run: cd packages/api
+      - run: pnpm install --prod
+      - run: tsc -p .
+      - name: Publish Artifact
+        uses: actions/upload-artifact@v7
+        with:
+          path: ./dist
+          retention-days: 2S

.gitignore

@@ -161,3 +161,5 @@ dist
 .ionide
 
 # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode
+packages/api/src/services/keycloak/admin/nodejs-api.prod.json
+packages/api/src/services/keycloak/user/keycloak.prod.json

package.json

@@ -12,7 +12,7 @@
   "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "type": "module",
   "devDependencies": {
-    "nodemon": "^3.1.11",
+    "nodemon": "^3.1.14",
     "tsoa": "^6.6.0"
   }
 }

packages/api/.gitignore

@@ -5,3 +5,10 @@ generated/
 .env
 
 keycloak/realm-export
+
+src/cert.pem
+src/key.pem
+
+storage
+
+src/services/push/vapid.json

packages/api/dev/postgres/initdb/webapi.sql

@@ -0,0 +1,16 @@
+CREATE ROLE webapi WITH
+  LOGIN
+  NOSUPERUSER
+  INHERIT
+  NOCREATEDB
+  NOCREATEROLE
+  NOREPLICATION
+  NOBYPASSRLS
+  PASSWORD 'devpassword';
+
+ALTER DEFAULT PRIVILEGES FOR ROLE postgres IN SCHEMA public
+GRANT DELETE, INSERT, SELECT, UPDATE ON TABLES TO webapi;
+
+ALTER DEFAULT PRIVILEGES FOR ROLE postgres IN SCHEMA public
+GRANT USAGE ON TYPES TO webapi;
+ --GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO webapi;

packages/api/package.json

@@ -4,36 +4,43 @@
     "scripts": {
         "start": "node dist/index.js",
         "build": "tsc -p .",
-        "dev": "pnpm -w run dev"
+        "dev": "pnpm -w run dev",
+        "postinstall": "playwright install"
     },
     "type": "module",
-    "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
+    "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
     "private": true,
     "devDependencies": {
         "@types/connect-pg-simple": "^7.0.3",
         "@types/cors": "^2.8.19",
-        "@types/express": "^5.0.5",
+        "@types/express": "^5.0.6",
         "@types/express-session": "^1.18.2",
-        "@types/node": "^24.9.2",
-        "@types/pg": "^8.15.6",
-        "prisma": "^7.0.1",
-        "tsx": "^4.20.6",
+        "@types/node": "^25.3.5",
+        "@types/pg": "^8.18.0",
+        "@types/web-push": "^3.6.4",
+        "prisma": "^7.5.0",
+        "tsx": "^4.21.0",
         "typescript": "~5.9.3"
     },
     "dependencies": {
-        "@keycloak/keycloak-admin-client": "^26.4.4",
-        "@prisma/adapter-pg": "^7.0.1",
-        "@prisma/client": "^7.0.1",
+        "@keycloak/keycloak-admin-client": "^26.5.5",
+        "@prisma/adapter-pg": "^7.4.2",
+        "@prisma/client": "^7.5.0",
         "@tsoa/runtime": "^6.6.0",
         "connect-pg-simple": "^10.0.0",
-        "cors": "^2.8.5",
-        "dotenv": "^17.2.3",
-        "express": "^5.1.0",
-        "express-session": "^1.18.2",
+        "cors": "^2.8.6",
+        "crawlee": "^3.16.0",
+        "cron": "^4.4.0",
+        "date-fns": "^4.1.0",
+        "dotenv": "^17.3.1",
+        "express": "^5.2.1",
+        "express-session": "^1.19.0",
         "helmet": "^8.1.0",
         "keycloak-connect": "^26.1.1",
-        "pg": "^8.16.3",
+        "pg": "^8.20.0",
+        "playwright": "^1.58.2",
         "rxjs": "~7.8.2",
-        "tsoa": "^6.6.0"
+        "tsoa": "^6.6.0",
+        "web-push": "^3.6.7"
     }
 }

packages/api/prisma.config.ts

@@ -4,7 +4,7 @@ import "dotenv/config";
 import { defineConfig, env } from "prisma/config";
 
 export default defineConfig({
-    schema: "prisma/schema.prisma",
+    schema: "prisma/schema",
     migrations: {
         path: "prisma/migrations",
     },

packages/api/prisma/migrations/20260307235932_member_creation_date/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Member" ADD COLUMN     "creationDate" DATE;

packages/api/prisma/migrations/20260308000632_creation_date_default/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Member" ALTER COLUMN "creationDate" SET DEFAULT CURRENT_TIMESTAMP;

packages/api/prisma/migrations/20260308214122_scraper/migration.sql

@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "FoundEvents" (
+    "id" UUID NOT NULL DEFAULT uuidv7(),
+    "source" VARCHAR NOT NULL,
+    "url" VARCHAR NOT NULL,
+    "foundDate" DATE NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "eventDate" DATE NOT NULL,
+    "title" VARCHAR NOT NULL,
+    "description" VARCHAR NOT NULL,
+    "attachedFile" BYTEA NOT NULL,
+
+    CONSTRAINT "FoundEvents_pkey" PRIMARY KEY ("id")
+);

packages/api/prisma/migrations/20260308234748_found_events2/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "FoundEvents" ALTER COLUMN "eventDate" DROP NOT NULL,
+ALTER COLUMN "title" DROP NOT NULL,
+ALTER COLUMN "description" DROP NOT NULL,
+ALTER COLUMN "attachedFile" DROP NOT NULL,
+ALTER COLUMN "attachedFile" SET DATA TYPE VARCHAR;

packages/api/prisma/migrations/20260308235352_event_attachments/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `attachedFile` on the `FoundEvents` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "FoundEvents" DROP COLUMN "attachedFile";
+
+-- CreateTable
+CREATE TABLE "FoundEventAttachments" (
+    "id" UUID NOT NULL DEFAULT uuidv7(),
+    "url" VARCHAR NOT NULL,
+    "eventId" UUID NOT NULL,
+
+    CONSTRAINT "FoundEventAttachments_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "FoundEventAttachments" ADD CONSTRAINT "FoundEventAttachments_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "FoundEvents"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/api/prisma/migrations/20260309001330_eventdaterange/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "FoundEvents" ALTER COLUMN "eventDate" SET DATA TYPE VARCHAR;

packages/api/prisma/migrations/20260309234839_push_subscriptions/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "PushSubscription" (
+    "id" UUID NOT NULL DEFAULT uuidv7(),
+    "endpoint" VARCHAR NOT NULL,
+    "expirationTime" DOUBLE PRECISION,
+    "userSubscriptionId" UUID,
+    "p256dh" VARCHAR NOT NULL,
+    "auth" VARCHAR NOT NULL,
+    "userId" VARCHAR NOT NULL,
+
+    CONSTRAINT "PushSubscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PushSubscription_userSubscriptionId_key" ON "PushSubscription"("userSubscriptionId");

packages/api/prisma/migrations/20260312000535_subscriptions2/migration.sql

@@ -0,0 +1,26 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `userSubscriptionId` on the `PushSubscription` table. All the data in the column will be lost.
+  - Added the required column `clientId` to the `PushSubscription` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `topic` to the `PushSubscription` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropIndex
+DROP INDEX "PushSubscription_userSubscriptionId_key";
+
+-- AlterTable
+ALTER TABLE "PushSubscription" DROP COLUMN "userSubscriptionId",
+ADD COLUMN     "clientId" UUID NOT NULL,
+ADD COLUMN     "topic" "Topic" NOT NULL,
+ADD COLUMN     "topicConfiguration" JSONB;
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" VARCHAR NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "PushSubscription" ADD CONSTRAINT "PushSubscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/api/prisma/migrations/20260315111316_attachment_title/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `title` to the `FoundEventAttachments` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "FoundEventAttachments" ADD COLUMN     "title" VARCHAR NOT NULL;

packages/api/prisma/migrations/20260315142547_notifications_implementation/migration.sql

@@ -0,0 +1,5 @@
+-- AlterEnum
+ALTER TYPE "Topic" ADD VALUE 'EVENTS';
+
+-- AlterTable
+ALTER TABLE "PushSubscription" ADD COLUMN     "lastNotified" DATE;

packages/api/prisma/schema.prisma

@@ -1,36 +0,0 @@
-generator client {
-  provider = "prisma-client"
-  output   = "../src/generated/prisma"
-}
-
-datasource db {
-  provider = "postgresql"
-}
-
-model Member {
-  id             String    @id @default(dbgenerated("uuidv7()")) @db.Uuid
-  vorname        String?   @db.VarChar
-  nachname       String?   @db.VarChar
-  geburtsdatum   DateTime? @db.Date
-  geburtsort     String?   @db.VarChar
-  geschlecht     String?   @db.VarChar
-  passnummer     String?   @db.VarChar
-  verein         Boolean?
-  graduierung    String?   @db.VarChar
-  letztePruefung DateTime? @db.Date
-  kontakt        String?   @db.VarChar
-  kuendigungzum  DateTime? @db.Date
-  marker         Boolean?
-}
-
-model session {
-  sid    String   @id @db.VarChar
-  sess   Json     @db.Json
-  expire DateTime @db.Timestamp(6)
-
-  @@index([expire], map: "IDX_session_expire")
-}
-
-enum Topic {
-  TEST
-}

packages/api/prisma/schema/exam.prisma

@@ -0,0 +1,6 @@
+model Exam {
+  id          String       @id @default(dbgenerated("uuidv7()"))
+  date        DateTime     @db.Date
+  title       String       @db.VarChar
+  memberExams MemberExam[]
+}

packages/api/prisma/schema/foundEventAttachments.prisma

@@ -0,0 +1,7 @@
+model FoundEventAttachments {
+  id      String      @id @default(dbgenerated("uuidv7()")) @db.Uuid
+  title   String      @db.VarChar
+  url     String      @db.VarChar
+  event   FoundEvents @relation(fields: [eventId], references: [id])
+  eventId String      @db.Uuid
+}

packages/api/prisma/schema/foundEvents.prisma

@@ -0,0 +1,10 @@
+model FoundEvents {
+  id            String                  @id @default(dbgenerated("uuidv7()")) @db.Uuid
+  source        String                  @db.VarChar
+  url           String                  @db.VarChar
+  foundDate     DateTime                @default(now()) @db.Date
+  eventDate     String?                 @db.VarChar
+  title         String?                 @db.VarChar
+  description   String?                 @db.VarChar
+  attachedFiles FoundEventAttachments[]
+}

packages/api/prisma/schema/member.prisma

@@ -0,0 +1,17 @@
+model Member {
+  id             String       @id @default(dbgenerated("uuidv7()")) @db.Uuid
+  vorname        String?      @db.VarChar
+  nachname       String?      @db.VarChar
+  geburtsdatum   DateTime?    @db.Date
+  geburtsort     String?      @db.VarChar
+  geschlecht     String?      @db.VarChar
+  passnummer     String?      @db.VarChar
+  verein         Boolean?
+  graduierung    String?      @db.VarChar
+  letztePruefung DateTime?    @db.Date
+  kontakt        String?      @db.VarChar
+  kuendigungzum  DateTime?    @db.Date
+  marker         Boolean?
+  creationDate   DateTime?    @default(now()) @db.Date
+  memberExams    MemberExam[]
+}

packages/api/prisma/schema/memberExam.prisma

@@ -0,0 +1,13 @@
+model MemberExam {
+  id          String @id @default(dbgenerated("uuidv7()")) @db.Uuid
+  targetGrade String @db.VarChar
+
+  memberId String @db.Uuid
+  member   Member @relation(fields: [memberId], references: [id])
+
+  examId String @db.Uuid
+  exam   Exam   @relation(fields: [examId], references: [id])
+
+  passed  Boolean?
+  comment String?  @db.VarChar
+}

packages/api/prisma/schema/pushSubscription.prisma

@@ -0,0 +1,15 @@
+model PushSubscription {
+  id             String @id @default(dbgenerated("uuidv7()")) @db.Uuid
+  endpoint       String @db.VarChar
+  expirationTime Float?
+  p256dh         String @db.VarChar
+  auth           String @db.VarChar
+
+  userId String @db.VarChar
+  user   User   @relation(fields: [userId], references: [id])
+
+  topic              Topic
+  topicConfiguration Json?     @db.JsonB
+  clientId           String    @db.Uuid
+  lastNotified       DateTime? @db.Date
+}

packages/api/prisma/schema/schema.prisma

@@ -0,0 +1,8 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../../src/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}

packages/api/prisma/schema/session.prisma

@@ -0,0 +1,7 @@
+model session {
+  sid    String   @id @db.VarChar
+  sess   Json     @db.Json
+  expire DateTime @db.Timestamp(6)
+
+  @@index([expire], map: "IDX_session_expire")
+}

packages/api/prisma/schema/topic.prisma

@@ -0,0 +1,4 @@
+enum Topic {
+  TEST
+  EVENTS
+}

packages/api/prisma/schema/user.prisma

@@ -0,0 +1,4 @@
+model User {
+  id            String             @id @db.VarChar
+  subscriptions PushSubscription[]
+}

packages/api/src/controllers/examsController.ts

@@ -0,0 +1,39 @@
+import express from "express";
+import { Body, Controller, Get, Path, Post, Query, Request, Route } from "tsoa";
+import type {
+    ExamCreationDto,
+    ExamDto,
+    ExamWithMembersDto,
+    MemberExamCreationDto,
+    MemberExamDto,
+} from "../dtos/examDto.js";
+import { inject } from "../infrastructure/di/index.js";
+import { ExamsService } from "../services/examsService.js";
+
+@Route("exams")
+export class ExamsController extends Controller {
+    private readonly examsService = inject(ExamsService);
+
+    @Post()
+    public async createExam(
+        @Request() request: express.Request,
+        @Body() newExam: ExamCreationDto,
+    ): Promise<ExamDto> {
+        return await this.examsService.createExam(newExam, request);
+    }
+
+    @Get("latest")
+    public async getLatestExam(
+        @Request() request: express.Request,
+    ): Promise<ExamWithMembersDto | null> {
+        return await this.examsService.getLatest(request);
+    }
+
+    @Post("register/{examId}")
+    public async registerForExam(
+        @Request() request: express.Request,
+        @Body() newRegistration: MemberExamCreationDto
+    ): Promise<MemberExamDto> {
+        return await this.examsService.register(newRegistration, request);
+    }
+}

packages/api/src/controllers/foundEventsController.ts

@@ -0,0 +1,27 @@
+import express from "express";
+import {
+    Controller,
+    Get,
+    Request,
+    Route,
+    Security,
+    SuccessResponse,
+} from "tsoa";
+import type { FoundEventDto } from "../dtos/foundEvents.js";
+import { inject } from "../infrastructure/di/index.js";
+import { FoundEventsService } from "../services/foundEvents/foundEventsService.js";
+import { KC_SECURITY_NAME } from "../services/keycloak/user/keycloak-user.js";
+
+@Route("found-events")
+export class FoundEventsController extends Controller {
+    private readonly foundEventsService = inject(FoundEventsService);
+
+    @Get("future")
+    @Security(KC_SECURITY_NAME)
+    @SuccessResponse("200", "OK")
+    public async getFutureEvents(
+        @Request() request: express.Request,
+    ): Promise<FoundEventDto[]> {
+        return await this.foundEventsService.getFutureEvents(request);
+    }
+}

packages/api/src/controllers/membersController.ts

@@ -103,7 +103,7 @@ export class MembersContoller extends Controller {
     ) {
         await this.membersService.scheduleDeletion(
             memberId,
-            cancelDate,
+            cancelDate ? cancelDate : null,
             request,
         );
     }

packages/api/src/controllers/pushController.ts

@@ -0,0 +1,44 @@
+import express from "express";
+import {
+    Body,
+    Controller,
+    Post,
+    Query,
+    Request,
+    Route,
+    Security,
+    SuccessResponse,
+} from "tsoa";
+import type { PushSubscriptionCreateArgs as PushSubscriptionCreateArgsDto } from "../dtos/pushSubscription.js";
+import { inject } from "../infrastructure/di/injector.js";
+import { KC_SECURITY_NAME } from "../services/keycloak/user/keycloak-user.js";
+import { PushService } from "../services/push/pushService.js";
+
+@Route("push")
+export class PushContoller extends Controller {
+    private readonly pushService = inject(PushService);
+
+    @Post("add")
+    @Security(KC_SECURITY_NAME)
+    @SuccessResponse("200", "OK")
+    public async addSubscription(
+        @Body() subscription: PushSubscriptionCreateArgsDto,
+        @Request() request: express.Request,
+    ): Promise<void> {
+        return await this.pushService.storeSubscription(
+            subscription,
+            request,
+            request.res,
+        );
+    }
+
+    @Post("clearSingle")
+    @Security(KC_SECURITY_NAME)
+    @SuccessResponse("200", "OK")
+    public async clearSubscription(
+        @Request() request: express.Request,
+        @Query() clientId?: string,
+    ): Promise<void> {
+        await this.pushService.clearSubscription(clientId ?? null, request);
+    }
+}

packages/api/src/controllers/testController.ts

@@ -0,0 +1,26 @@
+import { Controller, Post, Route, Security, SuccessResponse } from "tsoa";
+import { Claim } from "../dtos/claim.js";
+import { inject } from "../infrastructure/di/index.js";
+import { FoundEventsService } from "../services/foundEvents/foundEventsService.js";
+import { KC_SECURITY_NAME } from "../services/keycloak/user/keycloak-user.js";
+import { PushService } from "../services/push/pushService.js";
+
+@Route("test")
+export class TestContoller extends Controller {
+    private readonly pushService = inject(PushService);
+    private readonly foundEventsService = inject(FoundEventsService);
+
+    @Post("notify")
+    @Security(KC_SECURITY_NAME, [Claim.UserAdmin])
+    @SuccessResponse("200", "OK")
+    public async notifyEvents(): Promise<void> {
+        await this.pushService.sendEventNotifications();
+    }
+
+    @Post("crawl")
+    @Security(KC_SECURITY_NAME)
+    @SuccessResponse("200", "OK")
+    public async crawl(): Promise<void> {
+        await this.foundEventsService.crawl();
+    }
+}

packages/api/src/controllers/usersController.ts

@@ -13,11 +13,11 @@ import { Claim } from "../dtos/claim.js";
 import { type User } from "../dtos/user.js";
 import { inject } from "../infrastructure/di/index.js";
 import { KC_SECURITY_NAME } from "../services/keycloak/user/index.js";
-import { UserService } from "../services/userService.js";
+import { UserAdminService } from "../services/userAdminService.js";
 
 @Route("users")
 export class UsersController extends Controller {
-    private readonly userService = inject(UserService);
+    private readonly userService = inject(UserAdminService);
 
     @Security(KC_SECURITY_NAME, [Claim.UserAdmin])
     @SuccessResponse("200", "OK")

packages/api/src/dtos/examDto.ts

@@ -0,0 +1,40 @@
+import {
+    type ExamModel,
+    type MemberExamModel,
+} from "../generated/prisma/models.js";
+
+export class ExamCreationDto implements Omit<ExamModel, "id"> {
+    date!: Date;
+    title!: string;
+}
+
+export class ExamDto implements ExamModel {
+    id!: string;
+    date!: Date;
+    title!: string;
+}
+
+export class MemberExamDto implements MemberExamModel {
+    id!: string;
+    targetGrade!: string;
+    memberId!: string;
+    examId!: string;
+    passed!: boolean | null;
+    comment!: string | null;
+}
+
+export class ExamWithMembersDto implements ExamModel {
+    id!: string;
+    date!: Date;
+    title!: string;
+    memberExams!: MemberExamDto[];
+}
+
+export class MemberExamCreationDto implements Omit<
+    MemberExamModel,
+    "id" | "passed" | "comment"
+> {
+    targetGrade!: string;
+    memberId!: string;
+    examId!: string;
+}

packages/api/src/dtos/foundEvents.ts

@@ -0,0 +1,33 @@
+import type {
+    FoundEventAttachments,
+    FoundEvents,
+} from "../generated/prisma/client.js";
+
+export class FoundEventAttachmentDto implements FoundEventAttachments {
+    id!: string;
+    title!: string;
+    url!: string;
+    eventId!: string;
+}
+
+export class FoundEventDto implements FoundEvents {
+    id!: string;
+    source!: string;
+    url!: string;
+    foundDate!: Date;
+    eventDate!: string | null;
+    title!: string | null;
+    description!: string | null;
+    attachedFiles!: FoundEventAttachmentDto[];
+}
+
+export class FoundEventCreateArgs implements Omit<
+    FoundEvents,
+    "id" | "foundDate"
+> {
+    source!: string;
+    url!: string;
+    eventDate!: string | null;
+    title!: string | null;
+    description!: string | null;
+}

packages/api/src/dtos/member.ts

@@ -1,51 +1,54 @@
 import { type MemberModel as DbMember } from "../generated/prisma/models.js";
 
 export interface MemberDto {
-    id: string | null;
-    vorname: string | null;
-    nachname: string | null;
-    geburtsdatum: string | null;
-    geburtsort: string | null;
-    geschlecht: string | null;
-    passnummer: string | null;
-    verein: boolean | null;
-    graduierung: string | null;
-    letztePruefung: string | null;
-    kontakt: string | null;
-    kuendigungzum: string | null;
-    marker: boolean | null;
+    id: string;
+    vorname: string;
+    nachname: string;
+    geburtsdatum: string;
+    geburtsort: string;
+    geschlecht: string;
+    passnummer: string;
+    verein: boolean;
+    graduierung: string;
+    letztePruefung: string;
+    kontakt: string;
+    kuendigungzum: string;
+    marker: boolean;
+    creationDate: string;
 }
 
-export class MemberCreateArgs implements Omit<MemberDto, "id"> {
-    vorname!: string | null;
-    nachname!: string | null;
-    geburtsdatum!: string | null;
-    geburtsort!: string | null;
-    geschlecht!: string | null;
-    passnummer!: string | null;
-    verein!: boolean | null;
-    graduierung!: string | null;
-    letztePruefung!: string | null;
-    kontakt!: string | null;
-    kuendigungzum!: string | null;
-    marker!: boolean | null;
+export class MemberCreateArgs implements Omit<
+    MemberDto,
+    "id" | "kuendigungzum" | "letztePruefung" | "creationDate"
+> {
+    vorname!: string;
+    nachname!: string;
+    geburtsdatum!: string;
+    geburtsort!: string;
+    geschlecht!: string;
+    passnummer!: string;
+    verein!: boolean;
+    graduierung!: string;
+    kontakt!: string;
+    marker!: boolean;
 }
 
 export function mapDbMemberToMember(dbMember: DbMember): MemberDto {
     return {
-        geburtsdatum: dbMember.geburtsdatum?.toDateString() ?? null,
+        geburtsdatum: dbMember.geburtsdatum?.toDateString() ?? "",
         id: dbMember.id,
-        nachname: dbMember.nachname,
-        geburtsort: dbMember.geburtsort,
-        geschlecht: dbMember.geschlecht,
-        graduierung: dbMember.graduierung,
-        vorname: dbMember.vorname,
-        kontakt: dbMember.kontakt,
-        kuendigungzum: dbMember.kuendigungzum?.toDateString() ?? null,
-        letztePruefung: dbMember.letztePruefung?.toDateString() ?? null,
-        passnummer: dbMember.passnummer,
-        verein: dbMember.verein,
-        marker: dbMember.marker,
+        nachname: dbMember.nachname ?? "",
+        geburtsort: dbMember.geburtsort ?? "",
+        geschlecht: dbMember.geschlecht ?? "",
+        graduierung: dbMember.graduierung ?? "",
+        vorname: dbMember.vorname ?? "",
+        kontakt: dbMember.kontakt ?? "",
+        kuendigungzum: dbMember.kuendigungzum?.toDateString() ?? "",
+        letztePruefung: dbMember.letztePruefung?.toDateString() ?? "",
+        passnummer: dbMember.passnummer ?? "",
+        verein: dbMember.verein ?? false,
+        marker: dbMember.marker ?? false,
+        creationDate: dbMember.creationDate?.toDateString() ?? "",
     };
 }
 
@@ -70,5 +73,8 @@ export function mapMemberDtoToDbMember(member: MemberDto): DbMember {
             ? new Date(member.kuendigungzum)
             : null,
         marker: member.marker,
+        creationDate: member.creationDate
+            ? new Date(member.creationDate)
+            : null,
     };
 }

packages/api/src/dtos/pushSubscription.ts

@@ -0,0 +1,24 @@
+import type { JsonValue } from "@prisma/client/runtime/client";
+import type { Topic } from "./topic.js";
+
+export class PushSubscriptionDto {
+    id!: string;
+    endpoint!: string;
+    expirationTime!: number | null;
+    keys!: {
+        p256dh: string;
+        auth: string;
+    };
+    topic!: "TEST";
+    topicConfiguration!: JsonValue | null;
+    clientId!: string;
+}
+
+export class PushSubscriptionCreateArgs /* implements Omit<PushSubscriptionDto, "id">*/ {
+    endpoint!: string;
+    expirationTime!: number | null;
+    keys!: { p256dh: string; auth: string };
+    topic!: Topic;
+    topicConfiguration!: string | null;
+    clientId!: string;
+}

packages/api/src/dtos/topic.ts

@@ -1,3 +1 @@
-export enum Topic {
-    test = "test",
-}
+export { type Topic } from "../generated/prisma/client.js";

packages/api/src/index.ts

@@ -1,5 +1,6 @@
 import constants from "constants";
 import cors from "cors";
+import { CronJob } from "cron";
 import express, {
     type NextFunction,
     type Request,
@@ -11,7 +12,9 @@ import { RegisterRoutes } from "./generated/routes.js";
 import { inject } from "./infrastructure/di/injector.js";
 import { sessionHandler } from "./infrastructure/sessionHandler.js";
 import { EnvironmentService } from "./services/environmentService.js";
+import { FoundEventsService } from "./services/foundEvents/foundEventsService.js";
 import { KeycloakUser } from "./services/keycloak/user/keycloak-user.js";
+import { PushService } from "./services/push/pushService.js";
 // import helmet from "helmet";
 // TODO import http2 from 'http2';
 
@@ -34,24 +37,12 @@ async function run() {
         }),
     );
     app.use(sessionHandler);
+
     app.use(await keycloakUser.middleware());
 
     app.use(express.urlencoded({ extended: true }));
     app.use(express.json());
 
-    // const dbService = inject(DatabaseService);
-    // app.use(async (req, res, next) => {
-    //     await dbService.createTransaction(async prisma => {
-    //         (req as any).transaction = prisma;
-    //         return new Promise<void>((resolve, reject) => {
-    //             res.on("finish", resolve);
-    //             res.on("close", resolve);
-    //             res.on("error", reject);
-    //             next();
-    //         });
-    //     });
-    // });
-
     RegisterRoutes(app);
 
     const environment = inject(EnvironmentService);
@@ -66,25 +57,41 @@ async function run() {
         },
     );
 
-    if (environment.isDev()) {
-        //TODO create self-signed for localhost
-        const port = 3000;
-        app.listen(port, () => {
+    const isDev = environment.isDev();
+
+    let cert: https.ServerOptions["cert"];
+    let key: https.ServerOptions["key"];
+    let SSL_KEY_PASSWORD: string | undefined;
+    let port: number;
+
+    if (isDev) {
+        //TODO start with HTTPS in dev
+        // cert = fs.readFileSync("src/cert.pem");
+        // key = fs.readFileSync("src/key.pem");
+
+        port = 3000;
+        const server = app.listen(port, error => {
+            if (error) {
+                console.error("Startup crashed:", error);
+            }
             console.log(`Server is running at http://localhost:${port}`);
         });
+        server.on("close", () => stopCron());
     } else {
-        //TODO start with HTTPS in production
-        const port = 5443;
+        port = 5443;
         const SSL_CERT_PATH = process.env["SSL_CERT_PATH"];
         const SSL_KEY_PATH = process.env["SSL_KEY_PATH"];
-        const SSL_KEY_PASSWORD = process.env["SSL_KEY_PASSWORD"];
+        SSL_KEY_PASSWORD = process.env["SSL_KEY_PASSWORD"];
         if (!SSL_CERT_PATH || !SSL_KEY_PATH || !SSL_KEY_PASSWORD) {
             throw new Error("Missing SSL configuration");
         }
 
+        cert = fs.readFileSync(SSL_CERT_PATH);
+        key = fs.readFileSync(SSL_KEY_PATH);
+
         const sslOptions: https.ServerOptions = {
-            cert: fs.readFileSync(SSL_CERT_PATH),
-            key: fs.readFileSync(SSL_KEY_PATH),
+            cert: cert,
+            key: key,
             passphrase: SSL_KEY_PASSWORD,
             minVersion: "TLSv1.3",
             maxVersion: "TLSv1.3",
@@ -97,17 +104,56 @@ async function run() {
                 constants.SSL_OP_NO_SSLv2 |
                 constants.SSL_OP_NO_SSLv3,
         };
-        https.createServer(sslOptions, app).listen(port, () => {
+        const server = https.createServer(sslOptions, app).listen(port, () => {
             console.log(`Server is running on port ${port}`);
         });
+        server.on("close", () => stopCron());
+    }
 
     // const h2SslOptions={};
     // http2.createServer(h2SslOptions, app).listen(port, ()=>{
     //     console.log(`HTTP/2 server is running on port ${port}`);
     // })
-    }
+    initJobs();
+    startCron();
 
-    console.log("done");
+    console.log("setup done");
+}
+
+const jobs: CronJob[] = [];
+
+function initJobs() {
+    const eventsService = inject(FoundEventsService);
+    const crawlJob = CronJob.from({
+        cronTime: "35 4 * * *",
+        onTick: async () => {
+            await eventsService.crawl();
+        },
+    });
+    jobs.push(crawlJob);
+
+    const pushService = inject(PushService);
+    const notifyJob = CronJob.from({
+        cronTime: "10 12 * * *",
+        onTick: async () => {
+            await pushService.sendEventNotifications();
+        },
+    });
+    jobs.push(notifyJob);
+}
+
+function startCron() {
+    console.log("starting jobs");
+    for (const job of jobs) {
+        job.start();
+    }
+}
+
+async function stopCron() {
+    console.log("stopping jobs");
+    for (const job of jobs) {
+        job.stop();
+    }
 }
 
 run();

packages/api/src/services/db/prisma.ts

@@ -1,13 +1,10 @@
 import { PrismaPg } from "@prisma/adapter-pg";
 import { type Request } from "express";
 import { PrismaClient } from "../../generated/prisma/client.js";
+import type { UserModel } from "../../generated/prisma/models.js";
 import { Injectable } from "../../infrastructure/di/injectable-decorator.js";
 
 type ExtendedClient = ReturnType<typeof createExtendedClient>;
-// type TransactionClient = Omit<
-//     ExtendedClient,
-//     "$connect" | "$disconnect" | "$on" | "$transaction" | "$extends"
-// >;
 
 export type SafeClient = Omit<
     ExtendedClient,
@@ -23,20 +20,19 @@ export type SafeClient = Omit<
 >;
 
 function createExtendedClient(client: PrismaClient) {
-    return client;
-    // .$extends({
-    //     name: "testExtension",
-    //     model: {
-    //         member: {
-    //             withFullName(member: Member) {
-    //                 return {
-    //                     ...member,
-    //                     fullName: ` ${member.vorname} ${member.nachname}`,
-    //                 };
-    //             },
-    //         },
-    //     },
-    // });
+    return client.$extends({
+        client: {
+            async ensureUserKnown(userId: string): Promise<UserModel> {
+                let user = await client.user.findUnique({
+                    where: { id: userId },
+                });
+                if (user == null) {
+                    user = await client.user.create({ data: { id: userId } });
+                }
+                return user;
+            },
+        },
+    });
 }
 
 @Injectable()
@@ -56,10 +52,11 @@ export class DatabaseService {
 
     public async doRequest<T>(
         command: (prisma: SafeClient) => Promise<T>,
-        request: Request,
+        request: Request | null,
     ): Promise<T> {
-        const transaction =
-            (request as any).transaction ?? (this.prismaClient as SafeClient);
-        return await command(transaction);
+        const transaction: SafeClient | null = (request as any | null)
+            ?.transaction;
+        const effectiveClient = transaction ?? this.prismaClient;
+        return await command(effectiveClient);
     }
 }

packages/api/src/services/examsService.ts

@@ -0,0 +1,57 @@
+import type { Request } from "express";
+import type {
+    ExamCreationDto,
+    ExamDto,
+    ExamWithMembersDto,
+    MemberExamCreationDto,
+    MemberExamDto,
+} from "../dtos/examDto.js";
+import { inject } from "../infrastructure/di/index.js";
+import { Injectable } from "../infrastructure/di/injectable-decorator.js";
+import { DatabaseService } from "./db/prisma.js";
+
+@Injectable()
+export class ExamsService {
+    private readonly db = inject(DatabaseService);
+    public async createExam(
+        newExam: ExamCreationDto,
+        request: Request,
+    ): Promise<ExamDto> {
+        return await this.db.doRequest(
+            async prisma =>
+                prisma.exam.create({
+                    data: newExam,
+                }),
+            request,
+        );
+    }
+    public async getLatest(
+        request: Request,
+    ): Promise<ExamWithMembersDto | null> {
+        return await this.db.doRequest(
+            async prisma =>
+                prisma.exam.findFirst({
+                    orderBy: { date: "desc" },
+                    include: { memberExams: true },
+                }),
+            request,
+        );
+    }
+
+    public async register(
+        creationDto: MemberExamCreationDto,
+        request: Request,
+    ): Promise<MemberExamDto> {
+        return await this.db.doRequest(
+            async prisma =>
+                prisma.memberExam.create({
+                    data: {
+                        examId: creationDto.examId,
+                        memberId: creationDto.memberId,
+                        targetGrade: creationDto.targetGrade,
+                    },
+                }),
+            request,
+        );
+    }
+}

packages/api/src/services/foundEvents/foundEventsService.ts

@@ -0,0 +1,105 @@
+import { PlaywrightCrawler } from "crawlee";
+import * as dateFns from "date-fns";
+import type { Request } from "express";
+import type { FoundEventDto } from "../../dtos/foundEvents.js";
+import { inject } from "../../infrastructure/di/index.js";
+import { Injectable } from "../../infrastructure/di/injectable-decorator.js";
+import { DatabaseService } from "../db/prisma.js";
+import { EnvironmentService } from "../environmentService.js";
+import { parseTUS, parseTUSDetail } from "./parseTUS.js";
+import { FoundEventSource } from "./sources.js";
+
+@Injectable()
+export class FoundEventsService {
+    private readonly environmnent = inject(EnvironmentService);
+    private readonly database = inject(DatabaseService);
+    private readonly crawler: PlaywrightCrawler;
+
+    public constructor() {
+        const top = this;
+
+        this.crawler = new PlaywrightCrawler({
+            maxRequestsPerMinute: 100,
+            maxConcurrency: 2,
+            requestHandler: async ({ request, page, log }) => {
+                // if (request.retryCount > 0) return;
+
+                const label = request.label;
+
+                switch (label) {
+                    case "TUS":
+                        const tusDetails = await parseTUS(page, top.database);
+                        await top.crawler.addRequests(
+                            tusDetails.map(url => ({
+                                url: url,
+                                label: "TUS_DETAIL",
+                            })),
+                        );
+                        break;
+                    case "TUS_DETAIL":
+                        await parseTUSDetail(
+                            request.loadedUrl,
+                            page,
+                            top.database,
+                        );
+                        break;
+                    // case "DTU":
+                    //     events = parseDTU(page);
+                    //     break;
+                    // case "BTU":
+                    //     events = parseBTU(page);
+                    //     break;
+                    // case "MAGOSCH":
+                    //     events = parseMAGOSCH(page);
+                    //     break;
+                    default:
+                        log.warning(`Unknown source ${label}`);
+                }
+            },
+            headless: !this.environmnent.isDev(),
+        });
+    }
+
+    public async crawl() {
+        const sources = Object.entries(FoundEventSource).map(([key, url]) => ({
+            url,
+            label: key,
+        }));
+        return await this.crawler.run(sources);
+    }
+
+    public async getFutureEvents(request: Request): Promise<FoundEventDto[]> {
+        const allEvents = await this.database.doRequest(
+            async prisma =>
+                prisma.foundEvents.findMany({
+                    include: {
+                        attachedFiles: true,
+                    },
+                }),
+            request,
+        );
+
+        const today = new Date(Date.now());
+        return allEvents.filter(event => {
+            const parts = event.eventDate?.split("-");
+            let date: Date | null = null;
+            if (!parts) {
+                return true;
+            }
+            if (parts.length == 1) {
+                // like '10.05.2012'
+                date = dateFns.parse(parts[0]!, "dd.MM.yyyy", new Date());
+            }
+            if (parts.length == 2) {
+                // like '12.-25.04.2026'
+                date = dateFns.parse(parts[1]!, "dd.MM.yyyy", new Date());
+            }
+
+            if (!date) {
+                console.warn("Unknown Date Format", event.eventDate);
+                return true;
+            }
+            return isNaN(date.valueOf()) || date >= today;
+        });
+    }
+}

packages/api/src/services/foundEvents/parseTUS.ts

@@ -0,0 +1,100 @@
+import type { Page } from "playwright";
+import { expect } from "playwright/test";
+import type { DatabaseService } from "../db/prisma.js";
+import { FoundEventSource } from "./sources.js";
+
+export async function parseTUS(
+    page: Page,
+    database: DatabaseService,
+): Promise<string[]> {
+    let rowLocators = await page.locator("table").locator("tr").all();
+    rowLocators = rowLocators.filter(
+        // skip --- and header rows
+        (_row, index) => index > 0 && index % 2 === 0,
+    );
+    const links = await Promise.all(
+        rowLocators.map(async row => {
+            return {
+                url: await row.locator("a").getAttribute("href"),
+                title: await row.locator("td").nth(1).textContent(),
+                date: await row.locator("td").nth(0).textContent(),
+            };
+        }),
+    );
+
+    const urls = links.map(link => link.url).filter(url => url != null);
+    const existingEvents = await database.doRequest(
+        async prisma =>
+            prisma.foundEvents.findMany({
+                where: {
+                    url: { in: urls },
+                },
+            }),
+        null,
+    );
+
+    const newLinks = links.filter(
+        newEvent =>
+            !existingEvents.some(
+                oldEvent =>
+                    oldEvent.url === newEvent.url ||
+                    (oldEvent.title === newEvent.title &&
+                        oldEvent.eventDate === newEvent.date),
+            ),
+    );
+
+    const datePages = newLinks.map(link => link.url).filter(url => url != null);
+    return datePages;
+}
+
+export async function parseTUSDetail(
+    pageUrl: string,
+    page: Page,
+    database: DatabaseService,
+): Promise<void> {
+    const content = page.locator("div#content");
+    const title = await content.locator("h1").textContent();
+    expect(content.locator("td").nth(0)).toHaveText("Datum:");
+    const dateString = await content.locator("td").nth(1).textContent();
+    const description = (await content.locator("span").allTextContents()).join(
+        " ",
+    );
+    const attachedFileUrls = (
+        await Promise.all(
+            (await content.locator("a").all()).map(async locator => {
+                const url = await locator.getAttribute("href");
+                const isAbsolute = url?.includes("://");
+                const aboluteUrl =
+                    url != null
+                        ? isAbsolute
+                            ? new URL(url).toString()
+                            : new URL(url, pageUrl).toString()
+                        : "";
+                return {
+                    url: aboluteUrl,
+                    title: (await locator.textContent()) ?? "",
+                };
+            }),
+        )
+    ).filter(url => url != null);
+
+    await database.doRequest(async prisma => {
+        const newEvent = await prisma.foundEvents.create({
+            data: {
+                title: title?.trim() ?? null,
+                eventDate: dateString,
+                source: FoundEventSource.TUS,
+                url: pageUrl,
+                description: description?.trim() ?? null,
+            },
+        });
+
+        await prisma.foundEventAttachments.createMany({
+            data: attachedFileUrls.map(attachment => ({
+                url: attachment.url,
+                title: attachment.title,
+                eventId: newEvent.id,
+            })),
+        });
+    }, null);
+}

packages/api/src/services/foundEvents/sources.ts

@@ -0,0 +1,6 @@
+export enum FoundEventSource {
+    TUS = "https://www.taekwondo-union-sachsen.de/index.php?page=Termine-TUS",
+    // DTU = "https://www.dtu.de/termine",
+    // BTU = "https://btu-online.de/termine/",
+    // MAGOSCH = "https://www.taekwondo-magosch.de/termine",
+}

packages/api/src/services/keycloak/user/keycloak-user.ts

@@ -31,6 +31,9 @@ export class KeycloakUser {
         this.keycloakConnect = new Promise(async resolve => {
             const config = await this.getConfig();
             const client = new KeycloakConnect({ store: sessionStore }, config);
+            client.authenticated=(r)=>{
+                console.dir(r);
+            };
             resolve(client);
         });
     }
@@ -49,4 +52,10 @@ export class KeycloakUser {
         const client = await this.keycloakConnect;
         return client.middleware();
     }
+
+    public async getUid(request: Request, response?: Response): Promise<string>{
+        const client = await this.keycloakConnect;
+        const grant = await client.getGrant(request, response ?? ({} as any));
+        return (grant.access_token as any)?.content?.sub;
+    }
 }

packages/api/src/services/membersService.ts

@@ -43,12 +43,14 @@ export class MembersService {
         createArgs: MemberCreateArgs,
         request: express.Request,
     ): Promise<MemberDto> {
-        // const x: MemberCreateArgs = {
-        //     ...createArgs,
-        //     geburtsdatum: createArgs.geburtsdatum ?? null,
-        // };
+        const x = {
+            ...createArgs,
+            geburtsdatum: createArgs.geburtsdatum
+                ? createArgs.geburtsdatum
+                : null,
+        };
         const newMember = await this.database.doRequest(
-            async prisma => await prisma.member.create({ data: createArgs }),
+            async prisma => await prisma.member.create({ data: x }),
             request,
         );
         return mapDbMemberToMember(newMember);
@@ -68,7 +70,22 @@ export class MembersService {
         const modifiedMember = await this.database.doRequest(
             async prisma =>
                 await prisma.member.update({
-                    data: { ...member, id: id },
+                    data: {
+                        ...member,
+                        id: id,
+                        letztePruefung: member.letztePruefung
+                            ? member.letztePruefung
+                            : null,
+                        geburtsdatum: member.geburtsdatum
+                            ? member.geburtsdatum
+                            : null,
+                        kuendigungzum: member.kuendigungzum
+                            ? member.kuendigungzum
+                            : null,
+                        creationDate: member.creationDate
+                            ? member.creationDate
+                            : null,
+                    },
                     where: { id: id },
                 }),
             request,
@@ -79,7 +96,7 @@ export class MembersService {
 
     public async scheduleDeletion(
         memberId: string,
-        cancelDate: Date,
+        cancelDate: Date | null,
         request: express.Request,
     ) {
         await this.database.doRequest(

packages/api/src/services/push/angularPushPayload.ts

@@ -0,0 +1,93 @@
+type USVString = string;
+type DOMString = string;
+type DOMTimeStamp = number;
+
+export interface NotificationAction {
+    /** A string identifying a user action to be displayed on the notification. */
+    action: string;
+
+    /** A string containing action text to be shown to the user. */
+    title: string;
+
+    /** A string containing the URL of an icon to display with the action. */
+    icon?: string;
+}
+
+export enum NotificationActionOperation {
+    /** Opens a new tab at the specified URL. */
+    OPEN_WINDOW = "openWindow",
+
+    /** Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL. */
+    FOCUS_LAST_FOCUSED_OR_OPEN = "focusLastFocusedOrOpen",
+
+    /** Focuses the last focused client and navigates it to the specified URL. If there is no client open, then it opens a new tab at the specified URL. */
+    NAVIGATE_LAsT_FOCUSED_OR_OPEN = "navigateLastFocusedOrOpen",
+
+    /** Send a simple GET request to the specified URL. */
+    SEND_REQUEST = "sendRequest",
+}
+
+interface NotificationDataAction {
+    operation: NotificationActionOperation;
+    url?: string;
+}
+
+export interface ActionClickHandler {
+    default: NotificationDataAction;
+    [key: string]: NotificationDataAction;
+}
+
+export interface NotificationData {
+    onActionClick?: ActionClickHandler;
+    [key: string]: any;
+}
+
+export interface AngularPushPayload {
+    /** https://developer.mozilla.org/en-US/docs/Web/API/Notification */
+    notification: {
+        /** Declares actions handled in data.onActionClick[action] */
+        readonly actions?: NotificationAction[];
+
+        /** A string containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. */
+        readonly badge?: USVString;
+
+        /** indicates the body string of the notification */
+        readonly body?: DOMString;
+
+        /** The data read-only property of the Notification interface returns a structured clone of the notification's data */
+        readonly data?: NotificationData;
+
+        /** The text direction of the notification */
+        readonly dir?: "auto" | "ltr" | "rtl";
+
+        /** The URL of the image used as an icon of the notification */
+        readonly icon?: USVString;
+
+        /** The URL of an image to be displayed as part of the notification */
+        readonly image?: USVString;
+
+        /** The language code of the notification (BCP 47 language tag) */
+        readonly lang?: DOMString;
+
+        /** Specifies whether the user should be notified after a new notification replaces an old one. */
+        readonly renotify?: boolean;
+
+        /** A boolean value indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically. */
+        readonly requireInteraction?: boolean;
+
+        /** Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued regardless of the device settings. */
+        readonly silent?: boolean;
+
+        /** The idea of notification tags is that more than one notification can share the same tag, linking them together. One notification can then be programmatically replaced with another to avoid the users' screen being filled up with a huge number of similar notifications. */
+        readonly tag?: DOMString;
+
+        /** The notification's timestamp can represent the time, in milliseconds since 00:00:00 UTC on 1 January 1970, of the event for which the notification was created, or it can be an arbitrary timestamp that you want associated with the notification. For example, a timestamp for an upcoming meeting could be set in the future, whereas a timestamp for a missed message could be set in the past. */
+        readonly timestamp?: DOMTimeStamp | undefined;
+
+        /** The title of the notification */
+        readonly title: DOMString;
+
+        /** Specifies a vibration pattern for devices with vibration hardware to emit. */
+        readonly vibrate?: number[];
+    };
+}

packages/api/src/services/push/pushService.ts

@@ -0,0 +1,293 @@
+import { DbNull, type JsonValue } from "@prisma/client/runtime/client";
+import { parse } from "date-fns";
+import type { Request, Response } from "express";
+import webpush from "web-push";
+import type { PushSubscriptionCreateArgs } from "../../dtos/pushSubscription.js";
+import type {
+    FoundEvents,
+    PushSubscription,
+} from "../../generated/prisma/client.js";
+import { Topic } from "../../generated/prisma/enums.js";
+import { inject } from "../../infrastructure/di/index.js";
+import { Injectable } from "../../infrastructure/di/injectable-decorator.js";
+import { DatabaseService } from "../db/prisma.js";
+import { KeycloakUser } from "../keycloak/user/keycloak-user.js";
+import {
+    NotificationActionOperation,
+    type ActionClickHandler,
+    type AngularPushPayload,
+    type NotificationAction,
+} from "./angularPushPayload.js";
+import VAPID from "./vapid.json" with { type: "json" };
+
+@Injectable()
+export class PushService {
+    private readonly db = inject(DatabaseService);
+    private readonly userService = inject(KeycloakUser);
+
+    public constructor() {
+        webpush.setVapidDetails(
+            "mailto:toniwalter.blue@gmail.com",
+            VAPID.publicKey,
+            VAPID.privateKey,
+        );
+    }
+
+    public async storeSubscription(
+        subscription: PushSubscriptionCreateArgs,
+        request: Request,
+        response?: Response,
+    ): Promise<void> {
+        const userId = await this.userService.getUid(request, response);
+        await this.db.doRequest(async prisma => {
+            await prisma.ensureUserKnown(userId);
+            return await prisma.pushSubscription.create({
+                data: {
+                    auth: subscription.keys.auth,
+                    endpoint: subscription.endpoint,
+                    p256dh: subscription.keys.p256dh,
+                    expirationTime: subscription.expirationTime ?? null,
+                    userId: userId,
+                    clientId: subscription.clientId,
+                    topic: subscription.topic,
+                    topicConfiguration: subscription.topicConfiguration
+                        ? JSON.parse(subscription.topicConfiguration)
+                        : DbNull,
+                },
+            });
+        }, request);
+    }
+
+    public async sendEventNotifications() {
+        const subscriptions = await this.db.doRequest(
+            async prisma =>
+                prisma.pushSubscription.findMany({
+                    where: { topic: Topic.EVENTS },
+                }),
+            null,
+        );
+
+        // TODO filter by when last notify happened
+        const events = await this.db.doRequest(
+            async prisma => prisma.foundEvents.findMany(),
+            null,
+        );
+
+        const actions: NotificationAction[] = [
+            {
+                action: "toEvent",
+                title: "Veranstaltung",
+            },
+            {
+                action: "toOverview",
+                title: "Alle",
+            },
+        ];
+
+        for (const event of events) {
+            const notificationBody = [
+                event.title,
+                event.eventDate,
+                event.description,
+                event.source,
+            ]
+                .filter(p => !!p)
+                .join("\n");
+
+            const actionClickHandler: ActionClickHandler = {
+                default: {
+                    operation: NotificationActionOperation.OPEN_WINDOW,
+                    url: event.url,
+                },
+                toEvent: {
+                    operation: NotificationActionOperation.OPEN_WINDOW,
+                    url: event.url,
+                },
+                toOverview: {
+                    operation: NotificationActionOperation.OPEN_WINDOW,
+                    url: "events",
+                },
+            };
+
+            let date: Date | undefined = undefined;
+            if (event.eventDate) {
+                const parts = event.eventDate.split("-");
+                if (parts.length == 1) {
+                    date = parse(parts[0]!, "dd.MM.yyyy", new Date());
+                }
+                if (parts.length == 2) {
+                    const p2 = parts[1]!.split(".");
+                    p2.splice(0, 1, parts[0]!);
+                    date = parse(p2.join("."), "dd.MM.yyyy", new Date());
+                }
+            }
+
+            const payload: AngularPushPayload = {
+                notification: {
+                    title: "Neue Veranstaltung",
+                    actions: actions,
+                    body: notificationBody,
+                    data: {
+                        onActionClick: actionClickHandler,
+                    },
+                    icon: "https://taekwondo-chemnitz.toni714.de/favicon.ico",
+                    lang: "de-DE",
+                    // TODO renotify: true, re-enable when tag
+                    requireInteraction: true,
+                    // timestamp: date?.valueOf(),
+                    vibrate: [100],
+                    // TODO tag: Topic.EVENTS, implement grouping in Angular SW
+                },
+            };
+
+            for (const s of subscriptions) {
+                if (s.lastNotified && s.lastNotified >= event.foundDate) {
+                    // this subscription has already seen this event
+                    continue;
+                }
+                if (!this.eventMatchesFilter(event, s.topicConfiguration)) {
+                    // this subscription does not care for this event
+                    continue;
+                }
+
+                try {
+                    let backoff = 500;
+                    let retry: boolean;
+                    let maxRetry = 5;
+                    do {
+                        retry = await this.sendNotification(
+                            s,
+                            payload,
+                            backoff,
+                        );
+                        if (maxRetry <= 0) {
+                            throw new Error("Exceeded max retry");
+                        }
+                        backoff *= 2;
+                        maxRetry--;
+                    } while (retry);
+                    await this.db.doRequest(
+                        async prisma =>
+                            prisma.pushSubscription.update({
+                                where: {
+                                    id: s.id,
+                                },
+                                data: {
+                                    lastNotified: new Date(Date.now()),
+                                },
+                            }),
+                        null,
+                    );
+                } catch (error) {
+                    console.error("Cannot send notification: ", error);
+                    // throw error;
+                }
+            }
+        }
+    }
+
+    public async clearSubscription(
+        clientId: string | null,
+        request: Request,
+    ): Promise<number> {
+        const userId = await this.userService.getUid(request, request.res);
+        const batchResult = clientId
+            ? await this.db.doRequest(
+                  async prisma =>
+                      await prisma.pushSubscription.deleteMany({
+                          where: {
+                              userId: userId,
+                              AND: {
+                                  clientId: clientId,
+                              },
+                          },
+                      }),
+                  request,
+              )
+            : await this.db.doRequest(
+                  async prisma =>
+                      await prisma.pushSubscription.deleteMany({
+                          where: {
+                              userId: userId,
+                          },
+                      }),
+                  request,
+              );
+        return batchResult.count;
+    }
+
+    private async sleep(ms: number): Promise<void> {
+        await new Promise(r => setTimeout(r, ms));
+    }
+
+    private async sendNotification(
+        s: PushSubscription,
+        payload: AngularPushPayload,
+        backoff: number,
+    ): Promise<boolean> {
+        const subscription: webpush.PushSubscription = {
+            endpoint: s.endpoint,
+            keys: {
+                auth: s.auth,
+                p256dh: s.p256dh,
+            },
+            expirationTime: s.expirationTime,
+        };
+
+        const result = await webpush.sendNotification(
+            subscription,
+            JSON.stringify(payload),
+        );
+
+        if (result.statusCode >= 200 && result.statusCode < 300) {
+            return false;
+        }
+        if (result.statusCode >= 500 && result.statusCode < 600) {
+            await this.sleep(backoff);
+            return true;
+        }
+        if (result)
+            if (result.statusCode == 404 || result.statusCode == 301) {
+                // subscription expired / endpoint moved
+                await this.db.doRequest(
+                    async prisma =>
+                        prisma.pushSubscription.delete({ where: { id: s.id } }),
+                    null,
+                );
+                //TODO request new subscription from client
+                throw new Error("Subscription expired for: " + s.clientId);
+            }
+        if (result.statusCode == 410) {
+            // unsubscribed
+            await this.db.doRequest(
+                async prisma =>
+                    prisma.pushSubscription.delete({ where: { id: s.id } }),
+                null,
+            );
+            return false;
+        }
+        if (result.statusCode == 429) {
+            const retryAfter = result.headers["retry-after"];
+            let seconds = Number(retryAfter);
+            let ms: number;
+            if (!retryAfter) {
+                ms = backoff;
+            } else if (!Number.isNaN(seconds)) {
+                ms = Math.max(0, seconds) * 1000;
+            } else {
+                ms = Math.max(0, Date.parse(retryAfter).valueOf() - Date.now());
+            }
+            await this.sleep(ms);
+            return true;
+        }
+
+        throw new Error("Unknown Notification response: " + result.statusCode);
+    }
+
+    private eventMatchesFilter(
+        _event: FoundEvents,
+        _topicConfiguration: JsonValue,
+    ): boolean {
+        return true;
+    }
+}

packages/api/src/services/userAdminService.ts

@@ -3,7 +3,7 @@ import { type User } from "../dtos/user.js";
 import { inject } from "../infrastructure/di/index.js";
 import { KeycloakAdmin } from "./keycloak/admin/index.js";
 
-export class UserService {
+export class UserAdminService {
     private readonly keycloakAdmin = inject(KeycloakAdmin);
     public async setClaim(
         uid: string,

packages/api/tsconfig.json

@@ -54,8 +54,10 @@
         "strictPropertyInitialization": true,
         "noImplicitThis": true,
         "alwaysStrict": true,
-        "forceConsistentCasingInFileNames": true
+        "forceConsistentCasingInFileNames": true,
+        "preserveWatchOutput": true,
+        "esModuleInterop": true
     },
     "files": ["./src/index.ts"],
-    "include": ["src"]
+    "include": ["src", "./package.json"]
 }

packages/frontend/.gitignore

@@ -44,3 +44,5 @@ Thumbs.db
 
 ###
 src/app/generated-api/
+
+src/app/services/push/vapid.json

packages/frontend/angular.json

@@ -21,7 +21,6 @@
                     "builder": "@angular/build:application",
                     "options": {
                         "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "assets": [
@@ -52,7 +51,8 @@
                         "development": {
                             "optimization": false,
                             "extractLicenses": false,
-              "sourceMap": true
+                            "sourceMap": true,
+                            "serviceWorker": "ngsw-config.json"
                         }
                     },
                     "defaultConfiguration": "production"
@@ -75,7 +75,6 @@
                 "test": {
                     "builder": "@angular/build:karma",
                     "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
                         "tsConfig": "tsconfig.spec.json",
                         "inlineStyleLanguage": "scss",
                         "assets": [

packages/frontend/package.json

@@ -25,39 +25,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "20.2.11",
-    "@angular/common": "^20.3.15",
-    "@angular/compiler": "^20.3.15",
-    "@angular/core": "^20.3.15",
-    "@angular/forms": "^20.3.15",
-    "@angular/material": "20.2.11",
-    "@angular/material-date-fns-adapter": "^20.2.14",
-    "@angular/platform-browser": "^20.3.15",
-    "@angular/router": "^20.3.15",
-    "@angular/service-worker": "^20.3.15",
+    "@angular/cdk": "^21.2.1",
+    "@angular/common": "^21.2.1",
+    "@angular/compiler": "^21.2.1",
+    "@angular/core": "^21.2.1",
+    "@angular/forms": "^21.2.1",
+    "@angular/material": "^21.2.1",
+    "@angular/material-date-fns-adapter": "^21.2.1",
+    "@angular/platform-browser": "^21.2.1",
+    "@angular/router": "^21.2.1",
+    "@angular/service-worker": "^21.2.1",
     "@date-fns/tz": "^1.4.1",
     "@date-fns/utc": "^2.1.1",
-    "@oazapfts/runtime": "^1.0.4",
+    "@oazapfts/runtime": "^1.2.0",
     "date-fns": "^4.1.0",
-    "keycloak-angular": "^20.0.0",
-    "keycloak-js": "^26.2.1",
-    "rxjs": "~7.8.2",
+    "keycloak-angular": "^21.0.0",
+    "keycloak-js": "^26.2.3",
+    "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.1"
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.13",
-    "@angular/build": "^20.3.13",
-    "@angular/cli": "^20.3.13",
-    "@angular/compiler-cli": "^20.3.15",
-    "@types/jasmine": "~5.1.13",
-    "jasmine-core": "~5.9.0",
+    "@angular/build": "^21.2.1",
+    "@angular/cli": "^21.2.1",
+    "@angular/compiler-cli": "^21.2.1",
+    "@types/jasmine": "~6.0.0",
+    "jasmine-core": "~6.1.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "oazapfts": "^6.3.1",
+    "karma-jasmine-html-reporter": "~2.2.0",
+    "oazapfts": "^7.4.2",
     "typescript": "~5.9.3"
   }
 }

packages/frontend/public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "frontend",
-  "short_name": "frontend",
+    "name": "TKD Club Chemnitz Datenbank",
+    "short_name": "TCC DB",
     "display": "standalone",
     "scope": "./",
     "start_url": "./",
@@ -40,18 +40,6 @@
             "sizes": "192x192",
             "type": "image/png",
             "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable any"
         }
     ]
 }

packages/frontend/src/app/app.config.ts

@@ -4,7 +4,8 @@ import {
     LOCALE_ID,
     provideAppInitializer,
     provideBrowserGlobalErrorListeners,
-    provideZoneChangeDetection,
+    provideCheckNoChangesConfig,
+    provideZonelessChangeDetection,
 } from '@angular/core';
 import {
     PreloadAllModules,
@@ -48,7 +49,7 @@ export const appConfig: ApplicationConfig = {
             withComponentInputBinding(),
         ),
         provideBrowserGlobalErrorListeners(),
-        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideZonelessChangeDetection(),
         provideKeycloak({
             config: keycloakConfig,
             initOptions: {
@@ -85,8 +86,14 @@ export const appConfig: ApplicationConfig = {
         { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
         { provide: MAT_DATE_LOCALE, useValue: de },
         provideServiceWorker('ngsw-worker.js', {
-            enabled: !isDevMode(),
+            enabled: true,//!isDevMode(),
             registrationStrategy: 'registerWhenStable:30000',
         }),
     ],
 };
+
+if (isDevMode()) {
+    appConfig.providers.push(
+        provideCheckNoChangesConfig({ exhaustive: true, interval: 100 }),
+    );
+}

packages/frontend/src/app/app.routes.ts

@@ -70,5 +70,10 @@ export const routes: Routes = [
             ),
         canActivate: [requireRoles([Claim.Memberadmin])],
     },
+    {
+        path: 'events',
+        loadComponent: () =>
+            import('./components/events/events').then(mod => mod.Events),
+    },
     { path: '**', component: MissingPage },
 ];

packages/frontend/src/app/app.ts

@@ -1,4 +1,10 @@
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule, RouterOutlet } from '@angular/router';
 import { Authentication } from './services/authentication';
@@ -9,6 +15,7 @@ import { keycloakConfig } from './util/keycloak-config';
     imports: [RouterOutlet, MatButtonModule, RouterModule],
     templateUrl: './app.html',
     styleUrl: './app.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class App {
     protected readonly title = signal('frontend');
@@ -22,7 +29,7 @@ export class App {
         effect(() => {
             const loggedIn = this.auth.loggedIn();
             if (!loggedIn) {
-                this.auth.login();
+                this.auth.login(window.location.pathname ?? undefined);
             }
         });
     }

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.html

@@ -1,12 +1,17 @@
-<form [formGroup]="form" (ngSubmit)="submit()">
+<form [formRoot]="form">
     <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
     <p>Passnummer: {{ member.passnummer }}</p>
-  <p>Geburtsdatum: {{ member.geburtsdatum??undefined |  datePipe }}</p>
+    <p>Geburtsdatum: {{ member.geburtsdatum | datePipe }}</p>
     <mat-form-field>
         <mat-label>K&uuml;ndigun zum</mat-label>
-    <input matInput [matDatepicker]="picker" formControlName="kuendigungzum" />
+        <input
+            matInput
+            [matDatepicker]="picker"
+            [formField]="form.kuendigungzum" />
         <mat-hint>DD.MM.YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle
+            matIconSuffix
+            [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <button mat-raised-button color="primary" type="submit">Speichern</button>

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.ts

@@ -1,5 +1,15 @@
-import { Component, Inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
+import {
+    form,
+    FormField,
+    FormRoot,
+    TreeValidationResult,
+} from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,18 +19,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as api from '../../generated-api/api';
-import { DatePipePipe, dateToLocal } from '../../pipes/date-pipe.pipe.js';
+import {
+    DatePipePipe,
+    dateToLocal,
+    dateToUTC,
+} from '../../pipes/date-pipe.pipe.js';
 import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dialog.component.js';
 
-type DeletionForm = {
-    kuendigungzum: FormControl<Date | null>;
-};
-
 @Component({
     selector: 'app-delete-member-dialog',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatCheckboxModule,
@@ -29,32 +38,41 @@ type DeletionForm = {
         MatOptionModule,
         MatDatepickerModule,
         DatePipePipe,
+        FormField,
+        FormRoot,
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeleteMemberDialogComponent {
-    form: FormGroup<DeletionForm>;
-    member: api.MemberDto;
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { member: api.MemberDto },
-        private dialogRef: MatDialogRef<EditMemberDialogComponent>,
-    ) {
-        this.member = data.member;
-        this.form = new FormGroup<DeletionForm>({
-            kuendigungzum: new FormControl(null),
+    private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
+    private readonly dialogRef = inject(
+        MatDialogRef<EditMemberDialogComponent>,
+    );
+    private readonly deletionModel = signal({
+        kuendigungzum: this.data.member.kuendigungzum
+            ? dateToUTC(this.data.member.kuendigungzum)
+            : null,
+    });
+    protected readonly form = form(this.deletionModel, {
+        submission: {
+            action: async () => {
+                return await this.submit();
+            },
+        },
+    });
+    protected readonly member = this.data.member;
+
+    protected async submit(): Promise<TreeValidationResult> {
+        const date = this.deletionModel().kuendigungzum;
+        await api
+            .scheduleDeletion(
+                this.member.id,
+                date ? dateToLocal(date).toISOString() : '',
+            )
+            .then(() => {
+                this.dialogRef.close();
             });
     }
-
-    async submit() {
-        const date = this.form.controls.kuendigungzum.value;
-        if (date) {
-            await api.scheduleDeletion(
-                this.member.id!,
-                dateToLocal(date).toISOString(),
-            );
-
-            this.dialogRef.close();
-        }
-    }
 }

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.html

@@ -1,41 +1,48 @@
-<form [formGroup]="form" (ngSubmit)="submit()">
+<form [formRoot]="form">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
-    <input matInput placeholder="Vorname" formControlName="vorname" />
+        <input matInput placeholder="Vorname" [formField]="form.vorname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Nachname</mat-label>
-    <input matInput placeholder="Nachname" formControlName="nachname" />
+        <input matInput placeholder="Nachname" [formField]="form.nachname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geschlecht</mat-label>
-    <input matInput placeholder="Geschlecht" formControlName="geschlecht" />
+        <input
+            matInput
+            placeholder="Geschlecht"
+            [formField]="form.geschlecht" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Passnummer</mat-label>
-    <input matInput placeholder="Passnummer" formControlName="passnummer" />
+        <input
+            matInput
+            placeholder="Passnummer"
+            [formField]="form.passnummer" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsdatum</mat-label>
-    <input matInput [matDatepicker]="picker" formControlName="geburtsdatum" />
+        <input
+            matInput
+            [matDatepicker]="picker"
+            [formField]="form.geburtsdatum" />
         <mat-hint>DD.MM.YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle
+            matIconSuffix
+            [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsort</mat-label>
-    <input matInput placeholder="Geburtsort" formControlName="geburtsort" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Unterrichtsvertrag?</mat-label>
-    <mat-select matInput formControlName="uvertrag">
-      <mat-option [value]="true">Ja</mat-option>
-      <mat-option [value]="false">Nein</mat-option>
-    </mat-select>
+        <input
+            matInput
+            placeholder="Geburtsort"
+            [formField]="form.geburtsort" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Vereinsmitglied?</mat-label>
-    <mat-select matInput formControlName="verein">
+        <mat-select matInput [formField]="form.verein">
             <mat-option [value]="true">Ja</mat-option>
             <mat-option [value]="false">Nein</mat-option>
         </mat-select>

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.ts

@@ -1,5 +1,15 @@
-import { Component, Inject } from '@angular/core';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
+import {
+    form,
+    FormField,
+    FormRoot,
+    TreeValidationResult,
+} from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,13 +19,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as api from '../../generated-api/api';
-import { MemberDtoHelper } from '../../util/member.js';
+import { MemberDtoHelper, MemberEditForm } from '../../util/member.js';
 
 @Component({
     selector: 'app-edit-member-dialog',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatCheckboxModule,
@@ -23,25 +32,37 @@ import { MemberDtoHelper } from '../../util/member.js';
         MatSelectModule,
         MatOptionModule,
         MatDatepickerModule,
+        FormField,
+        FormRoot,
     ],
     templateUrl: './edit-member-dialog.component.html',
     styleUrl: './edit-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditMemberDialogComponent {
-    form: FormGroup;
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { member: api.MemberDto },
-        private memberDtoHelper: MemberDtoHelper,
-        private dialogRef: MatDialogRef<EditMemberDialogComponent>,
-    ) {
-        this.form = this.memberDtoHelper.newMemberForm(data.member);
-    }
-
-    submit() {
-        const member: api.MemberDto = this.memberDtoHelper.memberFromForm(
-            this.form,
+    private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
+    private readonly memberDtoHelper = inject(MemberDtoHelper);
+    private readonly dialogRef = inject(
+        MatDialogRef<EditMemberDialogComponent>,
     );
-        api.updateMember(member);
+
+    private readonly memberModel = signal<MemberEditForm>(
+        this.memberDtoHelper.editMemberForm(this.data.member),
+    );
+    protected readonly form = form(this.memberModel, {
+        submission: {
+            action: async () => {
+                return await this.submit();
+            },
+        },
+    });
+
+    protected async submit(): Promise<TreeValidationResult> {
+        const member: api.MemberDto = this.memberDtoHelper.memberFromSignal(
+            this.memberModel(),
+        );
+        await api.updateMember(member).then(() => {
             this.dialogRef.close();
+        });
     }
 }

packages/frontend/src/app/components/events/events.html

@@ -0,0 +1,70 @@
+<h1>Gesammelte Veranstaltungen</h1>
+<p>
+    @if(this.pushService.isSubscribed()){
+    <span>Aboniert<mat-icon>check</mat-icon></span
+    ><br />
+    <button matButton="filled" class="secondary-btn" (click)="unsubscribe()">
+        Abmelden
+    </button>
+    }@else {
+    <button matButton="filled" (click)="subscribe()">Abonieren</button>
+    }
+</p>
+<div class="table-container">
+    <table mat-table [dataSource]="datasource" matSort>
+        <ng-container matColumnDef="source">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Gefunden bei
+            </th>
+            <td mat-cell *matCellDef="let element">
+                <a [href]="element.source"
+                    >{{truncateSource(element.source)}}</a
+                >
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="url">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Link</th>
+            <td mat-cell *matCellDef="let element">
+                <a
+                    matButton
+                    [href]="element.url"
+                    target="_blank"
+                    [ellipsis]="80"
+                    >{{element.url}}</a
+                >
+            </td>
+        </ng-container>
+        <ng-container matColumnDef="eventDate">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Ausrichtungsdatum
+            </th>
+            <td mat-cell *matCellDef="let element">{{element.eventDate}}</td>
+        </ng-container>
+        <ng-container matColumnDef="title">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Titel</th>
+            <td mat-cell *matCellDef="let element">{{element.title}}</td>
+        </ng-container>
+        <ng-container matColumnDef="description">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                Beschreibung
+            </th>
+            <td mat-cell *matCellDef="let element">{{element.description}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="attachedFiles">
+            <th mat-header-cell *matHeaderCellDef>Anhänge</th>
+            <td mat-cell *matCellDef="let element">
+                @for(attachment of element.attachedFiles; track attachment.id){
+                <a matButton="outlined" [href]="attachment.url" target="_blank"
+                    >{{attachment.title??'?'}}</a
+                >
+                }
+            </td>
+        </ng-container>
+
+        <tr
+            mat-header-row
+            *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+</div>

packages/frontend/src/app/components/events/events.scss

@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    // overflow: auto;
+}
+
+.table-container {
+    overflow: auto;
+    border: 1px solid var(--mat-sys-outline);
+    min-height: 400px;
+}

packages/frontend/src/app/components/events/events.spec.ts

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

packages/frontend/src/app/components/events/events.ts

@@ -0,0 +1,86 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    OnInit,
+    viewChild,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { parse } from 'date-fns';
+import { Ellipsis } from '../../directives/ellipsis/ellipsis';
+import * as api from '../../generated-api/api';
+import { PushService } from '../../services/push/pushService';
+
+@Component({
+    selector: 'app-events',
+    imports: [
+        MatTableModule,
+        MatSortModule,
+        MatButtonModule,
+        Ellipsis,
+        MatIconModule,
+    ],
+    templateUrl: './events.html',
+    styleUrl: './events.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Events implements OnInit {
+    protected readonly pushService = inject(PushService);
+    protected readonly datasource = new MatTableDataSource<api.FoundEventDto>();
+    protected readonly sort = viewChild.required(MatSort);
+    protected readonly displayedColumns = [
+        'eventDate',
+        'title',
+        'description',
+        'attachedFiles',
+        'url',
+        'source',
+    ];
+
+    public async ngOnInit(): Promise<void> {
+        this.datasource.sort = this.sort();
+        const originalSortingAccessor = this.datasource.sortingDataAccessor;
+        this.datasource.sortingDataAccessor = (item, property) => {
+            if (property != 'eventDate') {
+                return originalSortingAccessor(item, property);
+            }
+
+            if (!item.eventDate) {
+                return NaN;
+            }
+
+            const parts = item.eventDate.split('-');
+            if (parts.length == 1) {
+                return parse(parts[0]!, 'dd.MM.yyyy', new Date()).valueOf();
+            }
+            if (parts.length == 2) {
+                const p2 = parts[1].split('.');
+                p2.splice(0, 1, parts[0]);
+                return parse(p2.join('.'), 'dd.MM.yyyy', new Date()).valueOf();
+            }
+
+            console.warn('unknown date format:', property);
+            return originalSortingAccessor(item, property);
+        };
+        const data = await api.getFutureEvents();
+        this.datasource.data = data;
+    }
+
+    protected truncateSource(sourceUrl: string): string {
+        if (!URL.canParse(sourceUrl)) {
+            return sourceUrl;
+        }
+        const url = new URL(sourceUrl);
+        return url.hostname;
+    }
+
+    protected async unsubscribe() {
+        await this.pushService.resetSubscriptions();
+    }
+    protected async subscribe() {
+        await this.pushService.subscribeToEvents();
+    }
+}

packages/frontend/src/app/components/home/home.html

@@ -5,16 +5,24 @@
             Mitgliederliste
         </button>
     </mat-list-item>
-    <mat-list-item [claimGuard]="Claim.Useradmin">
+    <mat-list-item>
+        <button
+            matButton="filled"
+            class="tertiary-btn"
+            [routerLink]="['/events']">
+            Veranstaltungen
+        </button>
+    </mat-list-item>
+    <!-- <mat-list-item [claimGuard]="Claim.Useradmin">
         <button matButton="filled" color="warn" [routerLink]="['/manageUsers']">
             Benutzer Verwalten
         </button>
-    </mat-list-item>
-    <mat-list-item [claimGuard]="Claim.Memberadmin">
+    </mat-list-item> -->
+    <!-- <mat-list-item [claimGuard]="Claim.Memberadmin">
         <button matButton="filled" color="primary" [routerLink]="['/exam']">
             Prüfungsanmeldung
         </button>
-    </mat-list-item>
+    </mat-list-item> -->
     <mat-list-item>
         <button
             matButton="outlined"

packages/frontend/src/app/components/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
@@ -15,6 +15,7 @@ import { Claim } from '../../generated-api/api';
     ],
     templateUrl: './home.html',
     styleUrl: './home.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Home {
     protected Claim = Claim;

packages/frontend/src/app/components/login/login.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { Authentication } from '../../services/authentication';
 
@@ -7,15 +7,16 @@ import { Authentication } from '../../services/authentication';
     imports: [],
     templateUrl: './login.html',
     styleUrl: './login.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Login {
     private readonly authentication = inject(Authentication);
     private readonly router = inject(Router);
 
     public constructor() {
-    if(this.authentication.loggedIn()){
+        if (this.authentication.loggedIn()) {
             this.router.navigate(['/home']);
-    }else{
+        } else {
             this.authentication.login();
         }
     }

packages/frontend/src/app/components/missing-page/missing-page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { Authentication } from '../../services/authentication';
@@ -8,6 +8,7 @@ import { Authentication } from '../../services/authentication';
     imports: [MatButtonModule, RouterModule],
     templateUrl: './missing-page.html',
     styleUrl: './missing-page.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MissingPage {
     protected readonly auth = inject(Authentication);

packages/frontend/src/app/components/new-member/new-member.component.html

@@ -1,23 +1,23 @@
 <h1>Neues Mitglied anlegen</h1>
-<form [formGroup]="memberForm" (ngSubmit)="onSubmit()">
+<form [formRoot]="memberForm">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
-        <input matInput formControlName="vorname" />
+        <input matInput [formField]="memberForm.vorname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Nachname</mat-label>
-        <input matInput formControlName="nachname" />
+        <input matInput [formField]="memberForm.nachname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geschlecht</mat-label>
-        <input matInput formControlName="geschlecht" />
+        <input matInput [formField]="memberForm.geschlecht" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsdatum</mat-label>
         <input
             matInput
             [matDatepicker]="picker"
-            formControlName="geburtsdatum" />
+            [formField]="memberForm.geburtsdatum" />
         <mat-hint>DD.MM.YYYY</mat-hint>
         <mat-datepicker-toggle
             matIconSuffix
@@ -26,18 +26,18 @@
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsort</mat-label>
-        <input matInput formControlName="geburtsort" />
+        <input matInput [formField]="memberForm.geburtsort" />
     </mat-form-field>
-    <mat-checkbox [formControl]="memberForm.controls.verein"
+    <mat-checkbox [formField]="memberForm.verein"
         >Verein Beigetreten?</mat-checkbox
     >
     <mat-form-field>
         <mat-label>Passnummer (falls vorhanden)</mat-label>
-        <input matInput formControlName="passnummer" />
+        <input matInput [formField]="memberForm.passnummer" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Kontakt</mat-label>
-        <input matInput formControlName="kontakt" />
+        <input matInput [formField]="memberForm.kontakt" />
     </mat-form-field>
     <button mat-flat-button color="primary" type="submit">Hinzufügen</button>
 </form>

packages/frontend/src/app/components/new-member/new-member.component.ts

@@ -1,5 +1,15 @@
-import { Component, inject } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    signal,
+} from '@angular/core';
+import {
+    form,
+    FormField,
+    FormRoot,
+    TreeValidationResult,
+} from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -7,37 +17,49 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import * as api from '../../generated-api/api.js';
-import { MemberDtoHelper } from '../../util/member.js';
+import { MemberCreateForm, MemberDtoHelper } from '../../util/member.js';
 
 @Component({
     selector: 'app-new-member',
     standalone: true,
     providers: [],
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatDatepickerModule,
         MatInputModule,
         MatCheckboxModule,
         MatButtonModule,
+        FormField,
+        FormRoot,
     ],
     templateUrl: './new-member.component.html',
     styleUrl: './new-member.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewMemberComponent {
     private readonly memberDtoHelper = inject(MemberDtoHelper);
-
-    constructor() {}
-    memberForm = this.memberDtoHelper.newMemberForm();
-    private dialogRef: MatDialogRef<NewMemberComponent> = inject(
+    private readonly dialogRef: MatDialogRef<NewMemberComponent> = inject(
         MatDialogRef<NewMemberComponent>,
     );
 
-    onSubmit() {
-        const newMember: api.MemberCreateArgs =
-            this.memberDtoHelper.newMemberFromForm(this.memberForm);
+    private readonly memberModel = signal<MemberCreateForm>(
+        this.memberDtoHelper.newMemberForm(),
+    );
+    protected readonly memberForm = form(this.memberModel, {
+        submission: {
+            action: async () => {
+                return await this.submit();
+            },
+        },
+    });
 
-        api.createMember(newMember)
+    protected async submit(): Promise<TreeValidationResult> {
+        const newMember = this.memberDtoHelper.newMemberFromSignal(
+            this.memberModel(),
+        );
+
+        await api
+            .createMember(newMember)
             .then(() => {
                 console.log('Successfully added Member');
                 this.dialogRef.close();

packages/frontend/src/app/components/test/test.html

@@ -1,17 +1,28 @@
 <h1>Testeite für interne Berechtigung</h1>
 <p>API: {{apiStatus()}}</p>
 <p>Auth: {{authTest()}}</p>
+<p>Capabilities: {{pushCaps|json}}</p>
+<pre>More Caps: {{asyncCaps()|json}}</pre>
+<button [claimGuard]="Claim.Useradmin" (click)="crawl()">Crawl</button>
+<button
+    [claimGuard]="Claim.Useradmin"
+    (click)="notifyAll()"
+    class="secondary-btn"
+    matButton="filled">
+    Notify All
+</button>
 Claim:
 <ul>
-    @let claims = this.auth.claims();
-    @if(claims) {
-<pre>
+    @let claims = this.auth.claims(); @if(claims) {
+    <pre>
 {{claims | json}}
-</pre>
+</pre
+    >
     }
 </ul>
 <details name="UserInfo:">
-<pre>
+    <pre>
 {{this.auth.userInfo() | json}}
-</pre>
+</pre
+    >
 </details>

packages/frontend/src/app/components/test/test.ts

@@ -1,42 +1,82 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
+import { ClaimGuardDirective } from '../../directives/claim-guard.directive';
 import * as api from '../../generated-api/api';
 import { Authentication } from '../../services/authentication';
+import { PushService } from '../../services/push/pushService';
 
 @Component({
     selector: 'app-test',
-  imports: [JsonPipe],
+    imports: [JsonPipe, ClaimGuardDirective],
     templateUrl: './test.html',
     styleUrl: './test.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Test {
-  protected auth = inject(Authentication);
+    protected readonly pushService = inject(PushService);
+    protected readonly auth = inject(Authentication);
 
-  protected apiStatus = signal<string>("Waiting");
-  protected authTest = signal<string>("Waiting");
+    protected readonly apiStatus = signal<string>('Waiting');
+    protected readonly authTest = signal<string>('Waiting');
+    protected readonly Claim = api.Claim;
+    protected readonly pushCaps = {
+        serviceWorker: 'serviceWorker' in navigator,
+        pushManager: 'PushManager' in window,
+        notification: 'Notification' in window,
+        notifyPermission: Notification.permission,
+    };
+    protected asyncCaps = signal<any>(null);
 
-  public constructor(){
-    effect(()=>{
-    const loggedIn=this.auth.loggedIn();
-    if(!loggedIn){
-      this.apiStatus.set("N/A - not logged in");
-      this.authTest.set("N/A - not logged in");
+    public constructor() {
+        this.loadCaps();
+        effect(() => {
+            const loggedIn = this.auth.loggedIn();
+            if (!loggedIn) {
+                this.apiStatus.set('N/A - not logged in');
+                this.authTest.set('N/A - not logged in');
                 return;
             }
 
-    this.apiStatus.set("Waiting for API");
-      this.authTest.set("Waiting for API");
-    api.getOk().then((status) => {
-      this.apiStatus.set("Ok");
-    }).catch((e) => {
-      this.apiStatus.set("Error");
+            this.apiStatus.set('Waiting for API');
+            this.authTest.set('Waiting for API');
+            api.getOk()
+                .then(status => {
+                    this.apiStatus.set('Ok');
+                })
+                .catch(e => {
+                    this.apiStatus.set('Error');
                 });
-    api.getAuth().then((response) => {
-      this.authTest.set("Ok");
-    }).catch((e) => {
+            api.getAuth()
+                .then(response => {
+                    this.authTest.set('Ok');
+                })
+                .catch(e => {
                     this.authTest.set(e);
                 });
-  })
+        });
     }
 
+    private async loadCaps() {
+        const caps = {
+            registraion: await navigator.serviceWorker.getRegistrations(),
+            subscription: await (
+                await navigator.serviceWorker.ready
+            ).pushManager.getSubscription(),
+        };
+
+        this.asyncCaps.set(caps);
+    }
+
+    protected async notifyAll() {
+        await api.notifyEvents();
+    }
+    protected async crawl() {
+        await api.crawl();
+    }
 }

packages/frontend/src/app/components/view-members/view-members.html

@@ -2,22 +2,34 @@
     <h1>Mitglieder & Sportlerübersicht</h1>
 </div>
 <div>
-    <button matButton="filled" class="primary-btn" (click)="newMember()">
+    <button
+        matButton="filled"
+        class="primary-btn .no-print"
+        (click)="newMember()">
         Neues Mitglied
     </button>
+    <button
+        matButton="filled"
+        class="secondary-btn .no-print"
+        (click)="print()">
+        Drucken
+    </button>
 </div>
-<div class="filter-container">
+<div class="filter-container .no-print">
     <mat-form-field>
         <label>Filter:</label>
-        <input matInput [formControl]="filterControl" placeholder="Filter" />
+        <input
+            matInput
+            [formField]="filterForm.filterString"
+            placeholder="Filter" />
     </mat-form-field>
     <div class="status-filters">
-        <mat-radio-group [formControl]="statusControl">
+        <mat-radio-group [formField]="filterForm.status">
             <mat-radio-button [value]="MemberStatusFilter.ACTIVE"
-                >Aktiv</mat-radio-button
+                >Aktiv zum</mat-radio-button
             >
             <mat-radio-button [value]="MemberStatusFilter.INACTIVE"
-                >Inaktiv</mat-radio-button
+                >Gekündigt seit</mat-radio-button
             >
             <mat-radio-button [value]="MemberStatusFilter.ALL"
                 >Alle</mat-radio-button
@@ -30,20 +42,21 @@
             <input
                 matInput
                 [matDatepicker]="picker"
-                [formControl]="statusDateControl"
+                [formField]="filterForm.statusDate"
                 placeholder="Aktiv bis" />
             <mat-hint>DD.MM.YYYY</mat-hint>
             <mat-datepicker-toggle
                 matIconSuffix
-                [disabled]="statusControl.value===MemberStatusFilter.ALL"
+                [disabled]="statusDateDisabled()"
                 [for]="picker"></mat-datepicker-toggle>
             <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>
     </div>
-    <mat-checkbox [formControl]="onlyWithID">Nur mit Passnummer</mat-checkbox>
+    <mat-checkbox [formField]="filterForm.onlyWithID"
+        >Nur mit Passnummer</mat-checkbox
+    >
 </div>
 <div class="table-container">
-    <!--TODO implement row count, selecting and alternating colors-->
     <table
         mat-table
         [dataSource]="dataSource"
@@ -97,7 +110,7 @@
         </ng-container>
         <ng-container matColumnDef="geburtsdatum">
             <th mat-header-cell mat-sort-header *matHeaderCellDef>
-                Geburtsdatum
+                Geburtsdatum Geboren am
             </th>
             <td mat-cell *matCellDef="let element">
                 {{ element.geburtsdatum | datePipe }}
@@ -110,9 +123,7 @@
             <td mat-cell *matCellDef="let element">{{ element.geburtsort }}</td>
         </ng-container>
         <ng-container matColumnDef="verein">
-            <th mat-header-cell mat-sort-header *matHeaderCellDef>
-                Vereinsmitgliedschaft
-            </th>
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Verein?</th>
             <td mat-cell *matCellDef="let element">
                 @if(element.verein){
                 <mat-icon
@@ -136,12 +147,18 @@
 
         <ng-container matColumnDef="kuendigungzum">
             <th mat-header-cell mat-sort-header *matHeaderCellDef>
-                K&uuml;ndigung zum
+                K&uuml;ndigung
             </th>
             <td mat-cell *matCellDef="let element">
                 {{ (element.kuendigungzum | datePipe) ?? "-" }}
             </td>
         </ng-container>
+        <ng-container matColumnDef="creationDate">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Beitritt</th>
+            <td mat-cell *matCellDef="let element">
+                {{ element.creationDate | datePipe }}
+            </td>
+        </ng-container>
 
         <ng-container matColumnDef="delete">
             <th mat-header-cell *matHeaderCellDef>Entf.</th>
@@ -174,7 +191,8 @@
         <tr
             mat-row
             *matRowDef="let row; columns: displayedColumns"
-            class="table-row"></tr>
+            class="table-row"
+            [class.expired]="isInPast(row.kuendigungzum)"></tr>
         <tr mat-footer-row *matFooterRowDef="['totalCount']; sticky: true"></tr>
     </table>
 </div>

packages/frontend/src/app/components/view-members/view-members.scss

@@ -49,3 +49,16 @@ td {
 .table-row:nth-child(odd) {
     background-color: var(--mat-sys-surface);
 }
+
+.table-row.expired {
+    //background-color: lightsalmon;
+    filter: sepia(50%);
+}
+
+.positive {
+    color: green;
+}
+
+.negative {
+    color: red;
+}

packages/frontend/src/app/components/view-members/view-members.ts

@@ -1,6 +1,15 @@
-import { AfterViewInit, Component, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    computed,
+    effect,
+    inject,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -13,7 +22,6 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
-import { combineLatest, startWith } from 'rxjs';
 import * as api from '../../generated-api/api';
 import { DatePipePipe } from '../../pipes/date-pipe.pipe.js';
 import { NobreakHyphenPipe } from '../../pipes/nobreak-hyphen.pipe.js';
@@ -22,6 +30,44 @@ import { DeleteMemberDialogComponent } from '../delete-member-dialog/delete-memb
 import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dialog.component.js';
 import { NewMemberComponent } from '../new-member/new-member.component';
 
+class MemberFilters {
+    public filterString: string;
+    public status: MemberStatusFilter;
+    public statusDate: Date | null;
+    public onlyWithID: boolean;
+
+    public constructor(data: {
+        filterString: string;
+        status: MemberStatusFilter;
+        statusDate: Date | null;
+        onlyWithID: boolean;
+    }) {
+        this.filterString = data.filterString;
+        this.status = data.status;
+        this.statusDate = data.statusDate;
+        this.onlyWithID = data.onlyWithID;
+    }
+
+    public encode(): string {
+        return `${this.filterString?.replaceAll(';', '') ?? ''};${this.status};${this.statusDate?.toISOString()};${this.onlyWithID}`;
+    }
+
+    public static decode(encoded: string): MemberFilters {
+        const parts = encoded.split(';');
+        const statusDateStr = parts[2];
+
+        return new MemberFilters({
+            filterString: parts[0],
+            status: parts[1] as MemberStatusFilter,
+            statusDate:
+                statusDateStr && statusDateStr != ''
+                    ? new Date(statusDateStr)
+                    : null,
+            onlyWithID: parts[3] === 'true',
+        });
+    }
+}
+
 enum MemberStatusFilter {
     ACTIVE = 'ACTIVE',
     INACTIVE = 'INACTIVE',
@@ -40,25 +86,34 @@ enum MemberStatusFilter {
         RouterModule,
         MatButtonModule,
         DatePipePipe,
-        ReactiveFormsModule,
         MatDatepickerModule,
         MatTooltipModule,
         MatCheckbox,
         MatRadioModule,
         MatSortModule,
+        FormField,
     ],
     templateUrl: './view-members.html',
     styleUrl: './view-members.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewMembers implements AfterViewInit {
-    protected MemberStatusFilter = MemberStatusFilter;
-    protected readonly filterControl = new FormControl<string>('');
-    protected readonly statusControl = new FormControl<MemberStatusFilter>(
-        MemberStatusFilter.ACTIVE,
+    private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+    protected readonly MemberStatusFilter = MemberStatusFilter;
+    private readonly filterModel = signal({
+        filterString: '',
+        status: MemberStatusFilter.ACTIVE,
+        statusDate: new Date() as Date | null,
+        onlyWithID: false,
+    });
+    protected readonly filterForm = form(this.filterModel);
+
+    protected readonly statusDateDisabled = computed(
+        () => this.filterForm.status().value() === MemberStatusFilter.ALL,
     );
-    protected readonly statusDateControl = new FormControl<Date | null>(null);
-    protected readonly onlyWithID = new FormControl<boolean>(false);
-    protected dataSource = new MatTableDataSource<api.MemberDto>();
+
+    protected readonly dataSource = new MatTableDataSource<api.MemberDto>();
     private readonly datePipe = new DatePipePipe();
 
     protected readonly displayedColumns: string[] = [
@@ -72,6 +127,7 @@ export class ViewMembers implements AfterViewInit {
         'geburtsort',
         'verein',
         'kontakt',
+        'creationDate',
         'kuendigungzum',
         'delete',
     ];
@@ -122,35 +178,41 @@ export class ViewMembers implements AfterViewInit {
             data: api.MemberDto,
             encodedFilter: string,
         ) => {
-            const parts = encodedFilter.split(';');
-            const filter = parts[0];
-            const status = parts[1] as MemberStatusFilter;
-            const statusDateStr = parts[2];
-            const onlyWithID = parts[3] === 'true';
+            const filters = MemberFilters.decode(encodedFilter);
 
-            const currentDate =
-                statusDateStr && statusDateStr != ''
-                    ? new Date(statusDateStr)
-                    : null;
+            if (filters.statusDate) {
                 const cancellationDate = data.kuendigungzum
                     ? new Date(data.kuendigungzum)
                     : null;
+
+                switch (filters.status) {
+                    case MemberStatusFilter.ACTIVE:
+                        const creationDate = data.creationDate
+                            ? new Date(data.creationDate)
+                            : null;
                         if (
-                currentDate &&
-                cancellationDate &&
-                ((status === MemberStatusFilter.ACTIVE &&
-                    cancellationDate <= currentDate) ||
-                    (status === MemberStatusFilter.INACTIVE &&
-                        cancellationDate > currentDate))
+                            (cancellationDate &&
+                                cancellationDate <= filters.statusDate) ||
+                            (creationDate && creationDate > filters.statusDate)
                         ) {
                             return false;
                         }
-            if (status === MemberStatusFilter.INACTIVE && !cancellationDate) {
+                        break;
+                    case MemberStatusFilter.INACTIVE:
+                        if (
+                            !cancellationDate ||
+                            cancellationDate < filters.statusDate
+                        ) {
                             return false;
                         }
+                        break;
+                    case MemberStatusFilter.ALL:
+                        break;
+                }
+            }
 
             if (
-                onlyWithID &&
+                filters.onlyWithID &&
                 (!data.passnummer || data.passnummer.trim() === '')
             ) {
                 return false;
@@ -159,7 +221,7 @@ export class ViewMembers implements AfterViewInit {
             return originalFilterPredicate(
                 {
                     ...data,
-                    id: null,
+                    id: '',
                     geburtsdatum: this.datePipe.transform(
                         data.geburtsdatum ?? undefined,
                     ),
@@ -169,45 +231,23 @@ export class ViewMembers implements AfterViewInit {
                     letztePruefung: this.datePipe.transform(
                         data.letztePruefung ?? undefined,
                     ),
+                    creationDate: this.datePipe.transform(
+                        data.creationDate ?? undefined,
+                    ),
                 },
-                filter,
+                filters.filterString,
             );
         };
-        combineLatest([
-            this.filterControl.valueChanges.pipe(
-                startWith(this.filterControl.value),
-            ),
-            this.statusControl.valueChanges.pipe(
-                startWith(this.statusControl.value),
-            ),
-            this.statusDateControl.valueChanges.pipe(
-                startWith(this.statusDateControl.value),
-            ),
-            this.onlyWithID.valueChanges.pipe(startWith(this.onlyWithID.value)),
-        ])
-            // .pipe(takeUntilDestroyed())
-            .subscribe(combined => {
-                const filter = combined[0];
-                const status = combined[1];
-                const date = combined[2];
-                const onlyWithID = combined[3];
-                this.dataSource.filter = `${filter?.replaceAll(';', '') ?? ''};${status};${date?.toISOString()};${onlyWithID}`;
-            });
 
-        this.statusControl.valueChanges
-            .pipe(takeUntilDestroyed())
-            .subscribe(value => {
-                if (
-                    value === MemberStatusFilter.ALL &&
-                    this.statusDateControl.enabled
-                ) {
-                    return this.statusDateControl.disable();
-                } else if (
-                    value !== MemberStatusFilter.ALL &&
-                    this.statusDateControl.disabled
-                ) {
-                    return this.statusDateControl.enable();
-                }
+        effect(() => {
+            const filtersSignal = this.filterModel();
+            const filters = new MemberFilters({
+                filterString: filtersSignal.filterString,
+                status: filtersSignal.status,
+                statusDate: filtersSignal.statusDate,
+                onlyWithID: filtersSignal.onlyWithID,
+            });
+            this.dataSource.filter = filters.encode();
         });
 
         this.updateData();
@@ -221,5 +261,127 @@ export class ViewMembers implements AfterViewInit {
     private async updateData(): Promise<void> {
         const members = await api.getMembers();
         this.dataSource.data = members;
+        this.changeDetectorRef.markForCheck();
+    }
+
+    protected print() {
+        const data = this.dataSource.filteredData;
+        const printWindow = document.createElement('iframe');
+
+        const table = document.createElement('table');
+        const headerRow = document.createElement('tr');
+
+        const firstnameHeader = document.createElement('th');
+        firstnameHeader.innerText = 'Vorname';
+        headerRow.appendChild(firstnameHeader);
+
+        const lastnameHeader = document.createElement('th');
+        lastnameHeader.innerText = 'Nachname';
+        headerRow.appendChild(lastnameHeader);
+
+        const genderHeader = document.createElement('th');
+        genderHeader.innerText = 'Geschlecht';
+        headerRow.appendChild(genderHeader);
+
+        const clubnrHeader = document.createElement('th');
+        clubnrHeader.innerText = 'Passnummer';
+        headerRow.appendChild(clubnrHeader);
+
+        const birthdayHeader = document.createElement('th');
+        birthdayHeader.innerText = 'Geboren am';
+        headerRow.appendChild(birthdayHeader);
+
+        const geburtsortHeader = document.createElement('th');
+        geburtsortHeader.innerText = 'Geburtsort';
+        headerRow.appendChild(geburtsortHeader);
+
+        const cancelDateHeader = document.createElement('th');
+        cancelDateHeader.innerText = 'Kündigung';
+        headerRow.appendChild(cancelDateHeader);
+
+        table.appendChild(headerRow);
+
+        var docstyle = window.getComputedStyle(document.body);
+        var surface = docstyle.getPropertyValue('--mat-sys-surface');
+        var surfaceVariant = docstyle.getPropertyValue(
+            '--mat-sys-surface-variant',
+        );
+
+        var counter = 0;
+        for (const member of data) {
+            const memberRow = document.createElement('tr');
+            memberRow.style.backgroundColor =
+                counter % 2 === 0 ? surface : surfaceVariant;
+            counter++;
+
+            const firstnameCell = document.createElement('td');
+            firstnameCell.innerText = member.vorname ?? '';
+            memberRow.appendChild(firstnameCell);
+            firstnameCell.style.border = '1px solid darkgray';
+            firstnameCell.style.borderCollapse = 'collapse';
+            // firstnameCell.style.backgroundColor = 'black';
+
+            const lastnameCell = document.createElement('td');
+            lastnameCell.innerText = member.nachname ?? '';
+            memberRow.appendChild(lastnameCell);
+            lastnameCell.style.border = '1px solid darkgray';
+            lastnameCell.style.borderCollapse = 'collapse';
+
+            const genderCell = document.createElement('td');
+            genderCell.innerText = member.geschlecht ?? '';
+            memberRow.appendChild(genderCell);
+            genderCell.style.border = '1px solid darkgray';
+            genderCell.style.borderCollapse = 'collapse';
+
+            const clubnrCell = document.createElement('td');
+            clubnrCell.innerText = member.passnummer ?? '';
+            memberRow.appendChild(clubnrCell);
+            clubnrCell.style.border = '1px solid darkgray';
+            clubnrCell.style.borderCollapse = 'collapse';
+
+            const birthdayCell = document.createElement('td');
+            birthdayCell.innerText =
+                member.geburtsdatum != null
+                    ? (this.datePipe.transform(member.geburtsdatum) ?? '')
+                    : '';
+            memberRow.appendChild(birthdayCell);
+            birthdayCell.style.border = '1px solid darkgray';
+            birthdayCell.style.borderCollapse = 'collapse';
+
+            const geburtsortCell = document.createElement('td');
+            geburtsortCell.innerText = member.geburtsort ?? '';
+            memberRow.appendChild(geburtsortCell);
+            geburtsortCell.style.border = '1px solid darkgray';
+            geburtsortCell.style.borderCollapse = 'collapse';
+
+            const cancelDateCell = document.createElement('td');
+            cancelDateCell.innerText =
+                member.kuendigungzum != null
+                    ? (this.datePipe.transform(member.kuendigungzum) ?? '')
+                    : '';
+            memberRow.appendChild(cancelDateCell);
+            cancelDateCell.style.border = '1px solid darkgray';
+            cancelDateCell.style.borderCollapse = 'collapse';
+
+            table.appendChild(memberRow);
+        }
+
+        // printWindow.contentDocument?.appendChild(table);
+
+        table.style.width = '100%';
+        table.style.borderCollapse = 'collapse';
+        table.style.borderSpacing = '0';
+        // printWindow.style.display = 'none';
+
+        printWindow.srcdoc = table.outerHTML;
+        document.body.appendChild(printWindow);
+        printWindow.contentWindow?.print();
+    }
+
+    protected isInPast(date: string): boolean {
+        if (!date) return false;
+        const today = new Date();
+        const cancellationDate = new Date(date);
+        return cancellationDate <= today;
     }
 }

packages/frontend/src/app/directives/ellipsis/ellipsis.spec.ts

@@ -0,0 +1,8 @@
+import { Ellipsis } from './ellipsis';
+
+describe('Ellipsis', () => {
+  it('should create an instance', () => {
+    const directive = new Ellipsis();
+    expect(directive).toBeTruthy();
+  });
+});

packages/frontend/src/app/directives/ellipsis/ellipsis.ts

@@ -0,0 +1,53 @@
+import {
+    AfterViewInit,
+    Directive,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    signal,
+    WritableSignal,
+} from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Directive({
+    selector: '[ellipsis]',
+    hostDirectives: [MatTooltip],
+})
+export class Ellipsis implements AfterViewInit {
+    // private readonly templateRef = inject(TemplateRef<any>);
+    // private readonly viewContainer = inject(ViewContainerRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(
+        ElementRef<HTMLElement>,
+    );
+    private readonly tooltip = inject(MatTooltip);
+    private readonly originalText: WritableSignal<string>;
+    public readonly ellipsis = input.required<number>();
+
+    public constructor() {
+        this.originalText = signal(this.elementRef.nativeElement.innerHTML);
+        effect(() => {
+            const length = this.ellipsis();
+            const originalText = this.originalText();
+            this.tooltip.message = originalText;
+            if (length < 0) {
+                console.warn('Ellipsis Pipe with negative length', length);
+                this.elementRef.nativeElement.innerHTML = '';
+                return;
+            }
+            if (length < 4) {
+                this.elementRef.nativeElement.innerHTML = '.'.repeat(length);
+                return;
+            }
+            if (originalText.length > length) {
+                this.elementRef.nativeElement.innerHTML = `${originalText.substring(0, length - 3)}...`;
+                return;
+            }
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        const originalText = this.elementRef.nativeElement.innerText;
+        this.originalText.set(originalText);
+    }
+}

packages/frontend/src/app/services/push/angularPushPayload.ts

@@ -0,0 +1,29 @@
+type USVString = string;
+type DOMString = string;
+type DOMTimeStamp = number;
+
+export interface NotificationAction {
+    action: string;
+    title: string;
+    icon: string;
+}
+
+export interface AngularPushPayload {
+    notification: {
+        actions?: NotificationAction[];
+        badge?: USVString;
+        body?: DOMString;
+        data?: any;
+        dir?: 'auto' | 'ltr' | 'rtl';
+        icon?: USVString;
+        image?: USVString;
+        lang?: DOMString;
+        renotify?: boolean;
+        requireInteraction?: boolean;
+        silent?: boolean;
+        tag?: DOMString;
+        timestamp?: DOMTimeStamp;
+        title: DOMString;
+        vibrate?: number[];
+    };
+}

packages/frontend/src/app/services/push/pushService.ts

@@ -0,0 +1,81 @@
+import { inject, Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { SwPush } from '@angular/service-worker';
+import { map } from 'rxjs';
+import { v7 as uuidv7 } from 'uuid';
+import * as api from '../../generated-api/api';
+import VAPID from './vapid.json' with { type: 'json' };
+
+const SUBSCRIPTION_CLIENT_ID = 'subscriptionClientId';
+
+@Injectable({ providedIn: 'root' })
+export class PushService {
+    private readonly swPush = inject(SwPush);
+    public readonly isSubscribed = toSignal(
+        this.swPush.subscription.pipe(map(x => x != null)),
+    );
+
+    private arrayBufferToString(buffer: ArrayBuffer | null) {
+        if (buffer == null) {
+            return '';
+        }
+        let binary = '';
+        const bytes = new Uint8Array(buffer);
+        const len = bytes.length;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return btoa(binary);
+    }
+
+    public async subscribeToEvents() {
+        try {
+            console.log('trying to subscribe');
+            const subscription = await this.swPush.requestSubscription({
+                serverPublicKey: VAPID.publicKey,
+            });
+
+            console.log('returned');
+            console.dir(subscription);
+            console.log('end');
+
+            const previousCliendId = localStorage.getItem(
+                SUBSCRIPTION_CLIENT_ID,
+            );
+            if (previousCliendId) {
+                try {
+                    await api.clearSubscription({ clientId: previousCliendId });
+                    console.log('previous subscription cleared');
+                } catch {}
+            }
+
+            const newClientId = uuidv7();
+
+            await api.addSubscription({
+                endpoint: subscription.endpoint,
+                keys: {
+                    auth: this.arrayBufferToString(subscription.getKey('auth')),
+                    p256dh: this.arrayBufferToString(
+                        subscription.getKey('p256dh'),
+                    ),
+                },
+                expirationTime: subscription.expirationTime,
+                topic: api.Topic.Events,
+                topicConfiguration: null,
+                clientId: newClientId,
+            });
+
+            localStorage.setItem(SUBSCRIPTION_CLIENT_ID, newClientId);
+        } catch (error) {
+            console.error('Subscribing failed: ', error);
+        }
+    }
+
+    public async resetSubscriptions() {
+        const clientId = localStorage.getItem(SUBSCRIPTION_CLIENT_ID);
+        await this.swPush.unsubscribe();
+        await api.clearSubscription({
+            clientId: clientId ?? undefined,
+        });
+    }
+}

packages/frontend/src/app/util/member.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
-import { Locale, parse } from 'date-fns';
+import { Locale } from 'date-fns';
 import { MemberCreateArgs, MemberDto } from '../generated-api/api';
 import { dateToLocal, dateToUTC } from '../pipes/date-pipe.pipe';
 
@@ -21,86 +21,78 @@ interface MemberForm {
     marker: FormControl<boolean | null | undefined>;
 }
 
+export interface MemberCreateForm extends Omit<
+    MemberCreateArgs,
+    'geburtsdatum' | 'creationDate'
+> {
+    geburtsdatum: Date | null;
+}
+
+export interface MemberEditForm extends Omit<
+    MemberDto,
+    'geburtsdatum' | 'kuendigungzum' | 'letztePruefung'
+> {
+    geburtsdatum: Date | null;
+    kuendigungzum: Date | null;
+    letztePruefung: Date | null;
+}
+
 @Injectable({
     providedIn: 'root',
 })
 export class MemberDtoHelper {
     constructor(@Inject(MAT_DATE_LOCALE) private locale: Locale) {}
-    public newMemberForm(member?: MemberDto): FormGroup<MemberForm> {
-        const geburtsdatum = member?.geburtsdatum;
-        let enDate: Date | null = null;
-        if (geburtsdatum) {
-            enDate = parse(geburtsdatum, 'dd.MM.yyyy', new Date(), {
-                //TODO get dd.MM.yyyy from MAT_DATE_LOCALE or LOCALE_ID
-                locale: this.locale,
-            });
-        }
-
-        return new FormGroup<MemberForm>({
-            id: new FormControl(member?.id),
-            vorname: new FormControl(member?.vorname),
-            nachname: new FormControl(member?.nachname),
-            geschlecht: new FormControl(member?.geschlecht),
-            geburtsdatum: new FormControl(
-                member?.geburtsdatum ? dateToUTC(member?.geburtsdatum) : null,
-            ),
-            geburtsort: new FormControl(member?.geburtsort),
-            passnummer: new FormControl(member?.passnummer),
-            verein: new FormControl(member?.verein),
-            kontakt: new FormControl(member?.kontakt),
-            graduierung: new FormControl(member?.graduierung),
-            kuendigungzum: new FormControl(
-                member?.kuendigungzum ? dateToUTC(member?.kuendigungzum) : null,
-            ),
-            letztePruefung: new FormControl(
-                member?.letztePruefung
-                    ? dateToUTC(member?.letztePruefung)
-                    : null,
-            ),
-            marker: new FormControl(false),
-        });
-    }
-
-    memberFromForm(form: FormGroup<MemberForm>): MemberDto {
+    public newMemberForm(): MemberCreateForm {
         return {
-            id: form.controls.id.value ?? null,
-            vorname: form.controls.vorname.value ?? null,
-            nachname: form.controls.nachname.value ?? null,
-            geschlecht: form.controls.geschlecht.value ?? null,
-            geburtsdatum: form.controls.geburtsdatum.value
-                ? dateToLocal(form.controls.geburtsdatum.value).toISOString()
-                : null,
-            geburtsort: form.controls.geburtsort.value ?? null,
-            passnummer: form.controls.passnummer.value ?? null,
-            verein: form.controls.verein.value ?? null,
-            kontakt: form.controls.kontakt.value ?? null,
-            graduierung: form.controls.graduierung?.value ?? null,
-            kuendigungzum: form.controls.kuendigungzum.value
-                ? dateToLocal(form.controls.kuendigungzum.value).toISOString()
-                : null,
-            letztePruefung: form.controls.letztePruefung.value
-                ? dateToLocal(form.controls.letztePruefung.value).toISOString()
-                : null,
-            marker: form.controls.marker.value ?? false,
+            vorname: '',
+            nachname: '',
+            geschlecht: '',
+            geburtsdatum: null,
+            geburtsort: '',
+            passnummer: '',
+            verein: false,
+            kontakt: '',
+            graduierung: '',
+            marker: false,
         };
     }
 
-    newMemberFromForm(form: FormGroup<MemberForm>): MemberCreateArgs {
+    public newMemberFromSignal(sig: MemberCreateForm): MemberCreateArgs {
         return {
-            vorname: form.controls.vorname.value ?? null,
-            nachname: form.controls.nachname.value ?? null,
-            geschlecht: form.controls.geschlecht.value ?? null,
-            geburtsdatum: form.controls.geburtsdatum.value
-                ? dateToLocal(form.controls.geburtsdatum.value).toISOString()
+            ...sig,
+            geburtsdatum: sig.geburtsdatum
+                ? dateToLocal(sig.geburtsdatum).toISOString()
+                : '',
+        };
+    }
+
+    public editMemberForm(member: MemberDto): MemberEditForm {
+        return {
+            ...member,
+            geburtsdatum: member.geburtsdatum
+                ? dateToUTC(member.geburtsdatum)
                 : null,
-            geburtsort: form.controls.geburtsort.value ?? null,
-            passnummer: form.controls.passnummer.value ?? null,
-            verein: form.controls.verein.value ?? null,
-            kontakt: form.controls.kontakt.value ?? null,
-            graduierung: form.controls.graduierung?.value ?? null,
-            kuendigungzum: null, //TODO not for new member
-            letztePruefung: null, //TODO not for new member
-            marker: form.controls.marker.value ?? false,
+            kuendigungzum: member.kuendigungzum
+                ? dateToUTC(member.kuendigungzum)
+                : null,
+            letztePruefung: member.letztePruefung
+                ? dateToUTC(member.letztePruefung)
+                : null,
+        };
+    }
+
+    public memberFromSignal(sig: MemberEditForm): MemberDto {
+        return {
+            ...sig,
+            geburtsdatum: sig.geburtsdatum
+                ? dateToLocal(sig.geburtsdatum).toISOString()
+                : '',
+            kuendigungzum: sig.kuendigungzum
+                ? dateToLocal(sig.kuendigungzum).toISOString()
+                : '',
+            letztePruefung: sig.letztePruefung
+                ? dateToLocal(sig.letztePruefung).toISOString()
+                : '',
         };
     }
 }

packages/frontend/src/index.html

@@ -6,6 +6,7 @@
         <title>1.TC Chemnitz Mitgliederdatenbank</title>
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.gstatic.com/" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap"

packages/frontend/src/styles.scss

@@ -102,8 +102,4 @@ body {
         display: none;
         visibility: hidden;
     }
-
-    :not(.no-print) {
-        visibility: visible;
-    }
 }

packages/frontend/tsconfig.app.json

@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "rootDir": "./src",
     "types": []
   },
   "include": [