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

customer design improvement

Browse Source
This commit is contained in:
Roland Schneider 2021-09-21 21:40:00 +02:00
parent 385e79ed22
commit bf15b3b77c
6 changed files with 89 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

81
customer/app/src/app/pages/password-change/password-change.component.html
View File

@ -1,37 +1,50 @@
<div class="d-flex h-100 align-items-center justify-content-center" (submit)="changePassword()"> <div class="row" (submit)="changePassword()">
<form [formGroup]="passwordChangeForm"> <div class="col-12 col-lg-6">
<h1>Jelszó módosítása</h1>
<div class="mb-3">
<label for="password_old" class="form-label">Jelenlegi jelszó</label>
<input type="password" class="form-control" id="password_old" placeholder="Jelenlegi jelszó"
formControlName="passwordOld">
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordOld','required')" class="text-danger">A 'jelenlegi jelszó' megadása kötelező</div>
</div> <form [formGroup]="passwordChangeForm">
<h1 class="mt-5 app-font-family-dcc">Jelszó módosítása</h1>
<div class="my-3">
<label for="password_old" class="form-label d-none">Jelenlegi jelszó</label>
<input type="password" class="form-control" id="password_old" placeholder="Jelenlegi jelszó"
formControlName="passwordOld">
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordOld','required')"
class="text-danger">A 'jelenlegi jelszó' megadása kötelező
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label d-none">Új jelszó</label>
<input type="password" class="form-control" id="password" placeholder="Új jelszó" formControlName="password">
<div *ngIf="validationService.showControlError(passwordChangeForm,'password','required')" class="text-danger">A
jelszó megadása kötelező
</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,'password','minlength')" class="text-danger">A
jelszó nem felel meg a formai követelményeknek
</div>
</div>
<div class="mb-3">
<label for="password_repeat" class="form-label d-none">Új jelszó mégegyszer</label>
<input type="password" class="form-control" id="password_repeat" placeholder="Új jelszó mégegyszer"
formControlName="passwordRepeat">
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordRepeat','required')"
class="text-danger">A 'jelszó mégegyszer' megadása kötelező
</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordRepeat','minlength')"
class="text-danger">A 'jelszó mégegyszer' nem felel meg a formai követelményeknek
</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,null,'notSame')" class="text-danger">A jelszó
és a jelszó mégegyszer' nem egyezik
</div>
</div>
<div class="mb-3 app-font-size-xs">
* A jelszónak legalább 6 karakterből kell állnia
</div>
<button class="btn btn-primary d-none d-lg-inline-block" type="submit" [disabled]="!passwordChangeForm.valid || loading">
Jelszó megváltoztatása
</button>
<button class="btn btn-primary d-lg-none w-100" type="submit" [disabled]="!passwordChangeForm.valid || loading">
Jelszó megváltoztatása
</button>
</form>
</div>
<div class="mb-3">
<label for="password" class="form-label">Új jelszó</label>
<input type="password" class="form-control" id="password" placeholder="Új jelszó" formControlName="password">
<div *ngIf="validationService.showControlError(passwordChangeForm,'password','required')" class="text-danger">A jelszó megadása kötelező</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,'password','minlength')" class="text-danger">A jelszó nem felel meg a formai követelményeknek</div>
</div>
<div class="mb-3">
<label for="password_repeat" class="form-label">Új jelszó mégegyszer</label>
<input type="password" class="form-control" id="password_repeat" placeholder="Új jelszó mégegyszer"
formControlName="passwordRepeat">
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordRepeat','required')" class="text-danger">A 'jelszó mégegyszer' megadása kötelező</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,'passwordRepeat','minlength')" class="text-danger">A 'jelszó mégegyszer' nem felel meg a formai követelményeknek</div>
<div *ngIf="validationService.showControlError(passwordChangeForm,null,'notSame')" class="text-danger">A jelszó és a jelszó mégegyszer' nem egyezik</div>
</div>
<div class="mb-3">
* A jelszónak legalább 6 karakterből kell állnia
</div>
<div class="text-center">
<button class="btn btn-primary" type="submit" [disabled]="!passwordChangeForm.valid || loading">Jelszó megváltoztatása</button>
</div>
</form>
</div> </div>

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

