featu odate

src/app/pages/helfer/helfer/helfer.page.html

@@ -19,7 +19,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ng-container *ngIf="eventsList$ | async as eventsList; else loading">
+  <ng-container *ngIf="helferList$ | async as eventsList; else loading">
     <ion-list *ngIf="eventsList.length > 0">
       <ion-list-header>
         <ion-label>Kommende Helferevents</ion-label>
@@ -104,7 +104,7 @@ <h3>
     </ion-list>
   </ng-container>
 
-  <ng-container *ngIf="eventsListPast$ | async as eventsListPast; else loading">
+  <ng-container *ngIf="helferListPast$ | async as eventsListPast; else loading">
     <ion-list *ngIf="eventsListPast.length > 0">
       <ion-list-header>
         <ion-label>Vergangene Helferevents</ion-label>

src/app/pages/helfer/helfer/helfer.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import {
   IonItemSliding,
   IonRouterOutlet,
@@ -8,14 +8,15 @@ import {
   AlertController,
 } from "@ionic/angular";
 import { User } from "@angular/fire/auth";
-import { Observable, Subscription, catchError, combineLatest, concatMap, defaultIfEmpty, finalize, forkJoin, from,  map,  of, switchMap, take, tap, timeout} from "rxjs";
+import { Observable, Subscription, catchError, combineLatest, concatMap, defaultIfEmpty, finalize, forkJoin, from,  map,  mergeMap,  of, switchMap, take, tap, timeout} from "rxjs";
 import { HelferEvent, Veranstaltung } from "src/app/models/event";
 import { AuthService } from "src/app/services/auth.service";
 import { FirebaseService } from "src/app/services/firebase.service";
 import { EventService } from "src/app/services/firebase/event.service";
 import { Club } from "src/app/models/club";
 import { Team } from "src/app/models/team";
 import { HelferAddPage } from '../helfer-add/helfer-add.page';
+import { Timestamp } from 'firebase/firestore';
 
 @Component({
   selector: 'app-helfer',
@@ -28,14 +29,9 @@ export class HelferPage implements OnInit {
   user$: Observable<User>;
   user: User;
 
-  eventsList$: Observable<Veranstaltung[]>;
-  eventsListPast$: Observable<Veranstaltung[]>;
+  helferList$: Observable<Veranstaltung[]>;
+  helferListPast$: Observable<Veranstaltung[]>;
 
-  eventsList: Veranstaltung[];
-  eventsListPast: Veranstaltung[];
-
-  private subscription: Subscription;
-  private subscriptionPast: Subscription;
 
   filterList: any[] = [];
   filterValue: string = "";
@@ -47,12 +43,45 @@ export class HelferPage implements OnInit {
     private readonly fbService: FirebaseService,
     private readonly eventService: EventService,
     private readonly alertCtrl: AlertController,
-    private readonly menuCtrl: MenuController
+    private readonly menuCtrl: MenuController,
+    private cdr: ChangeDetectorRef,
   ) { 
     this.menuCtrl.enable(true, "menu");
   }
 
   ngOnInit() {
+
+
+
+    this.helferList$ = this.getHelferEvent();
+    this.helferList$.subscribe({
+      next: (data) => {
+        console.log("HELFER Data received");
+        this.cdr.detectChanges();
+      },
+      error: (err) => console.error("HELFER Error in subscription:", err),
+      complete: () => console.log("HELFER Observable completed")
+    });
+
+
+    this.helferListPast$ = this.getHelferEventPast();
+    this.helferListPast$.subscribe({
+      next: () => {
+        console.log("HELFER PAST Data received");
+        this.cdr.detectChanges();
+      },
+      error: (err) => console.error("HELFER PAST Error in subscription:", err),
+      complete: () => console.log("HELFER PAST Observable completed")
+    });
+
+
+
+
+
+
+
+
+/*
     const TIMEOUT_DURATION = 1000; // 5 seconds, adjust as needed
 
     const helferEventList: HelferEvent[] = [];
@@ -123,9 +152,108 @@ export class HelferPage implements OnInit {
       },
       error: err => console.error('Error in the observable chain:', err)
     });
-
+*/
   }
 
+  getHelferEvent() {
+    return this.authService.getUser$().pipe(
+      take(1),
+      tap(user=>{
+        this.user = user;
+      }),
+      switchMap(user => {
+        if (!user) return of([]);
+        return this.fbService.getUserClubRefs(user);
+      }),
+      tap(clubs => console.log("Teams:", clubs)),
+      mergeMap(teams => {
+        if (teams.length === 0) return of([]);
+        return combineLatest(
+          teams.map(team => 
+            this.eventService.getClubHelferEventRefs(team.id).pipe(
+              switchMap(teamGames => {
+                if (teamGames.length === 0) return of([]);
+                return combineLatest(
+                  teamGames.map(game => 
+                    this.eventService.getClubHelferEventAttendeesRef(team.id, game.id).pipe(
+                      map(attendees => {
+                        const userAttendee = attendees.find(att => att.id == this.user.uid);
+                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
+                        return ({...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
+                      }),
+                      catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return game with empty attendees
+                    )
+                  )
+                );
+              }),
+              map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
+              catchError(() => of([])) // If error in fetching games, return empty array
+            )
+          )
+        ).pipe(
+          map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
+          map(allGames => 
+            allGames.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+          )
+        );
+      }),
+      tap(results => console.log("Final results with all games:", results)),
+      catchError(err => {
+        console.error("Error in getTeamGamesUpcoming:", err);
+        return of([]); // Return an empty array on error
+      })
+    );
+  }
+
+  getHelferEventPast() {
+    return this.authService.getUser$().pipe(
+      take(1),
+      tap(user=>{
+        this.user = user;
+      }),
+      switchMap(user => {
+        if (!user) return of([]);
+        return this.fbService.getUserClubRefs(user);
+      }),
+      tap(clubs => console.log("Teams:", clubs)),
+      mergeMap(teams => {
+        if (teams.length === 0) return of([]);
+        return combineLatest(
+          teams.map(team => 
+            this.eventService.getClubHelferEventPastRefs(team.id).pipe(
+              switchMap(teamGames => {
+                if (teamGames.length === 0) return of([]);
+                return combineLatest(
+                  teamGames.map(game => 
+                    this.eventService.getClubHelferEventAttendeesRef(team.id, game.id).pipe(
+                      map(attendees => {
+                        const userAttendee = attendees.find(att => att.id == this.user.uid);
+                        const status = userAttendee ? userAttendee.status : null; // default to false if user is not found in attendees list
+                        return ({...game, attendees, status: status, countAttendees: attendees.filter(att => att.status == true).length, teamId: team.id,})
+                      }),
+                      catchError(() => of({ ...game, attendees: [], status: null, countAttendees: 0, teamId: team.id,})) // If error, return game with empty attendees
+                    )
+                  )
+                );
+              }),
+              map(gamesWithAttendees => gamesWithAttendees), // Flatten games array for each team
+              catchError(() => of([])) // If error in fetching games, return empty array
+            )
+          )
+        ).pipe(
+          map(teamsGames => teamsGames.flat()), // Flatten to get all games across all teams
+          map(allGames => 
+            allGames.sort((a, b) => Timestamp.fromMillis(a.dateTime).seconds - Timestamp.fromMillis(b.dateTime).seconds) // Sort games by date
+          )
+        );
+      }),
+      tap(results => console.log("Final results with all games:", results)),
+      catchError(err => {
+        console.error("Error in getTeamGamesUpcoming:", err);
+        return of([]); // Return an empty array on error
+      })
+    );
+  }
   async toggle(status: boolean, event: Veranstaltung) {
     console.log(
       `Set Status ${status} for user ${this.user.uid} and club ${event.clubId} and event ${event.id}`
@@ -166,6 +294,7 @@ export class HelferPage implements OnInit {
   }
 
   async openFilter(ev: Event){
+    /*
     let filterList = [];
 
     const clubs$ = this.authService.getUser$().pipe(
@@ -233,7 +362,7 @@ export class HelferPage implements OnInit {
     },
     error: err => console.error('Error in the observable chain:', err)
   });
-
+  */
   }
 
 

src/app/services/firebase/event.service.ts

@@ -118,7 +118,31 @@ export class EventService {
   /* HELFER EVENTS */
   getClubHelferEventRefs(clubId: string): Observable<HelferEvent[]>{
     const eventsRefList = collection(this.firestore, `club/${clubId}/helferEvents`);
-    return collectionData(eventsRefList, {
+    const q = query(
+      eventsRefList,
+      where(
+        "date",
+        ">=",
+        Timestamp.fromDate(new Date(Date.now() - 1000 * 3600 * 24 * 1))
+      )
+    ); // heute - 1 Tag
+    return collectionData(q, {
+      idField: "id",
+    }) as unknown as Observable<HelferEvent[]>;
+  }
+  getClubHelferEventPastRefs(clubId: string): Observable<HelferEvent[]>{
+    const eventsRefList = collection(this.firestore, `club/${clubId}/helferEvents`);
+    const q = query(
+      eventsRefList,
+      where(
+        "date",
+        "<",
+        Timestamp.fromDate(new Date(Date.now() - 1000 * 3600 * 24 * 1))
+      ),
+      limit(20)
+    ); // heute - 1 Tag
+
+    return collectionData(q, {
       idField: "id",
     }) as unknown as Observable<HelferEvent[]>;
   }

src/global.scss

@@ -28,7 +28,6 @@
 
 
 .myclubStatus {
-
     margin-top: 10px !important;
     margin-bottom: 10px !important;
   }