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

@@ -1,9 +1,14 @@
 <h1>Gesammelte Veranstaltungen</h1>
 <p>
-    <button matButton="filled" (click)="subscribe()">Abbonieren</button>
+    @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>

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

@@ -6,6 +6,7 @@ import {
     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';
@@ -15,13 +16,19 @@ import { PushService } from '../../services/push/pushService';
 
 @Component({
     selector: 'app-events',
-    imports: [MatTableModule, MatSortModule, MatButtonModule, Ellipsis],
+    imports: [
+        MatTableModule,
+        MatSortModule,
+        MatButtonModule,
+        Ellipsis,
+        MatIconModule,
+    ],
     templateUrl: './events.html',
     styleUrl: './events.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Events implements OnInit {
-    private readonly pushService = inject(PushService);
+    protected readonly pushService = inject(PushService);
     protected readonly datasource = new MatTableDataSource<api.FoundEventDto>();
     protected readonly sort = viewChild.required(MatSort);
     protected readonly displayedColumns = [

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

@@ -1,5 +1,7 @@
 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' };
@@ -9,6 +11,9 @@ 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) {