add state

common/modules/event/manager/EventManager.php

@@ -9,7 +9,6 @@ use common\modules\event\models\timetable\TimeTableMonthWeek;
 use customerapi\models\available\EventInterval;
 use DateTime;
 use Exception;
-use Throwable;
 use yii\db\Query;
 use yii\db\StaleObjectException;
 
@@ -44,7 +43,7 @@ class EventManager
      * @return TimeTableMonth
      * @throws Exception
      */
-    public function loadTimeTable($interval)
+    public function loadTimeTable($interval , $activeOrDisplayInterval = "active" )
     {
 
         $timeTable = new TimeTableMonth();
@@ -74,8 +73,14 @@ class EventManager
             $timeTable->weeks[$weekNumber]->$weekDayName = $timeTableMonthDay;
         }
 
+        if ( $activeOrDisplayInterval == "active"){
             $dateTimeFrom = $interval->firstActiveDate;
             $dateTimeTo = (clone $interval->lastActiveDate)->modify('+1 day');
+        }else{
+            // active
+            $dateTimeFrom = $interval->firstDisplayDate;
+            $dateTimeTo = (clone $interval->lastDisplayDate)->modify('+1 day');
+        }
         // get events between active dates
 
         $events =$this->getEvents($dateTimeFrom,$dateTimeTo);

common/modules/event/models/copy/CopyWeekSearch.php

