From 2620538a2cc168c98108dfb780aa815f8ab5cfff Mon Sep 17 00:00:00 2001 From: toni Date: Sun, 15 Mar 2026 15:39:45 +0100 Subject: [PATCH] event subscriptions --- packages/api/package.json | 6 +- .../migration.sql | 8 + .../migration.sql | 5 + packages/api/prisma/schema.prisma | 3 + .../src/controllers/foundEventsController.ts | 28 +- .../api/src/controllers/pushController.ts | 46 ++- packages/api/src/dtos/foundEvents.ts | 23 +- packages/api/src/dtos/pushSubscription.ts | 10 +- packages/api/src/dtos/topic.ts | 4 +- packages/api/src/index.ts | 16 +- packages/api/src/services/db/prisma.ts | 41 +- .../foundEvents/foundEventsService.ts | 42 +- .../api/src/services/foundEvents/parseTUS.ts | 26 +- .../src/services/push/angularPushPayload.ts | 93 +++++ packages/api/src/services/push/pushService.ts | 364 +++++++++++++++--- packages/frontend/src/app/app.routes.ts | 5 + .../src/app/components/events/events.html | 65 ++++ .../src/app/components/events/events.scss | 12 + .../src/app/components/events/events.spec.ts | 23 ++ .../src/app/components/events/events.ts | 79 ++++ .../src/app/components/home/home.html | 16 +- .../app/directives/ellipsis/ellipsis.spec.ts | 8 + .../src/app/directives/ellipsis/ellipsis.ts | 53 +++ .../app/services/push/angularPushPayload.ts | 29 ++ .../src/app/services/push/pushService.ts | 54 +-- pnpm-lock.yaml | 183 ++++++--- 26 files changed, 1028 insertions(+), 214 deletions(-) create mode 100644 packages/api/prisma/migrations/20260315111316_attachment_title/migration.sql create mode 100644 packages/api/prisma/migrations/20260315142547_notifications_implementation/migration.sql create mode 100644 packages/api/src/services/push/angularPushPayload.ts create mode 100644 packages/frontend/src/app/components/events/events.html create mode 100644 packages/frontend/src/app/components/events/events.scss create mode 100644 packages/frontend/src/app/components/events/events.spec.ts create mode 100644 packages/frontend/src/app/components/events/events.ts create mode 100644 packages/frontend/src/app/directives/ellipsis/ellipsis.spec.ts create mode 100644 packages/frontend/src/app/directives/ellipsis/ellipsis.ts create mode 100644 packages/frontend/src/app/services/push/angularPushPayload.ts diff --git a/packages/api/package.json b/packages/api/package.json index 0f3621f..7407898 100644 --- a/packages/api/package.json +++ b/packages/api/package.json @@ -18,18 +18,20 @@ "@types/node": "^25.3.5", "@types/pg": "^8.18.0", "@types/web-push": "^3.6.4", - "prisma": "^7.4.2", + "prisma": "^7.5.0", "tsx": "^4.21.0", "typescript": "~5.9.3" }, "dependencies": { "@keycloak/keycloak-admin-client": "^26.5.5", "@prisma/adapter-pg": "^7.4.2", - "@prisma/client": "^7.4.2", + "@prisma/client": "^7.5.0", "@tsoa/runtime": "^6.6.0", "connect-pg-simple": "^10.0.0", "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", diff --git a/packages/api/prisma/migrations/20260315111316_attachment_title/migration.sql b/packages/api/prisma/migrations/20260315111316_attachment_title/migration.sql new file mode 100644 index 0000000..04fa251 --- /dev/null +++ b/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; diff --git a/packages/api/prisma/migrations/20260315142547_notifications_implementation/migration.sql b/packages/api/prisma/migrations/20260315142547_notifications_implementation/migration.sql new file mode 100644 index 0000000..d22ebeb --- /dev/null +++ b/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; diff --git a/packages/api/prisma/schema.prisma b/packages/api/prisma/schema.prisma index e47e9f4..9f3dea7 100644 --- a/packages/api/prisma/schema.prisma +++ b/packages/api/prisma/schema.prisma @@ -34,6 +34,7 @@ model session { enum Topic { TEST + EVENTS } model FoundEvents { @@ -49,6 +50,7 @@ model FoundEvents { 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 @@ -67,6 +69,7 @@ model PushSubscription { topic Topic topicConfiguration Json? @db.JsonB clientId String @db.Uuid + lastNotified DateTime? @db.Date } model User { diff --git a/packages/api/src/controllers/foundEventsController.ts b/packages/api/src/controllers/foundEventsController.ts index 69b46cb..857f5c4 100644 --- a/packages/api/src/controllers/foundEventsController.ts +++ b/packages/api/src/controllers/foundEventsController.ts @@ -1,15 +1,35 @@ -import { Controller, Post, Route, SuccessResponse } from "tsoa"; +import express from "express"; +import { + Controller, + Get, + Post, + 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); @Post("crawl") + @Security(KC_SECURITY_NAME) @SuccessResponse("200", "OK") - //TODO add security - public async crawl() { - return await this.foundEventsService.crawl(); + public async crawl(): Promise { + await this.foundEventsService.crawl(); + } + + @Get("future") + @Security(KC_SECURITY_NAME) + @SuccessResponse("200", "OK") + public async getFutureEvents( + @Request() request: express.Request, + ): Promise { + return await this.foundEventsService.getFutureEvents(request); } } diff --git a/packages/api/src/controllers/pushController.ts b/packages/api/src/controllers/pushController.ts index 4042d6b..923ed2f 100644 --- a/packages/api/src/controllers/pushController.ts +++ b/packages/api/src/controllers/pushController.ts @@ -1,5 +1,14 @@ import express from "express"; -import { Body, Controller, Post, Query, Request, Route, Security, SuccessResponse } from "tsoa"; +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"; @@ -16,35 +25,46 @@ export class PushContoller extends Controller { @Body() subscription: PushSubscriptionCreateArgsDto, @Request() request: express.Request, ): Promise { - return await this.pushService.storeSubscription(subscription, request, request.res); + return await this.pushService.storeSubscription( + subscription, + request, + request.res, + ); } - @Post('reset') + @Post("reset") @Security(KC_SECURITY_NAME) - @SuccessResponse('200', 'OK') + @SuccessResponse("200", "OK") public async resetSubscriptions( - @Request() request: express.Request - ): Promise{ + @Request() request: express.Request, + ): Promise { return await this.pushService.reset(request); } - @Post('clearSingle') + @Post("clearSingle") @Security(KC_SECURITY_NAME) - @SuccessResponse("200", 'OK') + @SuccessResponse("200", "OK") public async clearSubscription( @Request() request: express.Request, - @Query() clientId: string - ):Promise{ + @Query() clientId: string, + ): Promise { await this.pushService.clearSubscription(clientId, request); } - @Post('test-publish') + //TODO remove + @Post("test-publish") @Security(KC_SECURITY_NAME) @SuccessResponse("200", "OK") public async publishTestMessage( - @Request() request: express.Request - ): Promise{ + @Request() request: express.Request, + ): Promise { this.pushService.sendtestNotification(request); } + //TODO remove + @Post("notify") + @SuccessResponse("200", "OK") + public async notifyEvents(): Promise { + await this.pushService.sendEventNotifications(); + } } diff --git a/packages/api/src/dtos/foundEvents.ts b/packages/api/src/dtos/foundEvents.ts index 8c1280d..ef61b3f 100644 --- a/packages/api/src/dtos/foundEvents.ts +++ b/packages/api/src/dtos/foundEvents.ts @@ -1,4 +1,25 @@ -import type { FoundEvents } from "../generated/prisma/client.js"; +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, diff --git a/packages/api/src/dtos/pushSubscription.ts b/packages/api/src/dtos/pushSubscription.ts index 70de8e3..426c196 100644 --- a/packages/api/src/dtos/pushSubscription.ts +++ b/packages/api/src/dtos/pushSubscription.ts @@ -1,6 +1,7 @@ import type { JsonValue } from "@prisma/client/runtime/client"; +import type { Topic } from "./topic.js"; -export class PushSubscriptionDto{ +export class PushSubscriptionDto { id!: string; endpoint!: string; expirationTime!: number | null; @@ -13,12 +14,11 @@ export class PushSubscriptionDto{ clientId!: string; } -export class PushSubscriptionCreateArgs/* implements Omit*/{ +export class PushSubscriptionCreateArgs /* implements Omit*/ { endpoint!: string; expirationTime!: number | null; - keys!: { p256dh: string; auth: string; }; - topic!: "TEST"; + keys!: { p256dh: string; auth: string }; + topic!: Topic; topicConfiguration!: string | null; clientId!: string; - } diff --git a/packages/api/src/dtos/topic.ts b/packages/api/src/dtos/topic.ts index 61c8015..74c6ba6 100644 --- a/packages/api/src/dtos/topic.ts +++ b/packages/api/src/dtos/topic.ts @@ -1,3 +1 @@ -export enum Topic { - test = "test", -} +export { type Topic } from "../generated/prisma/client.js"; diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts index ff07d40..ad4a4cd 100644 --- a/packages/api/src/index.ts +++ b/packages/api/src/index.ts @@ -34,24 +34,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((resolve, reject) => { - // res.on("finish", resolve); - // res.on("close", resolve); - // res.on("error", reject); - // next(); - // }); - // }); - // }); - RegisterRoutes(app); const environment = inject(EnvironmentService); @@ -74,6 +62,7 @@ async function run() { let port: number; if (isDev) { + //TODO start with HTTPS in dev // cert = fs.readFileSync("src/cert.pem"); // key = fs.readFileSync("src/key.pem"); @@ -85,7 +74,6 @@ async function run() { console.log(`Server is running at http://localhost:${port}`); }); } else { - //TODO start with HTTPS in production port = 5443; const SSL_CERT_PATH = process.env["SSL_CERT_PATH"]; const SSL_KEY_PATH = process.env["SSL_KEY_PATH"]; diff --git a/packages/api/src/services/db/prisma.ts b/packages/api/src/services/db/prisma.ts index c2df86e..7445b04 100644 --- a/packages/api/src/services/db/prisma.ts +++ b/packages/api/src/services/db/prisma.ts @@ -5,10 +5,6 @@ import type { UserModel } from "../../generated/prisma/models.js"; import { Injectable } from "../../infrastructure/di/injectable-decorator.js"; type ExtendedClient = ReturnType; -// type TransactionClient = Omit< -// ExtendedClient, -// "$connect" | "$disconnect" | "$on" | "$transaction" | "$extends" -// >; export type SafeClient = Omit< ExtendedClient, @@ -26,28 +22,17 @@ export type SafeClient = Omit< function createExtendedClient(client: PrismaClient) { return client.$extends({ client: { - async ensureUserKnown(userId: string): Promise{ - let user = await client.user.findUnique({where: {id: userId}}); - if(user==null){ - user = await client.user.create({data:{id: userId}}); + async ensureUserKnown(userId: string): Promise { + let user = await client.user.findUnique({ + where: { id: userId }, + }); + if (user == null) { + user = await client.user.create({ data: { id: userId } }); } - return user - } - } + return user; + }, + }, }); - // .$extends({ - // name: "testExtension", - // model: { - // member: { - // withFullName(member: Member) { - // return { - // ...member, - // fullName: ` ${member.vorname} ${member.nachname}`, - // }; - // }, - // }, - // }, - // }); } @Injectable() @@ -69,9 +54,9 @@ export class DatabaseService { command: (prisma: SafeClient) => Promise, request: Request | null, ): Promise { - const transaction = - (request as any | null)?.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); } } diff --git a/packages/api/src/services/foundEvents/foundEventsService.ts b/packages/api/src/services/foundEvents/foundEventsService.ts index 4a19586..6045469 100644 --- a/packages/api/src/services/foundEvents/foundEventsService.ts +++ b/packages/api/src/services/foundEvents/foundEventsService.ts @@ -1,4 +1,7 @@ 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"; @@ -16,7 +19,9 @@ export class FoundEventsService { const top = this; this.crawler = new PlaywrightCrawler({ - async requestHandler({ request, page, log }) { + maxRequestsPerMinute: 100, + maxConcurrency: 2, + requestHandler: async ({ request, page, log }) => { if (request.retryCount > 0) return; const label = request.label; @@ -62,4 +67,39 @@ export class FoundEventsService { })); return await this.crawler.run(sources); } + + public async getFutureEvents(request: Request): Promise { + 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; + }); + } } diff --git a/packages/api/src/services/foundEvents/parseTUS.ts b/packages/api/src/services/foundEvents/parseTUS.ts index 241171e..23950b3 100644 --- a/packages/api/src/services/foundEvents/parseTUS.ts +++ b/packages/api/src/services/foundEvents/parseTUS.ts @@ -48,7 +48,7 @@ export async function parseTUS( } export async function parseTUSDetail( - url: string, + pageUrl: string, page: Page, database: DatabaseService, ): Promise { @@ -61,9 +61,20 @@ export async function parseTUSDetail( ); const attachedFileUrls = ( await Promise.all( - (await content.locator("a").all()).map(async locator => - locator.getAttribute("href"), - ), + (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) + : new URL(url, pageUrl) + : ""; + return { + url: aboluteUrl, + title: (await locator.textContent()) ?? "", + }; + }), ) ).filter(url => url != null); @@ -73,14 +84,15 @@ export async function parseTUSDetail( title: title?.trim() ?? null, eventDate: dateString, source: FoundEventSource.TUS, - url: url, + url: pageUrl, description: description?.trim() ?? null, }, }); await prisma.foundEventAttachments.createMany({ - data: attachedFileUrls.map(url => ({ - url: url, + data: attachedFileUrls.map(attachment => ({ + url: attachment.url, + title: attachment.title, eventId: newEvent.id, })), }); diff --git a/packages/api/src/services/push/angularPushPayload.ts b/packages/api/src/services/push/angularPushPayload.ts new file mode 100644 index 0000000..3e8e5a4 --- /dev/null +++ b/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[]; + }; +} diff --git a/packages/api/src/services/push/pushService.ts b/packages/api/src/services/push/pushService.ts index 6ad3f59..d0e1b4d 100644 --- a/packages/api/src/services/push/pushService.ts +++ b/packages/api/src/services/push/pushService.ts @@ -1,26 +1,45 @@ -import { DbNull } from "@prisma/client/runtime/client"; +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 VAPID from './vapid.json' with { type: "json" }; +import { + NotificationActionOperation, + type ActionClickHandler, + type AngularPushPayload, + type NotificationAction, +} from "./angularPushPayload.js"; +import VAPID from "./vapid.json" with { type: "json" }; @Injectable() -export class PushService{ +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 constructor() { + webpush.setVapidDetails( + "mailto:toniwalter.blue@gmail.com", + VAPID.publicKey, + VAPID.privateKey, + ); } - public async storeSubscription(subscription: PushSubscriptionCreateArgs, request: Request, response?: Response): Promise{ - const userId= await this.userService.getUid(request, response); - await this.db.doRequest(async prisma=>{ + public async storeSubscription( + subscription: PushSubscriptionCreateArgs, + request: Request, + response?: Response, + ): Promise { + const userId = await this.userService.getUid(request, response); + await this.db.doRequest(async prisma => { await prisma.ensureUserKnown(userId); return await prisma.pushSubscription.create({ data: { @@ -31,51 +50,212 @@ export class PushService{ userId: userId, clientId: subscription.clientId, topic: subscription.topic, - topicConfiguration: subscription.topicConfiguration ? JSON.parse(subscription.topicConfiguration) : DbNull, - } + topicConfiguration: subscription.topicConfiguration + ? JSON.parse(subscription.topicConfiguration) + : DbNull, + }, }); }, request); } - public async sendtestNotification(request: Request){ - const subscriptions = await this.db.doRequest(async prisma=>prisma.pushSubscription.findMany({where:{topic: "TEST"}}), request); + public async sendEventNotifications() { + const subscriptions = await this.db.doRequest( + async prisma => + prisma.pushSubscription.findMany({ + where: { topic: Topic.EVENTS }, + }), + null, + ); - const payload = { - notification: { - title: "ATitle", - body: "DatBod", - icon: "assets/some-icon.png", - vibrate: [100, 50, 100], - data: { - dateOfArrival: Date.now(), - primaryKey: 1 + // 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, }, - actions: [ - { - action: "explode", - title: "Make Boom" + 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 subscription of subscriptions) { + if ( + subscription.lastNotified && + subscription.lastNotified >= event.foundDate + ) { + // this subscription has already seen this event + continue; + } + if ( + !this.eventMatchesFilter( + event, + subscription.topicConfiguration, + ) + ) { + // this subscription does not care for this event + continue; + } + + console.log(`sending ${subscriptions.length} test messages`); + for (const s of subscriptions) { + try { + let backoff = 500; + let retry: boolean; + do { + console.log("SENDING"); + console.dir("payload"); + retry = await this.sendNotification( + s, + payload, + backoff, + ); + backoff *= 2; + } while (retry); + } catch (error) { + console.error("Cannot send notification: ", error); + throw error; } - ] + } } } + await this.db.doRequest( + async prisma => + prisma.pushSubscription.updateMany({ + where: { + id: { + in: subscriptions.map(s => s.id), + }, + }, + data: { + lastNotified: new Date(Date.now()), + }, + }), + null, + ); + } + + public async sendtestNotification(request: Request) { + const subscriptions = await this.db.doRequest( + async prisma => + prisma.pushSubscription.findMany({ where: { topic: "TEST" } }), + request, + ); + + const payload: AngularPushPayload = { + notification: { + title: "ATitle", + actions: [ + { + action: "explode", + title: "Make Boom", + }, + ], + body: "DatBod", + data: { + onActionClick: { + default: { + operation: NotificationActionOperation.OPEN_WINDOW, + }, + explode: { + operation: NotificationActionOperation.OPEN_WINDOW, + url: "explode.html", + }, + }, + }, + icon: "https://taekwondo-chemnitz.toni714.de/favicon.ico", + lang: "de-DE", + renotify: true, + requireInteraction: true, + tag: "group-tag", + timestamp: Date.now(), + vibrate: [100, 50, 100], + }, + }; + console.log(`sending ${subscriptions.length} test messages`); - for(const s of subscriptions){ - const subscription: webpush.PushSubscription={ + for (const s of subscriptions) { + const subscription: webpush.PushSubscription = { endpoint: s.endpoint, keys: { auth: s.auth, - p256dh: s.p256dh + p256dh: s.p256dh, }, - expirationTime: s.expirationTime + expirationTime: s.expirationTime, }; - try{ - const result = await webpush.sendNotification(subscription, JSON.stringify(payload), { - topic: Topic.TEST, - }); + try { + const result = await webpush.sendNotification( + subscription, + JSON.stringify(payload), + { + topic: Topic.TEST, + }, + ); console.log("success"); console.dir(result); - }catch(error){ + } catch (error) { console.error("Cannot send notification: ", error); throw error; } @@ -83,24 +263,110 @@ export class PushService{ } public async reset(request: Request): Promise { - const userId=await this.userService.getUid(request, request.res); - const subscriptions = await this.db.doRequest(async prisma=>await prisma.pushSubscription.deleteMany({ - where:{userId: userId} - }), request); + const userId = await this.userService.getUid(request, request.res); + const subscriptions = await this.db.doRequest( + async prisma => + await prisma.pushSubscription.deleteMany({ + where: { userId: userId }, + }), + request, + ); console.log(`deleted ${subscriptions.count} subs for ${userId}`); } - public async clearSubscription(clientId: string, request: Request): Promise { - const userId =await this.userService.getUid(request, request.res); - const batchResult =await this.db.doRequest(async prisma=>await prisma.pushSubscription.deleteMany({ - where: { - userId: userId, - AND: { - clientId: clientId - } - } - }), request); + public async clearSubscription( + clientId: string, + request: Request, + ): Promise { + const userId = await this.userService.getUid(request, request.res); + const batchResult = await this.db.doRequest( + async prisma => + await prisma.pushSubscription.deleteMany({ + where: { + userId: userId, + AND: { + clientId: clientId, + }, + }, + }), + request, + ); return batchResult.count; } + + private async sleep(ms: number): Promise { + await new Promise(r => setTimeout(r, ms)); + } + + private async sendNotification( + s: PushSubscription, + payload: AngularPushPayload, + backoff: number, + ): Promise { + 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; + } } diff --git a/packages/frontend/src/app/app.routes.ts b/packages/frontend/src/app/app.routes.ts index 4669c48..bddf3f1 100644 --- a/packages/frontend/src/app/app.routes.ts +++ b/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 }, ]; diff --git a/packages/frontend/src/app/components/events/events.html b/packages/frontend/src/app/components/events/events.html new file mode 100644 index 0000000..a9bb3f6 --- /dev/null +++ b/packages/frontend/src/app/components/events/events.html @@ -0,0 +1,65 @@ +

Gesammelte Veranstaltungen

+

+ + +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Gefunden bei + + {{truncateSource(element.source)}} + Link + {{element.url}} + + Ausrichtungsdatum + {{element.eventDate}}Titel{{element.title}} + Beschreibung + {{element.description}}Anhänge + @for(attachment of element.attachedFiles; track attachment.id){ + {{attachment.title??'?'}} + } +
+
diff --git a/packages/frontend/src/app/components/events/events.scss b/packages/frontend/src/app/components/events/events.scss new file mode 100644 index 0000000..5d2a997 --- /dev/null +++ b/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; +} diff --git a/packages/frontend/src/app/components/events/events.spec.ts b/packages/frontend/src/app/components/events/events.spec.ts new file mode 100644 index 0000000..22f1237 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Events] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Events); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/frontend/src/app/components/events/events.ts b/packages/frontend/src/app/components/events/events.ts new file mode 100644 index 0000000..b6b4cd9 --- /dev/null +++ b/packages/frontend/src/app/components/events/events.ts @@ -0,0 +1,79 @@ +import { + ChangeDetectionStrategy, + Component, + inject, + OnInit, + viewChild, +} from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +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], + templateUrl: './events.html', + styleUrl: './events.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class Events implements OnInit { + private readonly pushService = inject(PushService); + protected readonly datasource = new MatTableDataSource(); + protected readonly sort = viewChild.required(MatSort); + protected readonly displayedColumns = [ + 'eventDate', + 'title', + 'description', + 'attachedFiles', + 'url', + 'source', + ]; + + public async ngOnInit(): Promise { + 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() { + this.pushService.subscribeToEvents(); + } +} diff --git a/packages/frontend/src/app/components/home/home.html b/packages/frontend/src/app/components/home/home.html index 09e6688..c254647 100644 --- a/packages/frontend/src/app/components/home/home.html +++ b/packages/frontend/src/app/components/home/home.html @@ -5,16 +5,24 @@ Mitgliederliste - + + + + +