feat update events

myclubapp · Sep 18, 2023 · ff62252 · ff62252
1 parent 2cb1652
commit ff62252
Show file tree

Hide file tree

Showing 10 changed files with 380 additions and 23 deletions.
diff --git a/src/app/models/event.ts b/src/app/models/event.ts
@@ -4,16 +4,30 @@ export interface Event {
   id: string
   name: string
   description: string
-  dateTime: Timestamp
+
   location: string
+  streetAndNumber: string
+  postalCode: string
   city: string
-  date: Date
-  time: string
+
+  date: Timestamp,
+
+  startDate: string
+  endDate: string
+
+  timeFrom: string
+  timeTo: string
+
   teamId: string
+  teamName: string
+  liga: string
 
+  clubId: string
+  clubName: string
   // Business Logic Fields
   status: boolean
   attendees: any
+  countAttendees: number
 }
 export interface HelferEvent extends Event {
   schichten: [Schicht]

diff --git a/src/app/models/training.ts b/src/app/models/training.ts
@@ -1,3 +1,5 @@
+import { Timestamp } from 'firebase/firestore';
+
 export interface Training {
   id: string;
   name: string;
@@ -9,7 +11,7 @@ export interface Training {
   city: string;
 
   // actual date of training
-  date: any;
+  date: Timestamp;
 
   timeFrom: string;
   timeTo: string;

diff --git a/src/app/pages/event/event-add/event-add.page.html b/src/app/pages/event/event-add/event-add.page.html
@@ -1,16 +1,114 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-menu-button></ion-menu-button>
+    <ion-buttons slot="secondary">
+      <ion-button (click)="close()">schliessen</ion-button>
+    </ion-buttons>
+    <ion-title>Veranstaltung erstellen</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button (click)="createevent()">erstellen</ion-button>
     </ion-buttons>
-    <ion-title>Events Add</ion-title>
   </ion-toolbar>
 </ion-header>
+<ion-content class="ion-padding">
+  <ion-list>
+
+    <ion-item>
+      <ion-select label="Club" label-placement="stacked" [(ngModel)]="event.clubId" value="{{event.clubId}}" >
+        <ion-select-option *ngFor="let club of clubList" value="{{club.id}}">{{club.name}}</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-select label="Team" label-placement="stacked" [(ngModel)]="event.teamId" value="{{event.teamId}}" >
+        <ion-select-option *ngFor="let team of teamList" value="{{team.id}}">{{team.name}}</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-input label="Name" label-placement="stacked" [(ngModel)]="event.name" value="{{event.name}}">
+      </ion-input>
+    </ion-item>
+    <ion-item>
+
+      <ion-textarea
+      label="Beschreibung" label-placement="stacked"
+        value="{{event.description}}" [(ngModel)]="event.description"
+      >
+      </ion-textarea>
+    </ion-item>
+    <ion-item>
+
+      <ion-input
+      label="Strasse & Hausnummer" label-placement="stacked"
+        value="{{event.streetAndNumber}}" [(ngModel)]="event.streetAndNumber"
+      >
+      </ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input
+      label="Postleitzahl" label-placement="stacked"
+        value="{{event.postalCode}}" [(ngModel)]="event.postalCode"
+      >
+      </ion-input>
+    </ion-item>
+    <ion-item>
+
+      <ion-input label="Ortschaft" label-placement="stacked" value="{{event.city}}" [(ngModel)]="event.city">
+      </ion-input>
+    </ion-item>
+
+
+    <ion-item id="timeFromItem">
+      <ion-label position=""> Start Veranstaltung: </ion-label>
+      <ion-datetime-button slot="end" datetime="timeFrom"></ion-datetime-button>
+
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime presentation="time" id="timeFrom" minuteValues="0,5,10,15,20,25,30,35,40,45,50,55" value="{{event.timeFrom}}" [(ngModel)]="event.timeFrom"></ion-datetime>
+        </ng-template>
+      </ion-modal>
+    </ion-item>
+
+    <ion-item id="timeToItem">
+      <ion-label position=""> Ende Veranstaltung: </ion-label>
+      <ion-datetime-button slot="end" datetime="timeTo"></ion-datetime-button>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Events Add</ion-title>
-    </ion-toolbar>
-  </ion-header>
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime presentation="time" id="timeTo" minuteValues="0,5,10,15,20,25,30,35,40,45,50,55" value="{{event.timeTo}}" [(ngModel)]="event.timeTo"></ion-datetime>
+        </ng-template>
+      </ion-modal>
+    </ion-item>
+
+    <ion-item id="startDateItem">
+      <ion-label position="default"> Startdatum: </ion-label>
+      <ion-datetime-button slot="end" datetime="startDate"></ion-datetime-button>
+
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime [firstDayOfWeek]="1" presentation="date" id="startDate"
+          value="{{event.startDate}}" [(ngModel)]="event.startDate"></ion-datetime>
+        </ng-template>
+      </ion-modal>
+    </ion-item>
+
+
+    <ion-item id="endDateItem">
+      <ion-label position="default"> Enddatum: </ion-label>
+      <ion-datetime-button slot="end" datetime="endDate"></ion-datetime-button>
+
+      <ion-modal [keepContentsMounted]="true">
+        <ng-template>
+          <ion-datetime [firstDayOfWeek]="1" presentation="date" id="endDate"
+          value="{{event.endDate}}" [(ngModel)]="event.endDate"></ion-datetime>
+        </ng-template>
+      </ion-modal>
+    </ion-item>
+
+  </ion-list>
 </ion-content>
+
+<ng-template #loading>
+  <ion-skeleton-text animated style="width: 10%"></ion-skeleton-text>
+  <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+</ng-template>
diff --git a/src/app/pages/event/event-add/event-add.page.ts b/src/app/pages/event/event-add/event-add.page.ts
@@ -1,12 +1,224 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { User } from 'firebase/auth';
+import { Timestamp } from 'firebase/firestore';
+import { Observable, Subscription, catchError, concatMap, defaultIfEmpty, finalize, forkJoin, from, map, of, switchMap, take, tap } from "rxjs";
+import { Club } from 'src/app/models/club';
+import { Event } from 'src/app/models/event';
+import { Team } from 'src/app/models/team';
+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';
 
 @Component({
   selector: 'app-event-add',
   templateUrl: './event-add.page.html',
   styleUrls: ['./event-add.page.scss'],
 })
 export class EventAddPage implements OnInit {
-  constructor () {}
+  event: Event;
+  user$: Observable<User>;
+  user: User;
+  private subscription: Subscription;
+  teamList: Team[] = [];
+  clubList: Club[] = [];
 
-  ngOnInit () {}
+  constructor (
+    private readonly modalCtrl: ModalController,
+    private eventService: EventService,
+    private readonly authService: AuthService,
+    private fbService: FirebaseService,
+    public navParams: NavParams
+  ) {
+    this.event = {
+      id: "",
+      name: "",
+      description: "",
+
+      location: "",
+      streetAndNumber: "",
+      postalCode: "",
+      city: "",
+
+      date: Timestamp.fromDate(new Date()),
+
+      timeFrom: new Date().toISOString(),
+      timeTo: new Date().toISOString(),
+
+      startDate: new Date().toISOString(),
+      endDate: new Date().toISOString(),
+
+      teamId: "",
+      teamName: "",
+      liga: "",
+
+      clubId: "",
+      clubName: "",
+
+      status: true,
+      attendees: [],
+      countAttendees: 0,
+    };
+  }
+
+  ngOnInit () {
+    let  teamsList: any[] = [];
+    const teams$ = this.authService.getUser$().pipe(
+      take(1),
+      tap(user=>this.user = user),
+      switchMap(user => this.fbService.getAdminTeamRefs(user).pipe(take(1))),
+      concatMap(teamsArray =>  from(teamsArray)),
+      tap((team:Team)=>console.log(team.id)),
+      concatMap(team => 
+        this.fbService.getTeamRef(team.id).pipe(
+          take(1),
+          defaultIfEmpty({}),  // gibt null zurück, wenn kein Wert von getClubRef gesendet wird
+          map(result => [result]),
+          catchError(error => {
+            console.error('Error fetching TeamDetail:', error);
+            return of([]);
+          })
+        )
+      ),
+      tap(teamList => teamList.forEach(team => teamsList.push(team))),
+      finalize(() => console.log("Get Teams completed"))
+    );
+
+    this.subscription = forkJoin([teams$]).subscribe({
+      next: () => {
+        // console.log(">>>" + teamsList);
+        this.teamList = teamsList;
+        this.event.teamId = this.teamList[0].id;
+      },
+      error: err => console.error('Error in the observable chain:', err)
+    });
+
+    let  clubList: any[] = [];
+    const clubs$ = this.authService.getUser$().pipe(
+      take(1),
+      tap(user=>this.user = user),
+      switchMap(user => this.fbService.getAdminClubRefs(user).pipe(take(1))),
+      concatMap(clubsArray =>  from(clubsArray)),
+      tap((club:Club)=>console.log(club.id)),
+      concatMap(club => 
+        this.fbService.getClubRef(club.id).pipe(
+          take(1),
+          defaultIfEmpty({}),  // gibt null zurück, wenn kein Wert von getClubRef gesendet wird
+          map(result => [result]),
+          catchError(error => {
+            console.error('Error fetching TeamDetail:', error);
+            return of([]);
+          })
+        )
+      ),
+      tap(clubList => clubList.forEach(club => clubList.push(team))),
+      finalize(() => console.log("Get Club completed"))
+    );
+
+    this.subscription = forkJoin([clubs$]).subscribe({
+      next: () => {
+        // console.log(">>>" + teamsList);
+        this.clubList = clubList;
+        this.event.clubId = this.clubList[0].id;
+      },
+      error: err => console.error('Error in the observable chain:', err)
+    });
+
+  }
+
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+        this.subscription.unsubscribe();
+    }
+
+  }
+
+  async close() {
+    return this.modalCtrl.dismiss(null, "close");
+  }
+
+
+  async createTeamEvent() {
+    //Set Hours/Minutes of endDate to TimeFrom of training
+    console.log(`Start Date before calculation: ${this.event.startDate}`);
+    const calculatedStartDate = new Date(this.event.startDate);
+    calculatedStartDate.setHours(new Date(this.event.timeFrom).getHours());
+    calculatedStartDate.setMinutes(new Date(this.event.timeFrom).getMinutes());
+    calculatedStartDate.setSeconds(0);
+    calculatedStartDate.setMilliseconds(0);
+    this.event.startDate = calculatedStartDate.toISOString();
+    console.log(`Start Date after calculation: ${this.event.startDate}`);
+
+    console.log(`End Date before calculation: ${this.event.endDate}`);
+    const calcualtedEndDate = new Date(this.event.endDate);
+    calcualtedEndDate.setHours(new Date(this.event.timeFrom).getHours());
+    calcualtedEndDate.setMinutes(new Date(this.event.timeFrom).getMinutes());
+    calcualtedEndDate.setSeconds(0);
+    calcualtedEndDate.setMilliseconds(0);
+    this.event.endDate = calcualtedEndDate.toISOString();
+    console.log(`End Date after calculation: ${this.event.endDate}`);
+
+    const calculatedTimeFrom = new Date(this.event.timeFrom);
+    calculatedTimeFrom.setDate(new Date(this.event.startDate).getDate());
+    calculatedTimeFrom.setMonth(new Date(this.event.startDate).getMonth());
+    calculatedTimeFrom.setFullYear(new Date(this.event.startDate).getFullYear());
+    calculatedTimeFrom.setSeconds(0);
+    calculatedTimeFrom.setMilliseconds(0);
+    this.event.timeFrom = calculatedTimeFrom.toISOString();
+
+    const calculatedTimeTo = new Date(this.event.timeTo);
+    calculatedTimeTo.setDate(new Date(this.event.startDate).getDate());
+    calculatedTimeTo.setMonth(new Date(this.event.startDate).getMonth());
+    calculatedTimeTo.setFullYear(new Date(this.event.startDate).getFullYear());
+    calculatedTimeTo.setSeconds(0);
+    calculatedTimeTo.setMilliseconds(0);
+    this.event.timeTo = calculatedTimeTo.toISOString();
+
+    delete this.event.attendees;
+
+    this.eventService.setCreateTeamEvent(this.event, this.user);
+    return this.modalCtrl.dismiss({}, "confirm");
+  }
+  async createClubEvent() {
+    //Set Hours/Minutes of endDate to TimeFrom of training
+    console.log(`Start Date before calculation: ${this.event.startDate}`);
+    const calculatedStartDate = new Date(this.event.startDate);
+    calculatedStartDate.setHours(new Date(this.event.timeFrom).getHours());
+    calculatedStartDate.setMinutes(new Date(this.event.timeFrom).getMinutes());
+    calculatedStartDate.setSeconds(0);
+    calculatedStartDate.setMilliseconds(0);
+    this.event.startDate = calculatedStartDate.toISOString();
+    console.log(`Start Date after calculation: ${this.event.startDate}`);
+
+    console.log(`End Date before calculation: ${this.event.endDate}`);
+    const calcualtedEndDate = new Date(this.event.endDate);
+    calcualtedEndDate.setHours(new Date(this.event.timeFrom).getHours());
+    calcualtedEndDate.setMinutes(new Date(this.event.timeFrom).getMinutes());
+    calcualtedEndDate.setSeconds(0);
+    calcualtedEndDate.setMilliseconds(0);
+    this.event.endDate = calcualtedEndDate.toISOString();
+    console.log(`End Date after calculation: ${this.event.endDate}`);
+
+    const calculatedTimeFrom = new Date(this.event.timeFrom);
+    calculatedTimeFrom.setDate(new Date(this.event.startDate).getDate());
+    calculatedTimeFrom.setMonth(new Date(this.event.startDate).getMonth());
+    calculatedTimeFrom.setFullYear(new Date(this.event.startDate).getFullYear());
+    calculatedTimeFrom.setSeconds(0);
+    calculatedTimeFrom.setMilliseconds(0);
+    this.event.timeFrom = calculatedTimeFrom.toISOString();
+
+    const calculatedTimeTo = new Date(this.event.timeTo);
+    calculatedTimeTo.setDate(new Date(this.event.startDate).getDate());
+    calculatedTimeTo.setMonth(new Date(this.event.startDate).getMonth());
+    calculatedTimeTo.setFullYear(new Date(this.event.startDate).getFullYear());
+    calculatedTimeTo.setSeconds(0);
+    calculatedTimeTo.setMilliseconds(0);
+    this.event.timeTo = calculatedTimeTo.toISOString();
+
+    delete this.event.attendees;
+
+    this.eventService.setCreateClubEvent(this.event, this.user);
+    return this.modalCtrl.dismiss({}, "confirm");
+  }
 }