rschneider/fitness-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add events component

Browse Source
This commit is contained in:
Roland Schneider 2019-09-10 07:27:58 +02:00 committed by Roland Schneider
parent e5797f41a8
commit bee08c2092
6 changed files with 161 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
customer/app/src/app/_helpers/fake-backend.ts
View File

@ -10,6 +10,7 @@ import {
import {Observable, of, throwError} from 'rxjs';
import {delay, mergeMap, materialize, dematerialize} from 'rxjs/operators';
import {Event, EventType, Trainer} from "../services/event.service";
import {identifierModuleUrl} from "@angular/compiler";
;
@ -162,7 +163,7 @@ export class FakeBackendInterceptor implements HttpInterceptor {
}
if (request.url.indexOf('/events&id_event_type') && request.method === 'GET') {
if (request.url.indexOf('/events') >= 0 && request.method === 'GET') {
// check for a fake jwt token. If valid JWT token found, return the list of users, else throw error
if (request.headers.get('Authorization') === 'Bearer 0000-fake-jwt-token-0000') {
@ -177,6 +178,41 @@ export class FakeBackendInterceptor implements HttpInterceptor {
}
}
const GET_EVENT = 'event&id_event=';
if (request.url.indexOf(GET_EVENT) && request.method === 'GET') {
// check for a fake jwt token. If valid JWT token found, return the list of users, else throw error
if (request.headers.get('Authorization') === 'Bearer 0000-fake-jwt-token-0000') {
let pos = request.url.indexOf(GET_EVENT);
const length = GET_EVENT.length;
pos = pos + length;
let idEvent = request.url.substr(pos);
let event = events.find(value => value.id == +idEvent );
return of(new HttpResponse({status: 200, body: event }) );
} else {
// invalid JWT token found in request header
return throwError({
error: {
message: 'Unauthorized'
}
});
}
}
if (request.headers.get('Authorization') === 'Bearer 0000-fake-jwt-token-0000') {
if (request.url.indexOf('event/register&id_event=') && request.method === 'POST') {
return of(new HttpResponse({status: 200, body: {} }) );
}else if (request.url.indexOf('event/cancel&id_event=') && request.method === 'POST') {
return of(new HttpResponse({status: 200, body: {} }) );
}
} else {
// invalid JWT token found in request header
return throwError({
error: {
message: 'Unauthorized'
}
});
}
// Pass any other requests left (unhandled
return next.handle(request);
@ -184,7 +220,7 @@ export class FakeBackendInterceptor implements HttpInterceptor {
)
// call materialize and dematerialize to ensure delay even if an error is thrown
.pipe(materialize())
.pipe(delay(500))
.pipe(delay(100))
.pipe(dematerialize());
}

95
customer/app/src/app/pages/events/events.component.html
View File

@ -1,48 +1,87 @@
<div class="container">
<div>
<form [formGroup]="eventTypeForm">
<app-fit-event-types formControlName="eventType"></app-fit-event-types>
</form>
</div>
<ng-container *ngFor="let eventDay of eventDays">
<div *ngIf="event">
<div class="row">
<div class="col-12"><h1>{{eventDay.date | date }}</h1></div>
<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>{{event.eventType.name}}</span></div>
</div>
<ng-container *ngFor="let eventHour of eventDay.hours">
<div class="row">
<div class="col-12 col-sm-12">
<h2>{{eventHour.hour | date:'HH:mm'}}</h2>
</div>
<div class="row" *ngIf="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>{{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>{{event.start | 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>{{event.end | 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>{{event.seatCount }}</span></div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-12"><span class="title">Szabad helyek száma</span></div>
<div class="col-lg-9 col-sm-12"><span>{{event.seatCount - event.reservationCount }}</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(event)" >Lemondás</a>
<a *ngIf="!mayCancel(event) && noFreeSeat(event)" class="btn btn-info btn-di" disabled >Már nincsen szabad hely</a>
</div>
<div class="col-lg-3 text-lg-right col-sm-12 pt-2">
<a class="btn btn-primary" (click)="closeEvent(event)" >Vissza</a>
</div>
</div>
</div>
<div *ngIf="!event">
<div>
<form [formGroup]="eventTypeForm">
<app-fit-event-types formControlName="eventType"></app-fit-event-types>
</form>
</div>
<ng-container *ngFor="let eventDay of eventDays">
<div class="row">
<div class="col-12"><h1>{{eventDay.date | date }}</h1></div>
</div>
<ng-container *ngFor="let eventHour of eventDay.hours">
<div class="row">
<div class="col-12 col-sm-12">
<h2>{{eventHour.hour | date:'HH:mm'}}</h2>
</div>
</div>
<div class="event-items ">
<ng-container *ngFor="let event of eventHour.events">
<div class="event-item ">
<div class="row ">
<div class="col-lg-3 col-sm-12 " >
<ng-container *ngFor="let event of eventHour.events">
<div class="event-item ">
<div class="row ">
<div class="col-lg-3 col-sm-12 ">
<span class="pl-2">
{{event.start | date:'HH:mm' }} - {{event.end | date:'HH:mm' }}
</span>
</div>
<div class="col-lg-3 col-sm-12">
</div>
<div class="col-lg-3 col-sm-12">
<span class="pl-2">
{{event.eventType.name }} ( {{event.reservationCount}}/{{event.seatCount}}
</span>
</div>
<div class="col-lg-3 col-sm-12">
</div>
<div class="col-lg-3 col-sm-12">
<span class="pl-2">
{{event.trainer.name}}
</span>
</div>
<div class="col-lg-3 col-sm-12 text-sm-left text-lg-right">
<a (click)="open(event)" class="btn btn-primary pull-left">
<fa-icon [icon]="['fas', 'user-plus']"></fa-icon>
<span class="pl-2">Részletek</span></a>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-12 text-sm-left text-lg-right">
<a *ngIf="mayRegister(event)" class="btn btn-primary pull-left"> <fa-icon [icon]="['fas', 'user-plus']"></fa-icon><span class="pl-2">Jelentkezem</span></a>
<a *ngIf="mayCancel(event)" class="btn btn-primary pull-left"> <fa-icon [icon]="['fas', 'user-minus']"></fa-icon><span class="pl-2">Leiratkozom</span></a>
<span *ngIf="noFreeSeat(event)" > <span class="pl-2">Nincs szabad hely</span></span>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
</div>
</div>

3
customer/app/src/app/pages/events/events.component.scss
View File

@ -20,3 +20,6 @@
.event-item:hover { background: orange; cursor: pointer; }
.title{
color: #e5ce48;
}

26
customer/app/src/app/pages/events/events.component.ts
View File

@ -1,10 +1,8 @@
import {Component, OnInit} from '@angular/core';
import {Event, EventService, EventType} from "../../services/event.service";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {of, pipe} from "rxjs";
import {flatMap} from "rxjs/operators";
import {findAll} from "@angular/compiler-cli/ngcc/src/utils";
import {of, pipe, EMPTY} from "rxjs";
import {flatMap, mergeMap} from "rxjs/operators";
@Component({
selector: 'app-events',
templateUrl: './events.component.html',
@ -22,6 +20,7 @@ export class EventsComponent implements OnInit {
selectedEventType: number = null;
event: Event;
constructor(private eventService: EventService,
private formBuilder: FormBuilder,) {
@ -52,6 +51,7 @@ export class EventsComponent implements OnInit {
ngOnInit() {
this.event = null;
of(null).pipe(
flatMap(() => this.eventService.findAllEventTypes()),
flatMap(value => {
@ -144,6 +144,24 @@ export class EventsComponent implements OnInit {
}
}
open(event: Event) {
of(null).pipe(
mergeMap(() => this.eventService.findEvent(event.id) ),
mergeMap(event => {this.event = event; return of(null)} )
).subscribe();
}
closeEvent(event: Event) {
this.event = null;
}
cancel(event: Event) {
}
register(event: Event) {
}
}

20
customer/app/src/app/services/endpoints.ts
View File

@ -2,15 +2,27 @@ import {Observable} from "rxjs";
import {EventType} from "./event.service";
export class Endpoints {
private static contextPath = "/api";
private static baseUrl: string = Endpoints.contextPath + "/rest";
private static contextPath = "http://localhost/api";
private static baseUrl: string = Endpoints.contextPath + "/rest/web/index.php?r=";
public static POST_USERS_AUTHENTICATE(){
return `${this.baseUrl}/users/authenticate`;
}
public static GET_EVENTS(eventType: number){
return `${this.baseUrl}/events&id_event_type=${eventType}`;
public static GET_EVENTS( ){
return `${this.baseUrl}/events`;
}
public static GET_EVENT( id: number){
return `${this.baseUrl}/event&id_event=${id}`;
}
public static POST_EVENT_REGISTER( id: number){
return `${this.baseUrl}/event/register&id_event=${id}`;
}
public static POST_EVENT_CANCEL( id: number){
return `${this.baseUrl}/event/cancel&id_event=${id}`;
}
public static GET_EVENT_TYPES(){

17
customer/app/src/app/services/event.service.ts
View File

@ -14,8 +14,21 @@ export class EventService {
return this.http.get(Endpoints.GET_EVENT_TYPES()) as Observable<EventType[]>;
}
findEvents(idEventType?:number): Observable<Event[]> {
return this.http.get(Endpoints.GET_EVENTS(idEventType)) as Observable<Event[]>;
findEvents( ): Observable<Event[]> {
return this.http.get(Endpoints.GET_EVENTS( )) as Observable<Event[]>;
}
findEvent(idEvent: number ): Observable<Event> {
console.info(Endpoints.GET_EVENT( idEvent ));
return this.http.get(Endpoints.GET_EVENT( idEvent )) as Observable<Event>;
}
register(idEvent: number ): Observable<Event> {
return this.http.post(Endpoints.POST_EVENT_REGISTER( idEvent ),{}) as Observable<Event>;
}
cancel(idEvent: number ): Observable<Event> {
return this.http.post(Endpoints.POST_EVENT_CANCEL( idEvent ),{}) as Observable<Event>;
}
}