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

improve customer login & timetable design

Browse Source
This commit is contained in:
Roland Schneider 2021-09-21 18:39:16 +02:00
parent 678b005c1c
commit 385e79ed22
15 changed files with 114 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customer/app/src/app/_helpers/error.interceptor.ts
View File

@ -26,7 +26,7 @@ All other errors are RE-THROWN to be caught by the calling service so an alert c
this.authenticationService.logout(); this.authenticationService.logout();
this.navigationService.navigateToLogin(); this.navigationService.navigateToLogin();
// location.reload(true); // location.reload(true);
return EMPTY; // return EMPTY;
} }
// const error = err.error.message || err.statusText; // const error = err.error.message || err.statusText;
// return throwError(error); // return throwError(error);

10
customer/app/src/app/components/month-calendar-day/month-calendar-day.component.html
View File

@ -1,11 +1,11 @@
<ng-container *ngIf="day.active"> <ng-container *ngIf="day.active">
<div class="bg-white border h-100 p-2 "> <div class="bg-white border h-100 p-2 ">
<div class="row"> <div class="row mb-3">
<div class="col-12 d-block d-md-none d-lg-block">{{getMonthOfDay()}}.{{getDateOfDay()}}</div> <div class="col-12 d-block d-md-none d-lg-block app-font-size-md app-font-weight-normal ">{{getMonthOfDay()}}.{{getDateOfDay()}}</div>
<div class="col-12 d-none d-md-block d-lg-none">{{getMonthOfDay()}}.</div> <div class="col-12 d-none d-md-block d-lg-none app-font-size-md app-font-weight-normal">{{getMonthOfDay()}}.</div>
<div class="col-12 d-none d-md-block d-lg-none">{{getDateOfDay()}}</div> <div class="col-12 d-none d-md-block d-lg-none ">{{getDateOfDay()}}</div>
<div class="col-12"> <div class="col-12 ">
<span class=" d-md-none text-center text-muted">{{getDayOfWeekName()}}</span> <span class=" d-md-none text-center text-muted">{{getDayOfWeekName()}}</span>
</div> </div>
<div *ngIf="!hasEvents()" class="col-12 text-wrap">-</div> <div *ngIf="!hasEvents()" class="col-12 text-wrap">-</div>

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

@ -1,13 +1,13 @@
<span <div
(click)="selectEvent()" (click)="selectEvent()"
class="event d-block p-1 pl-2 pr-2 mb-1 rounded text-truncate small text-white" title="Test Event 2" class="event d-block p-1 px-2 mb-2 border-radius-1 text-truncate small text-white " title="Test Event 2"
[class.bg-dark]="maySelect()" [class.bg-dark]="maySelect()"
[class.bg-primary]="isRegistered()" [class.bg-primary]="isRegistered()"
[class.bg-secondary]="isDisabled()" [class.bg-secondary]="isDisabled()"
> >
{{formatTime()}}:{{event.eventType.name}} <div class="app-font-size-sm app-font-weight-normal ">{{formatTime()}}</div>
<div class="app-font-size-sm app-font-weight-bold">{{event.eventType.name}}</div>
<ng-container *ngIf="hasTrainer()"> <ng-container *ngIf="hasTrainer()">
<br> <div class="app-font-size-sm app-font-weight-normal">{{formatTrainer()}}</div>
{{formatTrainer()}}
</ng-container> </ng-container>
</span> </div>

6
customer/app/src/app/components/month-calendar/month-calendar.component.html
View File

@ -1,13 +1,13 @@
<header> <header>
<h1 class="text-center">Naptár</h1> <h1 class="text-center app-font-size-lg app-font-family-secondary mt-5 ">Naptár</h1>
</header> </header>
<div class="row text-white gx-2 d-none d-md-flex"> <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 *ngFor="let dayOfWeek of daysOfWeek; let i = index" class="col mb-2">
<div class="border text-center py-1 px-2" <div class="border text-center py-1 px-2 text-light"
[class.bg-primary]="i % 7 < 6" [class.bg-primary]="i % 7 < 6"
[class.bg-dark]="i % 7 == 6" [class.bg-dark]="i % 7 == 6"
> >
<span class="d-none d-lg-inline text-capitalize">{{dayOfWeek.name}}</span> <span class="d-none d-lg-inline text-capitalize app-font-size-md app-font-weight-bold ">{{dayOfWeek.name}}</span>
<span class="d-none d-md-inline d-lg-none text-capitalize" >{{dayOfWeek.shortName}}</span> <span class="d-none d-md-inline d-lg-none text-capitalize" >{{dayOfWeek.shortName}}</span>
</div> </div>
</div> <!-- text-center name-of-day-of-week bg-primary--> </div> <!-- text-center name-of-day-of-week bg-primary-->