@ -2,37 +2,35 @@
<ng-container *ngIf="registration "> <ng-container *ngIf="registration ">
<h1>Foglalás</h1> <h1>Foglalás</h1>
<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="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés típusa</span></div>
<div class="col-lg-9 col-sm-12"><span>{{registration.event.eventType.name}}</span></div> <div class="col-lg-9 col-sm-12"><span>{{registration.event.eventType.name}}</span></div>
</div> </div>
<div class="row" *ngIf="registration.event.trainer"> <div class="row" *ngIf="registration.event.trainer">
<div class="col-lg-3 col-sm-12"><span class="title">Edző</span></div> <div class="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edző</span></div>
<div class="col-lg-9 col-sm-12"><span>{{registration.event?.trainer?.name}}</span></div> <div class="col-lg-9 col-sm-12"><span>{{registration.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="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés kezdési időpontja</span></div>
<div class="col-lg-9 col-sm-12"><span>{{registration.event.start * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div> <div class="col-lg-9 col-sm-12"><span>{{registration.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="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Edzés vége</span></div>
<div class="col-lg-9 col-sm-12"><span>{{registration.event.end * 1000 | date:'yyyy.MM.dd HH:mm'}}</span></div> <div class="col-lg-9 col-sm-12"><span>{{registration.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="col-lg-3 col-sm-12 app-font-weight-bold"><span class="title">Férőhelyek száma</span></div>
<div class="col-lg-9 col-sm-12"><span>{{registration.event.seat_count }}</span></div> <div class="col-lg-9 col-sm-12"><span>{{registration.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="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 class="col-lg-9 col-sm-12"><span>{{registration.event?.room?.name }}</span></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-9 col-sm-12 pt-2"> <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(registration)" class="btn btn-primary d-lg-none w-100" (click)="cancel(registration)">Lemondás</a>
<a *ngIf="mayCancel(event)" class="btn btn-primary" (click)="cancel(registration)">Lemondás</a> <a *ngIf="mayCancel(registration)" class="btn btn-primary d-none d-lg-inline-block" (click)="cancel(registration)">Lemondás</a>
<!-- <span *ngIf="!mayCancel(event) && noFreeSeat(event)">Már nincs szabad hely</span>--> <a class="btn btn-dark d-lg-none w-100 mt-2" (click)="goBack( )">Vissza</a>
</div> <a class="btn btn-dark d-none d-lg-inline-block ms-2 " (click)="goBack( )">Vissza</a>
<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> </div>

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

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

12
customer/app/src/app/pages/registration/registration.component.ts
View File

@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {EventService, Registration} from "../../services/event.service"; import {Event, EventService, Registration} from "../../services/event.service";
import {Observable} from "rxjs"; import {Observable} from "rxjs";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {tap} from "rxjs/operators"; import {tap} from "rxjs/operators";
import {NavigationService} from "../../services/navigation.service";
@Component({ @Component({
selector: 'app-registration', selector: 'app-registration',
@ -11,11 +12,12 @@ import {tap} from "rxjs/operators";
}) })
export class RegistrationComponent implements OnInit { export class RegistrationComponent implements OnInit {
registration: Registration; public registration: Registration;
constructor(private eventService: EventService, constructor(private eventService: EventService,
private route: Router, private route: Router,
private activeRoute: ActivatedRoute ) { } private activeRoute: ActivatedRoute ,
private navigationService: NavigationService) { }
ngOnInit() { ngOnInit() {
this.activeRoute.params.subscribe( value => { this.activeRoute.params.subscribe( value => {
@ -50,4 +52,8 @@ export class RegistrationComponent implements OnInit {
mayCancel(registration: Registration) { mayCancel(registration: Registration) {
return true; return true;
} }
goBack() {
this.navigationService.navigateToHome();
}
} }

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

@ -1,11 +1,12 @@
<!-- <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="row text-white mb-2 mx-1 align-middle" *ngFor="let registration of (registrations | async); let i = index; "
(click)="showRegistration(registration)" (click)="showRegistration(registration)"
[class.mt-2]="i == 0" [class.mt-2]="i == 0"
> >
<div class="col-12 col-md-9 bg-dark d-flex d-flex align-items-center py-2" > <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}}
- {{registration.event.trainer.name}}
</div> </div>
<div class="col-3 bg-dark py-2 d-none d-md-block text-end" > <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> <a class="btn btn-primary float-right">Részletek</a>