improve customer api & gui

customer/app/src/app/_helpers/fake-backend.ts

@@ -47,11 +47,13 @@ export class FakeBackendInterceptor implements HttpInterceptor {
     let eventTypes: EventType[] = [
       {
         id: 1,
-        name: 'Típus 1'
+        name: 'Típus 1',
+        theme: '0'
       },
       {
         id: 2,
-        name: 'Típus 2'
+        name: 'Típus 2',
+        theme: '0'
       }
     ];
 

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

@@ -39,6 +39,7 @@ import {environment} from "../environments/environment";
 import {AppState} from "./state/app.state";
 import {NgxsReduxDevtoolsPluginModule} from "@ngxs/devtools-plugin";
 import {NgxsLoggerPluginModule} from "@ngxs/logger-plugin";
+import { EventDatePipe } from './pipes/event-time.pipe';
 
 
 
@@ -66,6 +67,7 @@ registerLocaleData(localeHu, 'hu');
     GuestLayoutComponent,
     SecuredLayoutComponent,
     PasswordChangeComponent,
+    EventDatePipe,
   ],
   imports: [
 

customer/app/src/app/app.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import * as moment from "moment";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppService {
+
+  constructor() { }
+
+  formatDateTime(datetime: number, date:boolean, time: boolean) {
+    let format ;
+    if ( date && time ){
+      format = 'YYYY.MM.DD HH:mm';
+    } else if (date){
+      format = 'YYYY.MM.DD';
+    } else  {
+      format = 'HH:mm';
+    }
+    return this.dateToMoment(datetime).utc().format(format);
+  }
+
+  dateToMoment(date: number) {
+    return moment.unix(date);
+  }
+}

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

@@ -1,6 +1,6 @@
 import {Component, forwardRef, OnInit} from '@angular/core';
 import {EventService, EventType} from "../../services/event.service";
-import {ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR} from "@angular/forms";
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
 
 const FIT_EVENT_TYPES_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -22,10 +22,8 @@ export class FitEventTypesComponent implements OnInit, ControlValueAccessor {
 
   private onChange: Function;
   private onTouched: Function;
-
   public value: string;
 
-
   constructor(private eventService: EventService) {
     this.onChange = (_: any) => { };
     this.onTouched = () => { };
@@ -34,7 +32,7 @@ export class FitEventTypesComponent implements OnInit, ControlValueAccessor {
   ngOnInit() {
     this.eventService.findAllEventTypes()
       .subscribe(value => {
-          this.types = [{ id: -1, name: 'Minden Típus'}].concat( value);
+          this.types = [{ id: -1, name: 'Minden Típus', theme: '' }].concat( value);
           this._setValue(this.types[0].id);
         }
       );

customer/app/src/app/components/fit-navigation/fit-navigation.component.html

@@ -6,7 +6,8 @@
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" [collapse]="isCollapsed" >
+  <div class="collapse navbar-collapse justify-content-end d-lg-flex"
+       [collapse]="isCollapsed" >
     <ul class="navbar-nav ml-auto">
       <ng-container *ngFor="let item of items" >
         <li *ngIf="isVisible(item)" class="nav-item "  [routerLinkActive]="'active'">

customer/app/src/app/components/fit-navigation/fit-navigation.component.ts

@@ -13,7 +13,7 @@ export class FitNavigationComponent implements OnInit {
   items: MenuItem[] = [
     {
       route: '/home',
-      label: 'Home',
+      label: 'Órarend',
       roles: ['*']
     },
     // {

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

@@ -1,22 +1,22 @@
 <div
   (click)="selectEvent()"
-  class="event d-flex flex-direction-row py-1 px-1 mb-2 border-radius-1 small text-white "
+  class="event d-flex flex-direction-row py-1 px-1 mb-2 border-radius-1 small text-white {{getEventThemeClass()}}"
   title="Test Event 2"
-  [class.bg-dark]="maySelect()"
-  [class.bg-primary]="isRegistered()"
-  [class.bg-secondary]="isDisabled()"
 >
+<!--  [class.bg-dark]="maySelect()"-->
+<!--  [class.bg-primary]="isRegistered()"-->
+<!--  [class.bg-secondary]="isDisabled()"-->
 
   <div class=" event-bar-container flex-grow-0 flex-shrink-0 d-flex" style="flex-basis: 10px;">
-    <div class="event-bar flex-grow-1 flex-shrink-1 my-1 border-radius-1 " style=" background-color: var(--bs-blue)"></div>
+    <div class="event-bar flex-grow-1 flex-shrink-1 my-1 border-radius-1 bg-white" ></div>
   </div>
 
   <div class="event-info-container flex-grow-1 flex-shrink-1 "  style="flex-basis: 0;"  >
     <div class="event-info ms-1" style="white-space: pre-wrap">
-      <div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
+      <div class="app-font-size-sm app-font-weight-normal ">{{event.start | eventDate:'time' }}</div>
       <div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
       <ng-container *ngIf="hasTrainer()">
-        <div class="app-font-size-sm app-font-weight-normal " style="max-width: 100%; word-break: break-word">{{formatTrainer()}} very long name</div>
+        <div class="app-font-size-sm app-font-weight-normal " style="max-width: 100%; word-break: break-word">{{formatTrainer()}}</div>
       </ng-container>
     </div>
   </div>

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

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Event} from "../../services/event.service";
-import {dateToMoment, MonthCalendarEvent} from "../month-calendar/month-calendar.component";
+import { MonthCalendarEvent} from "../month-calendar/month-calendar.component";
 
 @Component({
   selector: 'app-month-calendar-event',
@@ -21,10 +21,6 @@ export class MonthCalendarEventComponent implements OnInit {
   ngOnInit() {
   }
 
-  formatTime() {
-    return dateToMoment(this.event.start).utc().format('HH:mm');
-  }
-
   hasTrainer() {
     return !!this.event.trainer;
   }
@@ -42,7 +38,7 @@ export class MonthCalendarEventComponent implements OnInit {
   }
 
   maySelect() {
-    return this.event.registrations?.length == 0 && this.event.hasFreeSeats;
+    return  this.isRegistered() ? true :  this.event.hasFreeSeats;
   }
 
   isRegistered() {
@@ -50,6 +46,30 @@ export class MonthCalendarEventComponent implements OnInit {
   }
 
   isDisabled() {
-    return false;
+    return !this.isRegistered()  && !this.event.hasFreeSeats;
+  }
+
+  getEventThemeClass(): string {
+
+    const theme = this.event?.eventType?.theme;
+    let styleClass = "bg-dark";
+    if (this.isDisabled()) {
+      styleClass = "bg-secondary";
+    } else {
+      if (theme != null && theme.length > 0) {
+        if (this.isRegistered()) {
+          styleClass += " event-theme-active-" + theme;
+        } else {
+          styleClass += " event-theme-normal-" + theme;
+        }
+      } else {
+        if (this.isRegistered()) {
+          styleClass += " bg-primary";
+        } else {
+          styleClass += " bg-dark";
+        }
+      }
+    }
+    return styleClass;
   }
 }

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

@@ -15,11 +15,11 @@
     </div>
     <div class="row">
       <div class="col-lg-3 col-12 app-font-weight-bold"><span class="title">Edzés kezdési időpontja</span></div>
-      <div class="col-lg-6 col-12"><span>{{event.start * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
+      <div class="col-lg-6 col-12"><span>{{event.start | eventDate:'datetime'}}</span></div>
     </div>
     <div class="row">
       <div class="col-lg-3 col-12 app-font-weight-bold"><span class="title">Edzés vége</span></div>
-      <div class="col-lg-6 col-12"><span>{{event.end * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
+      <div class="col-lg-6 col-12"><span>{{event.end | eventDate: 'datetime'}}</span></div>
     </div>
     <div class="row">
       <div class="col-lg-3 col-12 app-font-weight-bold"><span class="title">Férőhelyek száma</span></div>

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

@@ -41,8 +41,8 @@ export class EventDetailsComponent implements OnInit {
   ngOnInit() {
     let idEvent = +this.route.snapshot.paramMap.get('idEvent');
     this.eventService.findEvent(idEvent).subscribe(
-      value => {
-        this.event = value;
+      event => {
+        this.event = event;
         this.eventForm.patchValue({"idEvent": this.event.id})
       }
     );
@@ -74,7 +74,7 @@ export class EventDetailsComponent implements OnInit {
     this.eventService.register(request)
       .subscribe(
         value => {
-          this.toastr.success('Sikeresen Foglalás', 'Foglalás');
+          this.toastr.success('Sikeres Foglalás', 'Foglalás');
 
           this.goBack();
         },
@@ -106,6 +106,7 @@ export class EventDetailsComponent implements OnInit {
     this.eventService.cancelRegistration(event.registrations[0].id)
       .subscribe(
         () => {
+          this.toastr.success("Sikeres lemondás", "Lemondás")
          this.goBack();
         },
         () => {

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

@@ -25,6 +25,18 @@
         <div class="col-lg-3 col-sm-12 app-font-weight-bold"><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-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció időpontja</span></div>
+      <div class="col-lg-9 col-sm-12"><span>{{registration.created_at | eventDate:'datetime' }}</span></div>
+    </div>
+    <div class="row" *ngIf="registrationService.isCanceled(registration)">
+      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció lemondásának időpontja</span></div>
+      <div class="col-lg-9 col-sm-12"><span>{{registration.canceled_at | eventDate:'datetime' }}</span></div>
+    </div>
+    <div class="row" *ngIf="registrationService.isDeleted(registration)">
+      <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Regisztráció törlésének időpontja</span></div>
+      <div class="col-lg-9 col-sm-12"><span>{{registration.deleted_at | eventDate:'datetime' }}</span></div>
+    </div>
     <div class="row">
       <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Státusz</span></div>
       <div class="col-lg-9 col-sm-12">

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

@@ -1,16 +1,28 @@
 <!--  <app-fit-weekday-selector  [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
 <ng-container *ngIf="registrations | async">
-  <div class="row  text-white mb-2 mx-1 align-middle" *ngFor="let registration of (registrations | async); let i = index; "
-       (click)="showRegistration(registration)"
-       [class.mt-2]="i == 0"
-  >
-    <div class="col-12 col-md-9 bg-dark d-flex d-flex align-items-center py-2 "   >
-      {{(registration.event.start * 1000)   | date:'yyyy.MM.dd HH:mm'}}  - {{registration.event.eventType.name}}
-      - {{registration.event.trainer.name}}
-    </div>
-      <div class="col-3 bg-dark  py-2 d-none d-md-block text-end"  >
+  <ng-container *ngIf="!(registrations | async)?.length">
+    Jelenleg nincsen aktív foglalása
+  </ng-container>
+  <ng-container *ngIf="(registrations | async)?.length">
+    <div class="row  text-white mb-2 mx-1 align-middle"
+         *ngFor="let registration of (registrations | async); let i = index; "
+         (click)="showRegistration(registration)"
+         [class.mt-2]="i == 0"
+    >
+      <div class="col-12 col-md-9 bg-dark d-lg-flex  align-items-lg-center py-2 ">
+        <fa-icon [classes]="['text-success','me-2']" *ngIf="registrationService.isActive(registration)"
+                 [icon]="faCalendarCheck"></fa-icon>
+        <fa-icon [classes]="['text-warning','me-2']" *ngIf="registrationService.isCanceled(registration)"
+                 [icon]="faCalendarMinus"></fa-icon>
+        <fa-icon [classes]="['text-danger','me-2']" *ngIf="registrationService.isDeleted(registration)"
+                 [icon]="faCalendarTimes"></fa-icon>
+        {{ registration.event.start  | eventDate: 'datetime' }}  - {{registration.event.eventType.name}}
+        - {{registration.event.trainer.name}}
+      </div>
+      <div class="col-3 bg-dark  py-2 d-none d-md-block text-end">
         <a class="btn btn-primary float-right">Részletek</a>
       </div>
     </div>
+  </ng-container>
 </ng-container>
 

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

@@ -3,6 +3,9 @@ import {Observable} from "rxjs";
 import {EventService, Registration} from "../../services/event.service";
 import {NavigationService} from "../../services/navigation.service";
 import {flatMap, map, mergeMap} from "rxjs/operators";
+import {RegistrationService} from "../../services/reservation.service";
+import { faCalendarCheck, faCalendarMinus, faCalendarTimes } from '@fortawesome/free-solid-svg-icons';
+
 
 @Component({
   selector: 'app-registrations',
@@ -10,9 +13,14 @@ import {flatMap, map, mergeMap} from "rxjs/operators";
   styleUrls: ['./registrations.component.scss']
 })
 export class RegistrationsComponent implements OnInit {
+  faCalendarCheck = faCalendarCheck;
+  faCalendarMinus = faCalendarMinus;
+  faCalendarTimes = faCalendarTimes;
 
   registrations: Observable<Registration[]>;
-  constructor(private eventService: EventService, private navigationService: NavigationService) { }
+  constructor(private eventService: EventService,
+              private navigationService: NavigationService,
+              public registrationService: RegistrationService) { }
 
   ngOnInit() {
     this.registrations = this.eventService.findRegistrations()

customer/app/src/app/pipes/event-time.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {AppService} from "../app.service";
+
+@Pipe({
+  name: 'eventDate'
+})
+export class EventDatePipe implements PipeTransform {
+
+  constructor(private appService: AppService) {
+
+  }
+
+  transform(unixtime: number, format: 'date' | 'time' | 'datetime' ): unknown {
+    const date = format == 'date' || format == 'datetime';
+    const time = format == 'time' || format == 'datetime';
+    return this.appService.formatDateTime(unixtime,date,time);
+  }
+
+}

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

@@ -88,6 +88,7 @@ export interface Room {
 export interface EventType {
   id: number;
   name: string;
+  theme: string;
 }
 
 export interface DayToDisplay {

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

@@ -8,13 +8,13 @@ export class RegistrationService {
 
   constructor() { }
 
-  public isCanceled(registration: Registration){
-    return  registration.canceled_at != null;
-  }
-
   public isDeleted(registration: Registration){
     return  registration.deleted_at != null;
   }
+  public isCanceled(registration: Registration){
+    return !this.isDeleted(registration) &&  registration.canceled_at != null;
+  }
+
 
   public isActive(registration: Registration){
     return  !this.isDeleted(registration) && !this.isCanceled(registration)

customer/app/src/styles.scss

@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 
 
+
 $font-size-xs: 0.625rem;
 $font-size-sm: 1rem;
 $font-size-md: 1.25rem;
@@ -54,6 +55,7 @@ $btn-border-radius: $border-radius-0;
 @import '~ngx-toastr/toastr';
 @import "styles/bootstrap-custom";
 @import "styles/fonts";
+@import "styles/event.themes";
 html{
   height: 100%;
 }
@@ -65,3 +67,6 @@ body{
   background-repeat: repeat-y;
 }
 
+
+
+

customer/app/src/styles/event.themes.scss

@@ -0,0 +1,52 @@
+$event-color-yellow: #ECB809; // - sárga
+$event-color-burgundy :#AE173B; // - bordó
+$event-color-pink :#DF429B; // - pink
+$event-color-purple :#B929B1; // - lila
+$event-color-turquoise :#3EBFAE; // - türkiz
+$event-color-blue :#6594D1; // - kék
+$event-color-orange :#F1591A; // - narancs
+$event-color-green :#30B211; // - zöld
+$event-color-red :#E82A36; // - piros
+$event-color-brown :#98701E; // - barna
+
+
+$event-theme-0: $event-color-yellow; // - sárga
+$event-theme-1 :$event-color-burgundy; // - bordó
+$event-theme-2 :$event-color-pink; // - pink
+$event-theme-3 :$event-color-purple; // - lila
+$event-theme-4 :$event-color-turquoise; // - türkiz
+$event-theme-5 :$event-color-blue; // - kék
+$event-theme-6 :$event-color-orange; // - narancs
+$event-theme-7 :$event-color-green; // - zöld
+$event-theme-8 :$event-color-red; // - piros
+$event-theme-9 :$event-color-brown; // - barna
+
+
+$event-themes: (
+  "0": $event-theme-0,
+  "1": $event-theme-1,
+  "2": $event-theme-2,
+  "3": $event-theme-3,
+  "4": $event-theme-4,
+  "5": $event-theme-5,
+  "6": $event-theme-6,
+  "7": $event-theme-7,
+  "8": $event-theme-8,
+  "9": $event-theme-9
+);
+
+@each $name, $color in $event-themes {
+
+  @debug "event theme - divider offset:";
+
+  .event-theme-normal-#{$name} {
+    .event-bar{
+      background-color: #{$color} !important;
+    }
+  }
+
+  .event-theme-active-#{$name}{
+    background-color:  #{$color} !important;
+  }
+
+}