4
customer/app/src/app/components/month-calendar/month-calendar.component.scss
View File

@ -8,4 +8,8 @@
.day { .day {
min-height: 20vh; min-height: 20vh;
} }
h1{
text-shadow: 0 0 5px #000000;
}
} }

2
customer/app/src/app/layout/secured-layout/secured-layout.component.html
View File

@ -1,4 +1,4 @@
<fit-navigation></fit-navigation> <fit-navigation></fit-navigation>
<div class="container " style="height: calc(100% - 85px)"> <div class="container " >
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

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

@ -1,40 +1,42 @@
<div class="container" *ngIf="event && eventForm"> <ng-container *ngIf="event && eventForm">
<h1>Jelentkezés</h1> <div class="" >
<form [formGroup]="eventForm">
<div class="row"> <div class="row ">
<div class="col-lg-3 col-sm-12"><span class="title">Edzés típusa</span></div> <div class="offset-lg-3 col-lg-6 col-sm-12"><h1>Jelentkezés</h1>
<div class="col-lg-9 col-sm-12"><span>{{event.eventType.name}}</span></div> </div>
</div>
<div class="row ">
<div class="offset-lg-3 col-lg-3 col-sm-12"><span class="title">Edzés típusa</span></div>
<div class="col-lg-3 col-sm-12"><span>{{event.eventType.name}}</span></div>
</div> </div>
<div class="row" *ngIf="event.trainer"> <div class="row" *ngIf="event.trainer">
<div class="col-lg-3 col-sm-12"><span class="title">Edző</span></div> <div class="offset-lg-3 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 class="col-lg-3 col-sm-12"><span>{{event?.trainer?.name}}</span></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-12"><span class="title">Edzés kezdési időpontja</span></div> <div class="offset-lg-3 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 class="col-lg-3 col-sm-12"><span>{{event.start * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-12"><span class="title">Edzés vége</span></div> <div class="offset-lg-3 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 class="col-lg-3 col-sm-12"><span>{{event.end * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-12"><span class="title">Férőhelyek száma</span></div> <div class="offset-lg-3 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 class="col-lg-3 col-sm-12"><span>{{event.seat_count }}</span></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-sm-12"><span class="title">Terem</span></div> <div class="offset-lg-3 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 class="col-lg-3 col-sm-12"><span>{{event?.room?.name }}</span></div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="col-lg-9 col-sm-12 pt-2"> <div class="offset-lg-3 col-lg-6 col-sm-12 pt-2">
<a *ngIf="mayRegister(event)" class="btn btn-primary me-3" (click)="register(event)">Foglalás</a> <a *ngIf="mayRegister(event)" class="btn btn-primary me-3" (click)="register(event)">Foglalás</a>
<a *ngIf="mayCancel(event)" class="btn btn-primary me-3" (click)="cancel(event)">Lemondás</a> <a *ngIf="mayCancel(event)" class="btn btn-primary me-3" (click)="cancel(event)">Lemondás</a>
<span class="warning me-3" *ngIf="!event.hasFreeSeats && event.registrations.length == 0">Már nincs szabad hely</span> <span class="warning me-3"
<a class="btn btn-primary me-3" (click)="goBack(event)">Vissza</a> *ngIf="!event.hasFreeSeats && event.registrations.length == 0">Már nincs szabad hely</span>
</div> <a class="btn btn-dark me-3" (click)="goBack(event)">Vissza</a>
<div class="col-lg-3 text-lg-right col-sm-12 pt-2">
</div>
</div> </div>
</form> </div>
</div> </ng-container>

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

