prepare customer registration cancel

customer/app/src/app/pages/registration/registration.component.html

@@ -1,7 +1,41 @@
 <div class="container">
-  <!--  <app-fit-weekday-selector  [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
-  <ng-container *ngIf="registration | async">
-    {{registration | json}}
+  <ng-container *ngIf="registration  ">
+      <h1>Foglalás</h1>
+      <div class="row">
+        <div class="col-lg-3 col-sm-12"><span class="title">Edzés típusa</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event.eventType.name}}</span></div>
+      </div>
+      <div class="row" *ngIf="registration.event.trainer">
+        <div class="col-lg-3 col-sm-12"><span class="title">Edző</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event?.trainer?.name}}</span></div>
+      </div>
+      <div class="row">
+        <div class="col-lg-3 col-sm-12"><span class="title">Edzés kezdési időpontja</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event.start * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
+      </div>
+      <div class="row">
+        <div class="col-lg-3 col-sm-12"><span class="title">Edzés vége</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event.end * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
+      </div>
+      <div class="row">
+        <div class="col-lg-3 col-sm-12"><span class="title">Férőhelyek száma</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event.seat_count }}</span></div>
+      </div>
+      <div class="row">
+        <div class="col-lg-3 col-sm-12"><span class="title">Terem</span></div>
+        <div class="col-lg-9 col-sm-12"><span>{{registration.event?.room?.name }}</span></div>
+      </div>
+      <div class="row">
+        <div class="col-lg-9  col-sm-12 pt-2">
+<!--          <a *ngIf="mayRegister(event)" class="btn btn-primary " (click)="register(event)">Foglalás</a>-->
+          <a *ngIf="mayCancel(event)" class="btn btn-primary" (click)="cancel(registration)">Lemondás</a>
+<!--          <span *ngIf="!mayCancel(event) && noFreeSeat(event)">Már nincs szabad hely</span>-->
+        </div>
+        <div class="col-lg-3 text-lg-right col-sm-12 pt-2">
+<!--          <a class="btn btn-primary " (click)="goBack(event)">Vissza</a>-->
+        </div>
+      </div>
+
   </ng-container>
 </div>
 

customer/app/src/app/pages/registration/registration.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {EventService, Registration} from "../../services/event.service";
 import {Observable} from "rxjs";
 import {ActivatedRoute, Router} from "@angular/router";
+import {tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-registration',
@@ -10,7 +11,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 })
 export class RegistrationComponent implements OnInit {
 
-  registration: Observable<Registration>;
+  registration: Registration;
 
   constructor(private eventService: EventService,
               private route: Router,
@@ -19,9 +20,34 @@ export class RegistrationComponent implements OnInit {
   ngOnInit() {
     this.activeRoute.params.subscribe( value => {
       console.info("map: ", this.activeRoute.snapshot.paramMap);
-     this.registration =  this.eventService.findRegistration(+this.activeRoute.snapshot.paramMap.get('idRegistration'));
+     let registration =  this.eventService.findRegistration(+this.activeRoute.snapshot.paramMap.get('idRegistration'));
+      registration =     registration.pipe(
+        tap(x => {
+          console.info("reg",x);
+        })
+      );
+
+      registration.subscribe(
+        value1 => {
+          this.registration = value1;
+        }
+      )
 
     });
   }
 
+  cancel(registration: Registration) {
+    this.eventService.cancelRegistration(registration.id).subscribe(
+      value => {
+        this.route.navigate(['registrations']);
+      },
+      error => {
+        alert('Hiba történt!');
+      }
+    )
+  }
+
+  mayCancel(registration: Registration) {
+    return true;
+  }
 }

customer/app/src/app/services/endpoints.ts

@@ -31,6 +31,10 @@ export class Endpoints {
     return `${this.baseUrl}/event/cancel&id_event=${id}`;
   }
 
+  public static POST_EVENT_REGISTRATION_CANCEL( id: number){
+    return `${this.baseUrl}/event-registration/cancel&idRegistration=${id}`;
+  }
+
   public static GET_EVENT_TYPES(){
     return `${this.baseUrl}/event-type`;
   }

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

@@ -39,6 +39,10 @@ export class EventService {
     return this.http.post(Endpoints.POST_EVENT_CANCEL( idEvent  ),{}) as Observable<Event>;
   }
 
+  cancelRegistration(idRegistration: number ): Observable<Event> {
+    return this.http.post(Endpoints.POST_EVENT_REGISTRATION_CANCEL( idRegistration  ),{}) as Observable<Event>;
+  }
+
   findEventsAvailable(): Observable<EventsAvailableResponse>{
     return this.http.get(Endpoints.GET_EVENTS_AVAILABLE()) as Observable<EventsAvailableResponse>;
   }