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

add registrations to customer gui

Browse Source
This commit is contained in:
Roland Schneider
2020-01-01 21:05:37 +01:00
committed by Roland Schneider
parent 2c5db234ce
commit 753cd46b2c
34 changed files with 473 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,13 +85,12 @@ export class FakeBackendInterceptor implements HttpInterceptor {
eventType: eventTypes[id % eventTypes.length],
reservedAt: reservedAt,
reservationCount: id % 11,
seatCount: 10
seat_count: 10
}
)
}
}
}
console.info('events.size', events.length);
// wrapping the API's in delayed observable to simulate the Server API Calls

4
customer/app/src/app/app-routing.module.ts
View File

@@ -6,6 +6,8 @@ import {ProfileComponent} from "./pages/profile/profile.component";
import {AuthGuard} from "./_guards";
import {EventsComponent} from "./pages/events/events.component";
import {EventDetailsComponent} from "./pages/event-details/event-details.component";
import {RegistrationsComponent} from "./pages/registrations/registrations.component";
import {RegistrationComponent} from "./pages/registration/registration.component";
const routes: Routes = [
{ path: 'home', component: HomeComponent },
@@ -15,6 +17,8 @@ const routes: Routes = [
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'events', component: EventsComponent, canActivate: [AuthGuard] },
{ path: 'event-details/:idEvent', component: EventDetailsComponent, canActivate: [AuthGuard] , pathMatch: 'full' },
{ path: 'registrations', component: RegistrationsComponent, canActivate: [AuthGuard] , pathMatch: 'full' },
{ path: 'registration/:idRegistration', component: RegistrationComponent, canActivate: [AuthGuard] , pathMatch: 'full' },
];
@NgModule({

4
customer/app/src/app/app.module.ts
View File

@@ -28,6 +28,8 @@ import { MonthCalendarComponent } from './components/month-calendar/month-calend
import { MonthCalendarDayComponent } from './components/month-calendar-day/month-calendar-day.component';
import { MonthCalendarEventComponent } from './components/month-calendar-event/month-calendar-event.component';
import { EventDetailsComponent } from './pages/event-details/event-details.component';
import { RegistrationsComponent } from './pages/registrations/registrations.component';
import { RegistrationComponent } from './pages/registration/registration.component';
@@ -50,6 +52,8 @@ registerLocaleData(localeHu, 'hu');
MonthCalendarDayComponent,
MonthCalendarEventComponent,
EventDetailsComponent,
RegistrationsComponent,
RegistrationComponent,
],
imports: [
BrowserModule,

1
customer/app/src/app/components/fit-event-types/fit-event-types.component.ts
View File

@@ -47,7 +47,6 @@ export class FitEventTypesComponent implements OnInit, ControlValueAccessor {
}
setValue($event: Event) {
console.info($event);
this._setValue((<any>$event.target).value);
}

19
customer/app/src/app/components/fit-navigation/fit-navigation.component.ts
View File

@@ -16,14 +16,19 @@ export class FitNavigationComponent implements OnInit {
label: 'Home',
roles: ['*']
},
// {
// route: '/profile',
// label: 'Profil',
// roles: ['@']
// },
// {
// route: '/events',
// label: 'Események',
// roles: ['@']
// },
{
route: '/profile',
label: 'Profil',
roles: ['@']
},
{
route: '/events',
label: 'Események',
route: '/registrations',
label: 'Foglalások',
roles: ['@']
},
{

2
customer/app/src/app/components/month-calendar-day/month-calendar-day.component.ts
View File

@@ -21,8 +21,6 @@ export class MonthCalendarDayComponent implements OnInit {
ngOnInit() {
if ( this.day ){
console.info(this.day);
this.oMoment = dateToMoment(this.day.date);
}
}

65
customer/app/src/app/pages/event-details/event-details.component.html
View File

@@ -1,36 +1,37 @@
<div class="container" *ngIf="event">
<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>{{event.eventType.name}}</span></div>
<h1>Jelentkezé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>{{event.eventType.name}}</span></div>
</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 * 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>{{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>{{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>{{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(event)">Lemondás</a>
<span *ngIf="!mayCancel(event) && noFreeSeat(event)">Már nincs szabad hely</span>
</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>
<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 class="col-lg-3 text-lg-right col-sm-12 pt-2">
<a class="btn btn-primary " (click)="goBack(event)">Vissza</a>
</div>
</div>
</div>

17
customer/app/src/app/pages/event-details/event-details.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {Event, EventService} from "../../services/event.service";
import {ActivatedRoute, RouterState} from "@angular/router";
import {ActivatedRoute} from "@angular/router";
import {NavigationService} from "../../services/navigation.service";
@Component({
@@ -23,11 +23,11 @@ export class EventDetailsComponent implements OnInit {
this.eventService.findEvent(idEvent).subscribe(
value => this.event = value
);
}
mayRegister(event: Event) {
return event.reservedAt == null && event.reservationCount < event.seatCount;
// return event.reservedAt == null && event.reservationCount < event.seat_count;
return true
}
mayCancel(event: Event) {
@@ -35,19 +35,24 @@ export class EventDetailsComponent implements OnInit {
}
noFreeSeat(event: Event) {
return event.reservedAt == null && event.reservationCount >= event.seatCount;
return event.reservedAt == null && event.reservationCount >= event.seat_count;
}
goBack(event: Event) {
this.navigationService.navigateToHome();
}
register(event: Event) {
console.info("register", event);
this.eventService.register(event.id)
.subscribe(
value => {},
value => {},
);
}
cancel(event: Event) {
}
}

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

@@ -18,11 +18,11 @@
</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 class="col-lg-9 col-sm-12"><span>{{event.seat_count }}</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 class="col-lg-9 col-sm-12"><span>{{event.seat_count - event.reservationCount }}</span></div>
</div>
<div class="row">
<div class="col-lg-9 col-sm-12 pt-2">

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

@@ -30,7 +30,6 @@ export class EventsComponent implements OnInit {
});
this.eventTypeForm.get('eventType').valueChanges.subscribe((params) => {
console.info('event type value change', params);
this.selectedEventType = params;
this.filterEvents();
});
@@ -38,7 +37,6 @@ export class EventsComponent implements OnInit {
}
filterEvents() {
console.info(this.events);
this.eventTypeForm.get('eventType');
this.events = this.originalEvents;
if (this.selectedEventType && this.selectedEventType > 0) {
@@ -71,7 +69,7 @@ export class EventsComponent implements OnInit {
}
mayRegister(event: Event) {
return event.reservedAt == null && event.reservationCount < event.seatCount;
return event.reservedAt == null && event.reservationCount < event.seat_count;
}
mayCancel(event: Event) {
@@ -79,7 +77,7 @@ export class EventsComponent implements OnInit {
}
noFreeSeat(event: Event) {
return event.reservedAt == null && event.reservationCount >= event.seatCount;
return event.reservedAt == null && event.reservationCount >= event.seat_count;
}
prepareEventDates(events: Event[]) {

1
customer/app/src/app/pages/home/home.component.ts
View File

@@ -23,7 +23,6 @@ export class HomeComponent implements OnInit {
}
handleEvent($event: MonthCalendarEvent) {
console.info($event);
this.navigationService.navigateToEventDetails($event.event.id);
}
}

7
customer/app/src/app/pages/registration/registration.component.html Normal file
View File

@@ -0,0 +1,7 @@
<div class="container">
<!-- <app-fit-weekday-selector [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
<ng-container *ngIf="registration | async">
{{registration | json}}
</ng-container>
</div>

0
customer/app/src/app/pages/registration/registration.component.scss Normal file
View File

25
customer/app/src/app/pages/registration/registration.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegistrationComponent } from './registration.component';
describe('RegistrationComponent', () => {
let component: RegistrationComponent;
let fixture: ComponentFixture<RegistrationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RegistrationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RegistrationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

27
customer/app/src/app/pages/registration/registration.component.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Component, OnInit } from '@angular/core';
import {EventService, Registration} from "../../services/event.service";
import {Observable} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {
registration: Observable<Registration>;
constructor(private eventService: EventService,
private route: Router,
private activeRoute: ActivatedRoute ) { }
ngOnInit() {
this.activeRoute.params.subscribe( value => {
console.info("map: ", this.activeRoute.snapshot.paramMap);
this.registration = this.eventService.findRegistration(+this.activeRoute.snapshot.paramMap.get('idRegistration'));
});
}
}

13
customer/app/src/app/pages/registrations/registrations.component.html Normal file
View File

@@ -0,0 +1,13 @@
<div class="container">
<!-- <app-fit-weekday-selector [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
<ng-container *ngIf="registrations | async">
<div class="list-group ">
<div class="list-group-item"
*ngFor="let registration of (registrations | async) "
(click)="showRegistration(registration)">
{{(registration.event.start * 1000) | date:'yyyy.MM.dd HH:mm'}} - {{registration.event.eventType.name}}
</div>
</div>
</ng-container>
</div>

0
customer/app/src/app/pages/registrations/registrations.component.scss Normal file
View File

25
customer/app/src/app/pages/registrations/registrations.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RegistrationsComponent } from './registrations.component';
describe('RegistrationsComponent', () => {
let component: RegistrationsComponent;
let fixture: ComponentFixture<RegistrationsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RegistrationsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RegistrationsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

31
customer/app/src/app/pages/registrations/registrations.component.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs";
import {EventService, Registration} from "../../services/event.service";
import {NavigationService} from "../../services/navigation.service";
import {flatMap, map, mergeMap} from "rxjs/operators";
@Component({
selector: 'app-registrations',
templateUrl: './registrations.component.html',
styleUrls: ['./registrations.component.scss']
})
export class RegistrationsComponent implements OnInit {
registrations: Observable<Registration[]>;
constructor(private eventService: EventService, private navigationService: NavigationService) { }
ngOnInit() {
this.registrations = this.eventService.findRegistrations()
.pipe( map(
(registration: Registration[]) => {
registration = registration.sort( (a, b) => a.created_at - b.created_at);
return registration;
}
) );
}
showRegistration(registration: Registration) {
this.navigationService.navigateRegistration(registration.id);
}
}

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

@@ -1,6 +1,3 @@
import {Observable} from "rxjs";
import {EventType} from "./event.service";
export class Endpoints {
private static contextPath = "http://localhost:86/fitness_web";
private static baseUrl: string = Endpoints.contextPath + "/customerapi/web/index.php?r=";
@@ -14,11 +11,20 @@ export class Endpoints {
}
public static GET_EVENT( id: number){
return `${this.baseUrl}/event&id_event=${id}`;
return `${this.baseUrl}/event/event&id_event=${id}`;
}
public static POST_EVENT_REGISTER( id: number){
return `${this.baseUrl}/event/register&id_event=${id}`;
public static POST_EVENT_REGISTRATIONS_REGISTER(id: number){
return `${this.baseUrl}/event-registration/register&id_event=${id}`;
}
public static GET_EVENT_REGISTRATIONS_FIND(){
return `${this.baseUrl}/event-registration/index`;
}
public static GET_REGISTRATION( id: number){
return `${this.baseUrl}/event-registration/registration&id_registration=${id}`;
}
public static POST_EVENT_CANCEL( id: number){

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

@@ -20,12 +20,19 @@ export class EventService {
}
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>;
return this.http.post(Endpoints.POST_EVENT_REGISTRATIONS_REGISTER( idEvent ),{}) as Observable<Event>;
}
findRegistrations(): Observable<Registration[]> {
return this.http.get(Endpoints.GET_EVENT_REGISTRATIONS_FIND()) as Observable<Registration[]>;
}
findRegistration(idRegistration: number ): Observable<Registration> {
return this.http.get(Endpoints.GET_REGISTRATION( idRegistration )) as Observable<Registration>;
}
cancel(idEvent: number ): Observable<Event> {
@@ -49,7 +56,7 @@ export interface Event {
start: number;
end: number;
trainer?: Trainer;
seatCount: number;
seat_count: number;
reservationCount: number;
eventType: EventType;
reservedAt: number;
@@ -77,3 +84,8 @@ export interface EventsAvailableResponse {
events: Event[];
}
export interface Registration {
id: number;
created_at: number;
event: Event
}

5
customer/app/src/app/services/navigation.service.ts
View File

@@ -25,4 +25,9 @@ export class NavigationService {
}
public navigateRegistration(idRegistration){
this.navigate(['/registration/'+idRegistration ])
}
}