@ -59,7 +59,6 @@ export class EventDetailsComponent implements OnInit {
let request: RegisterEventRequest = { let request: RegisterEventRequest = {
idEvent: this.eventForm.value.idEvent, idEvent: this.eventForm.value.idEvent,
equipment: [] equipment: []
}; };
this.eventService.register(request) this.eventService.register(request)

18
customer/app/src/app/pages/login/login.component.html
View File

@ -3,24 +3,28 @@
<div class="col-lg-4 col-sm-12 offset-lg-4 p-3 "> <div class="col-lg-4 col-sm-12 offset-lg-4 p-3 ">
<div class="d-flex align-items-center justify-content-center h-100 flex-column "> <div class="d-flex align-items-center justify-content-center h-100 flex-column ">
<img class="mw2-sm-80 mw2-80" src="/assets/images/cutlercross-logo-dark.svg"> <img class="mw2-sm-80 mw2-80" src="/assets/images/cutlercross-logo-dark.svg">
<h1 class="app-font-size-lg app-font-family-secondary mt-3">Bejelentkezés</h1>
<form class="login-form w-100" [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <form class="login-form w-100" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group mt-2"> <div class="form-group mt-2">
<label for="inputUsername">E-mail cím</label> <label class="d-none" for="inputUsername">E-mail cím</label>
<input type="text" formControlName="username" class="form-control" id="inputUsername" <input type="text" formControlName="username" class="form-control " id="inputUsername"
placeholder="E-mail cím"> placeholder="e-mail cím">
<div *ngIf="submitted && username.errors" class="text-danger"> <div *ngIf="submitted && username.errors" class="text-danger">
<div *ngIf="username.errors.required">Felhasználónév megadása kötelező</div> <div *ngIf="username.errors.required">Felhasználónév megadása kötelező</div>
</div> </div>
</div> </div>
<div class="form-group mt-2"> <div class="form-group mt-2">
<label for="inputPassword1">Jelszó</label> <label class="d-none" for="inputPassword1">Jelszó</label>
<input type="password" formControlName="password" class="form-control" id="inputPassword1" <input type="password" formControlName="password" class="form-control " id="inputPassword1"
placeholder="Jelszó"> placeholder="jelszó">
<div *ngIf="submitted && f.password.errors" class="text-danger"> <div *ngIf="submitted && f.password.errors" class="text-danger">
<div *ngIf="f.password.errors.required">Jelszó megadása kötelezú</div> <div *ngIf="f.password.errors.required">Jelszó megadása kötelezú</div>
</div> </div>
</div> </div>
<button [disabled]="loading" class="btn btn-primary mt-2 ">Bejelentkezés</button> <button [disabled]="loading" class="btn btn-primary mt-2 w-100 ">bejelentkezek</button>
<div class="w-100 text-center">
<button type="button" class="btn btn-link text-dark text-center text-decoration-none">elfelejtett jelszó</button>
</div>
<div *ngIf="error" class="alert alert-danger mt-2">{{error}}</div> <div *ngIf="error" class="alert alert-danger mt-2">{{error}}</div>
</form> </form>
</div> </div>

22
customer/app/src/app/pages/registrations/registrations.component.html
View File

@ -1,13 +1,15 @@
<div class="container"> <!-- <app-fit-weekday-selector [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>-->
<!-- <app-fit-weekday-selector [days]="(availableEvents | async)?.days" ></app-fit-weekday-selector>--> <ng-container *ngIf="registrations | async">
<ng-container *ngIf="registrations | async"> <div class="row text-white mb-2 align-middle" *ngFor="let registration of (registrations | async); let i = index; "
<div class="list-group "> (click)="showRegistration(registration)"
<div class="list-group-item" [class.mt-2]="i == 0"
*ngFor="let registration of (registrations | async) " >
(click)="showRegistration(registration)"> <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.start * 1000) | date:'yyyy.MM.dd HH:mm'}} - {{registration.event.eventType.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>
</div> </div>
</ng-container> </ng-container>
</div>

BIN
customer/app/src/assets/images/cutlercross-background.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 KiB

After

Width:  |  Height:  |  Size: 252 KiB

29
customer/app/src/styles.scss
View File

@ -7,6 +7,7 @@ $font-size-md: 1.25rem;
$font-size-lg: 2.5rem; $font-size-lg: 2.5rem;
$font-size-xl: 6.25rem; $font-size-xl: 6.25rem;
// font weight // font weight
$font-weight-normal: 400; $font-weight-normal: 400;
$font-weight-medium: 500; $font-weight-medium: 500;
@ -18,9 +19,37 @@ $secondary: #D2D2D2 ;
$light: #FFFFFF ; $light: #FFFFFF ;
$dark: #3A3A39 ; $dark: #3A3A39 ;
$border-radius-0: 0;
$border-radius-1: 0.5rem;
// bootstrap font override // bootstrap font override
$font-family-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ; $font-family-sans-serif: Roboto, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ;
/**
customize .form-control
important: total height must be 50(lineheight + padding + border)
**/
$input-border-radius: $border-radius-0;
$input-border-width: 1px;
//$input-border-color: $primary;
// must be without rem
$input-line-height: 2;
$input-padding-y: 8px;
$input-font-size: $font-size-md;
/**
button
important: total height must be 50px (lineheight + padding + border)
*/
$btn-line-height: 2;
$btn-padding-y: 8px;
$btn-font-weight: $font-weight-bold;
$btn-font-size: $font-size-md;
$btn-border-radius: $border-radius-0;
// regular style toast // regular style toast
@import '~ngx-toastr/toastr'; @import '~ngx-toastr/toastr';
@import "styles/bootstrap-custom"; @import "styles/bootstrap-custom";

7
customer/app/src/styles/bootstrap-custom.scss vendored
View File

@ -23,6 +23,13 @@ $utilities: map-merge(
class: mw2, class: mw2,
values: ( 25: 25%, 50: 50%, 80: 80%, 100: 100%) values: ( 25: 25%, 50: 50%, 80: 80%, 100: 100%)
), ),
// scss-docs-start utils-vertical-align
"border-radius": (
property: border-radius,
responsive: true,
class: border-radius,
values: ( 0: 0, 1: $border-radius-1 )
),
), ),
$utilities $utilities
); );