@@ -71,7 +71,6 @@ class CopyWeekSearch extends Model
         $targetDate = null;
         $this->load($params);
         if ($this->validate()) {
-
             $sourceDate =  new DateTime();
             $sourceDate->setTimestamp($this->timestampSource);
 
@@ -82,8 +81,8 @@ class CopyWeekSearch extends Model
         $this->targetInterval = EventInterval::createInterval($targetDate,7,7);
 
         $eventManager = new EventManager();
-        $this->sourceTimeTable = $eventManager->loadTimeTable($this->sourceInterval);
-        $this->targetTimeTable = $eventManager->loadTimeTable($this->targetInterval);
+        $this->sourceTimeTable = $eventManager->loadTimeTable($this->sourceInterval,"display");
+        $this->targetTimeTable = $eventManager->loadTimeTable($this->targetInterval,"display");
     }
 
     /**
@@ -104,8 +103,8 @@ class CopyWeekSearch extends Model
 
         // load the time table objects for source and target interval
         $eventManager = new EventManager();
-        $this->sourceTimeTable = $eventManager->loadTimeTable($this->sourceInterval);
-        $this->targetTimeTable = $eventManager->loadTimeTable($this->targetInterval);
+        $this->sourceTimeTable = $eventManager->loadTimeTable($this->sourceInterval,"display");
+        $this->targetTimeTable = $eventManager->loadTimeTable($this->targetInterval,"display");
 
         $sourceWeek = array_values( $this->sourceTimeTable->weeks )[0];
         $targetWeek = array_values( $this->targetTimeTable->weeks )[0];

common/modules/event/models/timetable/TimeTableSearch.php

@@ -63,7 +63,7 @@ class TimeTableSearch extends Model
         $interval = EventInterval::createInterval($today);
 
         $em = new EventManager();
-        $timeTable = $em->loadTimeTable($interval);
+        $timeTable = $em->loadTimeTable($interval,"display");
         $this->tableModel = new TimeTableModel();
         $this->tableModel->timeTableMonth = $timeTable;
 

customer/app/package-lock.json

@@ -1853,6 +1853,53 @@
       "integrity": "sha512-jWxp5LwhGoIZY/iSWMpOgjSYS0XMq7bQunxdJBWJ9y8Lysw7lofJkk1KfWjx+oWBSNoOI0E2tH82I4DL6oth4w==",
       "dev": true
     },
+    "@ngxs/devtools-plugin": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@ngxs/devtools-plugin/-/devtools-plugin-3.7.2.tgz",
+      "integrity": "sha512-kRuOx1GPXHHZZAeQMm1J1msTZxjgiAUY4NR7bzaQPn+UwSY2OgGEsd8driMM5YSTF1hOjcFHinaLCM1vmu8FmQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "@ngxs/logger-plugin": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@ngxs/logger-plugin/-/logger-plugin-3.7.2.tgz",
+      "integrity": "sha512-JGqgBUX+r/1uV0IkHMJtGyAFDrbjbUZWgmmlXCaJ4t1r+cY/TPJm5BeLtiIqdewf2ELfzOfA682mbk3EOlRymw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@ngxs/store": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@ngxs/store/-/store-3.7.2.tgz",
+      "integrity": "sha512-1cnAjHOGCovfvhjtcAWBajrMXos97Un3c8ekKoS8FIHnq3aQOzY/ePspDRNi9kTcuBJ/r/xl097JC1ssEuNbyg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

customer/app/package.json

@@ -22,6 +22,8 @@
     "@fortawesome/angular-fontawesome": "^0.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@ngxs/logger-plugin": "^3.7.2",
+    "@ngxs/store": "^3.7.2",
     "bootstrap": "^5.1.1",
     "moment": "^2.24.0",
     "ngx-bootstrap": "^5.0.0",
@@ -35,9 +37,10 @@
     "@angular/cli": "~12.2.4",
     "@angular/compiler-cli": "~12.2.4",
     "@angular/language-service": "~12.2.4",
-    "@types/node": "^12.11.1",
+    "@ngxs/devtools-plugin": "^3.7.2",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",

customer/app/src/app/app-routing.module.ts

@@ -27,6 +27,7 @@ const routes: Routes = [
     component: SecuredLayoutComponent,
     children: [
       { path: 'home', component: HomeComponent , pathMatch: 'full'},
+      { path: 'home/:idTrainer/:idEventType', component: HomeComponent , pathMatch: 'full'},
       { path: 'logout', redirectTo: '/login' , pathMatch: 'full'},
       { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]   },
       { path: 'events', component: EventsComponent, canActivate: [AuthGuard]   },

customer/app/src/app/app.module.ts

@@ -34,6 +34,11 @@ import { GuestLayoutComponent } from './layout/guest-layout/guest-layout.compone
 import { SecuredLayoutComponent } from './layout/secured-layout/secured-layout.component';
 import { PasswordChangeComponent } from './pages/password-change/password-change.component';
 import {ToastrModule} from "ngx-toastr";
+import {NgxsModule} from "@ngxs/store";
+import {environment} from "../environments/environment";
+import {AppState} from "./state/app.state";
+import {NgxsReduxDevtoolsPluginModule} from "@ngxs/devtools-plugin";
+import {NgxsLoggerPluginModule} from "@ngxs/logger-plugin";
 
 
 
@@ -74,6 +79,12 @@ registerLocaleData(localeHu, 'hu');
     FontAwesomeModule,
     BrowserAnimationsModule, // required animations module
     ToastrModule.forRoot(), // ToastrModule added
+
+    NgxsModule.forRoot([AppState], {
+      developmentMode: !environment.production
+    }),
+    NgxsReduxDevtoolsPluginModule.forRoot(),
+    NgxsLoggerPluginModule.forRoot({disabled: true})
   ],
   providers: [
     { provide: LOCALE_ID, useValue: "hu-hu" },

customer/app/src/app/app.types.ts

@@ -23,3 +23,8 @@ export const RegistrationErrors ={
   EVENT_UNAVAILABLE : 9,
   ALREADY_REGISTERED : 10,
 }
+
+export interface TimeTableFilter {
+  idEventType: number;
+  idTrainer: number;
+}

customer/app/src/app/components/month-calendar/month-calendar.component.html

@@ -1,6 +1,18 @@
-  <header>
-    <h1 class="text-center app-font-size-lg app-font-family-secondary mt-5 ">Naptár</h1>
-  </header>
+
+<div class="row mb-3">
+  <div class="col-12">
+    <form [formGroup]="formTimeTable">
+      <select  class="form-select mt-3" id="trainers" formControlName="idTrainer">
+        <option [value]="-1">{{"Minden edző"}}</option>
+        <option *ngFor="let trainer of trainers" [value]="trainer.id">{{trainer.name}}</option>
+      </select>
+      <select  class="form-select mt-3" id="eventTypes" formControlName="idEventType">
+        <option [value]="-1">{{"Minden edzés típus"}}</option>
+        <option *ngFor="let eventType of eventTypes" [value]="eventType.id">{{eventType.name}}</option>
+      </select>
+    </form>
+  </div>
+</div>
 <div class="row  text-white gx-2 d-none d-md-flex ">
   <div *ngFor="let dayOfWeek of daysOfWeek;  let i = index" class="col mb-2">
     <div class="border text-center py-1 px-2 text-light"
@@ -13,8 +25,9 @@
   </div> <!--  text-center name-of-day-of-week bg-primary-->
 </div>
 <div *ngIf="eventsAvailableResponse" class="row   mb-4 gx-2">
-    <ng-container *ngFor="let day of eventsAvailableResponse.dates;  let i = index">
-      <div app-month-calendar-day  class="col-12 col-md mb-2 d-md-block"  [class.d-none]="!day.active"  [day]="day" (onEvent)="handleEvent($event)"  ></div>
+  <ng-container *ngFor="let day of daysToDisplay;  let i = index">
+    <div app-month-calendar-day class="col-12 col-md mb-2 d-md-block" [class.d-none]="!day.active" [day]="day"
+         (onEvent)="handleEvent($event)"></div>
     <div *ngIf="i > 0 && ( ((i+1) % 7) == 0)" class="w-100"></div>
   </ng-container>
 </div>

customer/app/src/app/components/month-calendar/month-calendar.component.ts

@@ -1,63 +1,139 @@
 import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
-import {Event, EventsAvailableResponse} from "../../services/event.service";
+import {DayToDisplay, Event, EventsAvailableResponse, EventType, Trainer} from "../../services/event.service";
 import * as moment from "moment";
+import {FormControl, FormGroup} from "@angular/forms";
+import {TimeTableFilter} from "../../app.types";
 
 @Component({
   selector: 'app-month-calendar',
   templateUrl: './month-calendar.component.html',
   styleUrls: ['./month-calendar.component.scss']
 })
-export class MonthCalendarComponent implements OnInit, OnChanges {
+export class MonthCalendarComponent implements OnInit  {
 
   minDate: number;
   maxDate: number;
+  // daysOfWeekAll: DayOfWeek[];
   daysOfWeek: DayOfWeek[];
-  days: Day[];
+  trainers: Trainer[] = [];
+  eventTypes: EventType[] = [];
 
-  @Input()
-  eventsAvailableResponse: EventsAvailableResponse;
+  formTimeTable: FormGroup = new FormGroup(
+    {
+      "idTrainer": new FormControl("-1",),
+      "idEventType": new FormControl("-1",),
+    }
+  )
+
+  _eventsAvailableResponse: EventsAvailableResponse;
+
+  _timeTableFilter: TimeTableFilter;
 
   @Output()
   onEvent: EventEmitter<MonthCalendarEvent> = new EventEmitter<MonthCalendarEvent>();
 
+  @Output()
+  filterChanged: EventEmitter<TimeTableFilter> = new EventEmitter<TimeTableFilter>();
+
+  daysToDisplay: DayToDisplay[] = [];
+
+  initialized: boolean = false;
+
   constructor() {
+    this.formTimeTable.valueChanges.subscribe(value => {
+      if ( this.initialized ){
+        this.filterChanged.emit(value);
+      }else{
+        this.initialized = true;
+      }
+    })
   }
 
   ngOnInit() {
+    this.initialized = false ;
+    console.info("init", this.timeTableFilter);
     moment.locale('hu');
-    this.fillDaysOfWeek();
-
+    this.formTimeTable.patchValue({
+      "idTrainer": this._timeTableFilter.idTrainer,
+      "idEventType": this._timeTableFilter.idEventType
+    });
+    this.loadData();
   }
 
+  @Input()
+  set timeTableFilter(timeTableFilter: TimeTableFilter){
+    this._timeTableFilter = timeTableFilter;
+    this.loadData();
+  }
 
-  fillDaysOfWeek() {
+  get timeTableFilter(){
+    return this._timeTableFilter;
+  }
+
+  @Input()
+  set eventsAvailableResponse(eventsAvailableResponse: EventsAvailableResponse){
+    this._eventsAvailableResponse = eventsAvailableResponse;
+    this.loadData();
+  }
+
+  get eventsAvailableResponse(){
+    return this._eventsAvailableResponse;
+  }
+
+  composeDayOfWeeks() {
     this.daysOfWeek = [];
     if (this.eventsAvailableResponse) {
       for (let i = 0; i < this.eventsAvailableResponse.dates.length && i < 7; i++) {
         const date = moment.unix(this.eventsAvailableResponse.dates[i].date);
-        const dayOfWeek = {
-          name: date.format("dddd"),
-          shortName: date.format("ddd"),
-        };
+        const dayOfWeek = this.momentDateToWeekdayName(date);
         this.daysOfWeek.push(dayOfWeek);
       }
     } else {
       let startOfWeek = moment().startOf("week");
       for (let i = 0; i < 7; i++) {
         let momWeekDay = startOfWeek.clone().add(i, 'd');
-        const dayOfWeek = {
-          name: momWeekDay.format("dddd"),
-          shortName: momWeekDay.format("ddd"),
-        };
+        const dayOfWeek = this.momentDateToWeekdayName(momWeekDay);
         this.daysOfWeek.push(dayOfWeek);
       }
     }
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('eventsAvailableResponse')) {
-      this.fillDaysOfWeek();
+  private momentDateToWeekdayName(date: moment.Moment): DayOfWeek {
+    return {
+      name: date.format("dddd"),
+      shortName: date.format("ddd"),
+    };
   }
+
+  private filterValue(filter: number, valueGetter: () => number) {
+    if (filter == null || filter == -1) {
+      return true;
+    }
+    return valueGetter() == filter;
+  }
+
+  private filterDaysOfWeek(days: DayToDisplay[]): DayToDisplay[] {
+    const filteredDays: DayToDisplay[] = JSON.parse(JSON.stringify(days));
+
+    filteredDays.forEach(day => {
+      day.events = day.events.filter(value => {
+        const trainerMatch = this.filterValue(this.timeTableFilter?.idTrainer, () => value.trainer.id);
+        const eventTypeMatch = this.filterValue(this.timeTableFilter?.idEventType, () => value.eventType.id);
+        return trainerMatch && eventTypeMatch;
+      })
+    })
+
+    return filteredDays;
+  }
+
+  private loadData(){
+    if ( !this._eventsAvailableResponse ){
+      return ;
+    }
+    this.composeDayOfWeeks();
+    this.trainers = this.eventsAvailableResponse.trainers;
+    this.eventTypes = this.eventsAvailableResponse.eventTypes;
+    this.daysToDisplay = this.filterDaysOfWeek(this.eventsAvailableResponse.dates)
   }
 
   handleEvent($event) {

customer/app/src/app/pages/event-details/event-details.component.html

@@ -32,14 +32,14 @@
   </div>
   <div class="row">
     <div class=" col-lg-6  col-sm-12 pt-2">
-      <a *ngIf="mayRegister(event)" class="btn btn-primary me-3 d-none d-lg-inline-block" (click)="register(event)">Foglalás</a>
-      <a *ngIf="mayRegister(event)" class="btn btn-primary me-3 d-lg-none w-100" (click)="register(event)">Foglalás</a>
+      <a *ngIf="mayRegister(event)" class="btn btn-primary me-3 d-none d-lg-inline-block" (click)="register(event)">Jelentkezek az edzésre</a>
+      <a *ngIf="mayRegister(event)" class="btn btn-primary me-3 d-lg-none w-100" (click)="register(event)">Jelentkezek az edzésre</a>
       <a *ngIf="mayCancel(event)" class="btn btn-primary me-3 d-none d-lg-inline-block" (click)="cancel(event)">Lemondás</a>
       <a *ngIf="mayCancel(event)" class="btn btn-primary me-3 d-lg-none w-100" (click)="cancel(event)">Lemondás</a>
       <span class="warning me-3"
             *ngIf="!event.hasFreeSeats && event.registrations.length == 0">Már nincs szabad hely</span>
-      <a class="btn btn-dark me-3 d-none d-lg-inline-block" (click)="goBack(event)">Vissza</a>
-      <a class="btn btn-dark me-3 d-lg-none w-100 mt-3" (click)="goBack(event)">Vissza</a>
+      <a class="btn btn-dark me-3 d-none d-lg-inline-block" (click)="goBack()">Vissza</a>
+      <a class="btn btn-dark me-3 d-lg-none w-100 mt-3" (click)="goBack()">Vissza</a>
     </div>
   </div>
 </ng-container>

customer/app/src/app/pages/event-details/event-details.component.ts

@@ -4,7 +4,11 @@ import {ActivatedRoute} from "@angular/router";
 import {NavigationService} from "../../services/navigation.service";
 import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {ToastrService} from "ngx-toastr";
-import {RegistrationErrors} from "../../app.types";
+import {RegistrationErrors, TimeTableFilter} from "../../app.types";
+import {Select} from "@ngxs/store";
+import {AppState} from "../../state/app.state";
+import {Observable} from "rxjs";
+import {first} from "rxjs/operators";
 
 @Component({
   selector: 'app-event-details',
@@ -13,6 +17,8 @@ import {RegistrationErrors} from "../../app.types";
 })
 export class EventDetailsComponent implements OnInit {
 
+  @Select(AppState.getFilterTimeTable) timeTableFilter: Observable<TimeTableFilter>;
+
   event: Event;
 
   eventForm: FormGroup;
@@ -50,8 +56,12 @@ export class EventDetailsComponent implements OnInit {
     return event.registrations.length > 0;
   }
 
-  goBack(event: Event) {
-    this.navigationService.navigateToHome();
+  goBack() {
+    this.timeTableFilter.pipe(first()).subscribe(
+      value => {
+        this.navigationService.navigateToHome(value.idTrainer,value.idEventType);
+      }
+    )
   }
 
   register(event: Event) {
@@ -66,7 +76,7 @@ export class EventDetailsComponent implements OnInit {
         value => {
           this.toastr.success('Sikeresen Foglalás', 'Foglalás');
 
-          this.navigationService.navigateToHome()
+          this.goBack();
         },
         error => {
           let status = error.status;
@@ -96,11 +106,12 @@ export class EventDetailsComponent implements OnInit {
     this.eventService.cancelRegistration(event.registrations[0].id)
       .subscribe(
         () => {
-          this.navigationService.navigateToHome();
+         this.goBack();
         },
         () => {
           this.toastr.error("Hiba történt", "Lemondás")
         });
   }
+
 }
 

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

@@ -1,7 +1,12 @@
 <!--  <app-fit-weekday-selector  [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
+<header>
+  <h1 class="text-center app-font-size-lg app-font-family-secondary mt-5 ">Naptár</h1>
+</header>
   <ng-container *ngIf="availableEvents | async">
     <app-month-calendar
       (onEvent)="handleEvent($event)"
+      (filterChanged)="filterChanged($event)"
+      [timeTableFilter]="timeTableFilter"
       [eventsAvailableResponse]="availableEvents | async "></app-month-calendar>
   </ng-container>
 

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

@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import {EventsAvailableResponse, EventService} from "../../services/event.service";
-import {forkJoin, Observable} from "rxjs";
+import { Observable} from "rxjs";
 import {MonthCalendarEvent} from "../../components/month-calendar/month-calendar.component";
 import {NavigationService} from "../../services/navigation.service";
+import {TimeTableFilter} from "../../app.types";
+import {ActivatedRoute} from "@angular/router";
+import {Store} from "@ngxs/store";
+import {FilterTimeTableAction} from "../../state/app.actions";
 
 @Component({
   selector: 'app-home',
@@ -12,17 +16,31 @@ import {NavigationService} from "../../services/navigation.service";
 export class HomeComponent implements OnInit {
 
   availableEvents: Observable<EventsAvailableResponse>;
+  timeTableFilter: TimeTableFilter;
 
   constructor(private eventService: EventService,
-              private navigationService: NavigationService) { }
-
+              private navigationService: NavigationService,
+              private route: ActivatedRoute,
+              private store: Store ) {
+  }
 
   ngOnInit() {
     this.availableEvents = this.eventService.findEventsAvailable();
-
+    this.route.params.subscribe(params => {
+      this.timeTableFilter = {
+        idTrainer: params.idTrainer || -1,
+        idEventType: params.idEventType || -1
+      }
+      this.store.dispatch(new FilterTimeTableAction(this.timeTableFilter.idTrainer,this.timeTableFilter.idEventType))
+    });
   }
 
   handleEvent($event: MonthCalendarEvent) {
     this.navigationService.navigateToEventDetails($event.event.id);
   }
+
+  filterChanged($event: TimeTableFilter) {
+    this.navigationService.navigateToHome($event.idTrainer,$event.idEventType);
+  }
+
 }

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

@@ -99,6 +99,8 @@ export interface DayToDisplay {
 export interface EventsAvailableResponse {
   dates: DayToDisplay[];
   events: Event[];
+  trainers: Trainer[];
+  eventTypes: EventType[];
 }
 
 export interface Registration {

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

@@ -16,8 +16,8 @@ export class NavigationService {
     this.navigate(['/event-details/'+idEvent ])
   }
 
-  public navigateToHome(){
-    this.navigate(['/home' ])
+  public navigateToHome(idTrainer: number = -1,idEventType : number = -1){
+    this.navigate(['/home',{idTrainer: idTrainer, idEventType: idEventType} ]);
   }
 
   public navigateToLogin(){

customer/app/src/app/state/app.actions.ts

@@ -0,0 +1,8 @@
+
+
+export class FilterTimeTableAction {
+  // For debug / console output upon dev environment
+  static readonly type = "[App] FilterTimeTableAction";
+  constructor(public idTrainer: number, public idEventType: number) {}
+}
+

customer/app/src/app/state/app.state.ts

@@ -0,0 +1,45 @@
+import {Action, Selector, State, StateContext, Store} from "@ngxs/store";
+import {Injectable} from "@angular/core";
+import {
+  FilterTimeTableAction,
+} from "./app.actions";
+import {TimeTableFilter} from "../app.types";
+
+
+export interface AppStateModel {
+  filterTimeTable: FilterTimeTableAction;
+}
+
+@Injectable()
+@State<AppStateModel>({
+  name: "app",
+  defaults: {
+    filterTimeTable: {
+      idTrainer: -1,
+      idEventType: -1
+    },
+  },
+})
+export class AppState {
+
+
+  constructor(
+  ) {
+  }
+
+  @Selector()
+  public static getFilterTimeTable(state: AppStateModel): TimeTableFilter {
+    return state.filterTimeTable;
+  }
+
+  @Action(FilterTimeTableAction)
+  dispatchFilterTimeTable(ctx: StateContext<AppStateModel>, {idEventType, idTrainer}: FilterTimeTableAction): void {
+    ctx.patchState({
+      filterTimeTable: {
+        idEventType: idEventType,
+        idTrainer: idTrainer
+      }
+    });
+  }
+
+}

customerapi/controllers/EventController.php

@@ -11,6 +11,7 @@ namespace customerapi\controllers;
 
 use common\models\Event;
 use common\models\EventRegistration;
+use common\models\EventType;
 use customerapi\manager\EventRegistrationManager;
 use customerapi\models\available\EventInterval;
 use customerapi\models\available\EventAvailable;
@@ -94,10 +95,15 @@ class EventController extends CustomerApiController
             }
         }
 
+        $eventTypes = EventTypeDetailsView::find()->all();
+        $trainers = TrainerDetailsView::find()->all();
+
         return
             $this->asJson([
                 'interval' => $interval,
-                'dates' => $dates
+                'dates' => $dates,
+                'trainers' => $trainers,
+                'eventTypes' => $eventTypes
             ]);
     }
 
@@ -158,4 +164,5 @@ class EventController extends CustomerApiController
         }
     }
 
+
 }