add events page to customer frontend

customer/app/src/app/components/fit-event-types/fit-event-types.component.html

@@ -0,0 +1,27 @@
+<select  [value]="value" (change)="setValue($event)" class="form-control">
+  <option *ngFor="let type of types" value="{{type.id}}">{{type.name}}</option>
+</select>
+
+<!--<ng-template #customItemTemplate let-model="item" let-index="index">-->
+<!--  <h5>{{ model.name }}</h5>-->
+<!--</ng-template>-->
+<!--<form [formGroup]="myForm">-->
+<!--  <div class="row">-->
+<!--    <div class="col-12">-->
+<!--      <div class="row">-->
+<!--        <div class="col-9">-->
+<!--          <input-->
+<!--            formControlName="state"-->
+<!--            [typeahead]="types"-->
+<!--            typeaheadOptionField="name"-->
+<!--            [typeaheadItemTemplate]="customItemTemplate"-->
+<!--            [typeaheadMinLength]="0"-->
+<!--            class="form-control">-->
+<!--        </div>-->
+<!--        <div class="col-3">-->
+<!--          <a class="btn btn-default">Edzés típus<i class="fa-toggle-down"></i></a>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</form>-->

customer/app/src/app/components/fit-event-types/fit-event-types.component.scss

@@ -0,0 +1,8 @@
+select.form-control{
+  border: 1px solid #e5ce48;
+  background-color: black;
+  color: #e5ce48;
+  option:hover{
+    background-color: #e5ce48;
+  }
+}

customer/app/src/app/components/fit-event-types/fit-event-types.component.spec.ts

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

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

@@ -0,0 +1,68 @@
+import {Component, forwardRef, OnInit} from '@angular/core';
+import {EventService, EventType} from "../../services/event.service";
+import {ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR} from "@angular/forms";
+
+const FIT_EVENT_TYPES_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => FitEventTypesComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'app-fit-event-types',
+  templateUrl: './fit-event-types.component.html',
+  styleUrls: ['./fit-event-types.component.scss'],
+  providers: [FIT_EVENT_TYPES_VALUE_ACCESSOR],
+
+})
+export class FitEventTypesComponent implements OnInit, ControlValueAccessor {
+
+  types: EventType[];
+  selected: any;
+
+  private onChange: Function;
+  private onTouched: Function;
+
+  private value: string;
+
+
+  constructor(private eventService: EventService) {
+    this.onChange = (_: any) => { };
+    this.onTouched = () => { };
+  }
+
+  ngOnInit() {
+    this.eventService.findAllEventTypes()
+      .subscribe(value => {
+          this.types = [{ id: -1, name: 'Minden Típus'}].concat( value);
+          this._setValue(this.types[0].id);
+        }
+      );
+  }
+
+  private _setValue(value) {
+    this.value = value;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+
+  setValue($event: Event) {
+    console.info($event);
+    this._setValue((<any>$event.target).value);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+  }
+
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Endpoints} from "./endpoints";
+import {Observable} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventService {
+
+  constructor(private http: HttpClient) {  }
+
+  findAllEventTypes(): Observable<EventType[]>{
+    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[]>;
+  }
+
+}
+
+export interface Trainer {
+  id: number;
+  name: string;
+}
+
+export interface Event {
+  id: number;
+  name: string;
+  start: number;
+  end: number;
+  trainer?: Trainer;
+  seatCount: number;
+  reservationCount: number;
+  eventType: EventType;
+  reservedAt: number;
+}
+
+export interface EventType {
+  id: number;
+  name: string;
+}
+
+

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

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReservationService {
+
+  constructor(private http: HttpClient) { }
+
+
+}