6
customer/app/src/styles/fonts.scss
View File

@ -2,8 +2,6 @@
@font-face { @font-face {
font-family: "Roboto"; font-family: "Roboto";
src: url("/assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype"); src: url("/assets/fonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
//font-weight: $font-weight-normal;
//font-style: normal;
} }
@font-face { @font-face {
@ -49,3 +47,7 @@
.app-font-weight-bold { .app-font-weight-bold {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
} }
.app-font-family-secondary{
font-family: dcc, serif;
}

3
customerapi/controllers/EventController.php
View File

@ -135,7 +135,6 @@ class EventController extends CustomerApiController
/** @var Event $event */ /** @var Event $event */
$event = $query->one(); $event = $query->one();
$result = new EventDetailsView(); $result = new EventDetailsView();
$result->id = $event->id; $result->id = $event->id;
$result->start = $event->start; $result->start = $event->start;
@ -144,7 +143,7 @@ class EventController extends CustomerApiController
$result->trainer = TrainerDetailsView::findOne($event->id_trainer); $result->trainer = TrainerDetailsView::findOne($event->id_trainer);
$result->room = RoomDetailsView::findOne($event->id_room); $result->room = RoomDetailsView::findOne($event->id_room);
$result->eventType = EventTypeDetailsView::findOne($event->id_event_type); $result->eventType = EventTypeDetailsView::findOne($event->id_event_type);
$registrations = EventRegistrationView::find()->all(); $registrations = EventRegistrationView::find()->andWhere(['id_event' => $event->id,'id_customer' => \Yii::$app->user->id])->all();
$allActiveRegistrations = EventRegistration::filterActive($registrations); $allActiveRegistrations = EventRegistration::filterActive($registrations);
$customerActiveRegistrations = EventRegistration::filterForCustomer($allActiveRegistrations,\Yii::$app->user->id); $customerActiveRegistrations = EventRegistration::filterForCustomer($allActiveRegistrations,\Yii::$app->user->id);
$result->reservationCount = count($allActiveRegistrations); $result->reservationCount = count($allActiveRegistrations);