diff --git a/Front/skydivelogs-app/.editorconfig b/Front/skydivelogs-app/.editorconfig index 6e87a00..9b73521 100644 --- a/Front/skydivelogs-app/.editorconfig +++ b/Front/skydivelogs-app/.editorconfig @@ -4,7 +4,7 @@ root = true [*] charset = utf-8 indent_style = space -indent_size = 2 +indent_size = 4 insert_final_newline = true trim_trailing_whitespace = true diff --git a/Front/skydivelogs-app/src/app/app.component.css b/Front/skydivelogs-app/src/app/app.component.css index f506723..71f1f8c 100644 --- a/Front/skydivelogs-app/src/app/app.component.css +++ b/Front/skydivelogs-app/src/app/app.component.css @@ -1,56 +1,44 @@ -/* .hamburger__icon { - position: relative; - height: 1rem; - margin-right: 1rem; - cursor: pointer; - fill: #ffff; -} - -.hamburger__icon__fill { - fill: #424242 -} */ - .navigation.side-menu-active { - left: 0px; + left: 0px; } .navigation { - position: absolute; - width: 200px; - z-index: 101; - background-color: grey; - padding: 5px; - left: -220px; - transition: 0.5s linear left; - -webkit-transition: 0.5s linear left; + position: absolute; + width: 200px; + z-index: 101; + background-color: grey; + padding: 5px; + left: -220px; + transition: 0.5s linear left; + -webkit-transition: 0.5s linear left; } .navigation ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .navigation ul li { - margin: 10px; + margin: 10px; } .navigation ul li a { - text-decoration: none; - cursor: pointer; - color: #424242; - vertical-align: middle; + text-decoration: none; + cursor: pointer; + color: #424242; + vertical-align: middle; } .navigation .mat-icon { - vertical-align: middle; + vertical-align: middle; } .navigation .splitter { - width: 100%; - margin-top: 20px; - margin-bottom: 20px; + width: 100%; + margin-top: 20px; + margin-bottom: 20px; } .mat-icon { - margin-right: 15px; + margin-right: 15px; } diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html index 551041d..ffaec80 100644 --- a/Front/skydivelogs-app/src/app/app.component.html +++ b/Front/skydivelogs-app/src/app/app.component.html @@ -6,12 +6,12 @@ [(value)]="selectedLanguageFlag" (selectionChange)="switchLang($event)" style="margin-left: 50px; width: 100px" - > + > + /> @@ -37,159 +37,159 @@ (click)="snav.toggle()" skipLocationChange >{{ "App_Nav_Summary" | translate }} -
- + > +
+ + + + {{ "App_Nav_Jumps" | translate }} + + + + {{ "App_Nav_NewJump" | translate }} +
+ + + + {{ "App_Nav_TunnelFlights" | translate }} + + + + {{ "App_Nav_NewTunnelFlight" | translate }} +
+ + + + {{ "App_Nav_Dzs" | translate }} + + + + {{ "App_Nav_Aircrafts" | translate }} + + + + {{ "App_Nav_JumpTypes" | translate }} + + + + {{ "App_Nav_Gears" | translate }} + + @if (currentUser) { +
{{ "App_Nav_Jumps" | translate }} - - - - {{ "App_Nav_NewJump" | translate }} -
- - - - {{ "App_Nav_TunnelFlights" | translate }} - - - - {{ "App_Nav_NewTunnelFlight" | translate }} -
- - - - {{ "App_Nav_Dzs" | translate }} - - - - {{ "App_Nav_Aircrafts" | translate }} - - - - {{ "App_Nav_JumpTypes" | translate }} - - - - {{ "App_Nav_Gears" | translate }} - - @if (currentUser) { - -
- - - {{ this.currentUser.firstName }} {{ this.currentUser.lastName }} - - - } - @if (currentUser) { - - - {{ - "App_Nav_Logout" | translate - }} - - } - + > + {{ this.currentUser.firstName }} {{ this.currentUser.lastName }} + + + } + @if (currentUser) { + + + {{ + "App_Nav_Logout" | translate + }} + + } + - - -
- {{ "App_Footer" | translate }}{{ version }} - @Séb -
- - + + +
+ {{ "App_Footer" | translate }}{{ version }} - @Séb +
+ + diff --git a/Front/skydivelogs-app/src/app/app.component.ts b/Front/skydivelogs-app/src/app/app.component.ts index c110d4c..8538e40 100644 --- a/Front/skydivelogs-app/src/app/app.component.ts +++ b/Front/skydivelogs-app/src/app/app.component.ts @@ -4,18 +4,18 @@ import { Router, RouterLink, RouterOutlet } from "@angular/router"; import { DomSanitizer } from "@angular/platform-browser"; import { MatToolbarModule } from "@angular/material/toolbar"; import { - IconResolver, - MatIconModule, - MatIconRegistry, + IconResolver, + MatIconModule, + MatIconRegistry, } from "@angular/material/icon"; import { MatSelectModule } from "@angular/material/select"; import { MatOptionModule } from "@angular/material/core"; import { MatSidenavModule } from "@angular/material/sidenav"; import { MatListModule } from "@angular/material/list"; import { - TranslateService, - TranslateModule, - TranslatePipe, + TranslateService, + TranslateModule, + TranslatePipe, } from "@ngx-translate/core"; import { User } from "../models/user"; @@ -27,79 +27,81 @@ import { ConfigurationHelper } from "../services/configuration-helper"; import { ServiceCacheApi } from "../services/service-cache-api.service"; @Component({ - selector: "app-root", - templateUrl: "./app.component.html", - styleUrls: ["./app.component.css"], - imports: [ - MatToolbarModule, - MatIconModule, - MatSelectModule, - MatOptionModule, - MatSidenavModule, - MatListModule, - RouterOutlet, - RouterLink, - TranslateModule, - TranslatePipe -], + selector: "app-root", + templateUrl: "./app.component.html", + styleUrls: ["./app.component.css"], + imports: [ + MatToolbarModule, + MatIconModule, + MatSelectModule, + MatOptionModule, + MatSidenavModule, + MatListModule, + RouterOutlet, + RouterLink, + TranslateModule, + TranslatePipe, + ], }) export class AppComponent implements OnInit { - public translatedTitle = "???"; - public currentUser: User; - public version: string; - public selectedLanguageFlag: string; + public translatedTitle = "???"; + public currentUser: User; + public version: string; + public selectedLanguageFlag: string; - constructor( - private router: Router, - private authenticationService: AuthenticationService, - private serviceComm: ServiceComm, - private serviceCacheApi: ServiceCacheApi, - private translateService: TranslateService, - ) { - const sanitizer = inject(DomSanitizer); - const resolver: IconResolver = (name) => - sanitizer.bypassSecurityTrustResourceUrl(`/assets/icon/${name}.svg`); - const iconRegistry = inject(MatIconRegistry); - iconRegistry.addSvgIconResolver(resolver); + constructor( + private router: Router, + private authenticationService: AuthenticationService, + private serviceComm: ServiceComm, + private serviceCacheApi: ServiceCacheApi, + private translateService: TranslateService, + ) { + const sanitizer = inject(DomSanitizer); + const resolver: IconResolver = (name) => + sanitizer.bypassSecurityTrustResourceUrl( + `/assets/icon/${name}.svg`, + ); + const iconRegistry = inject(MatIconRegistry); + iconRegistry.addSvgIconResolver(resolver); - this.authenticationService.currentUser.subscribe((user) => { - if (user) { - this.currentUser = user; - this.translateService.addLangs(["en", "fr"]); - this.translateService.use(user.language); - this.selectedLanguageFlag = user.language; - } - }); + this.authenticationService.currentUser.subscribe((user) => { + if (user) { + this.currentUser = user; + this.translateService.addLangs(["en", "fr"]); + this.translateService.use(user.language); + this.selectedLanguageFlag = user.language; + } + }); - ConfigurationHelper.settings.subscribe((settings) => { - if (settings != null) { - this.version = settings.version; - } - }); - } + ConfigurationHelper.settings.subscribe((settings) => { + if (settings != null) { + this.version = settings.version; + } + }); + } - ngOnInit() { - this.serviceComm.componentTitle.subscribe( - (title) => (this.translatedTitle = title), - ); - } + ngOnInit() { + this.serviceComm.componentTitle.subscribe( + (title) => (this.translatedTitle = title), + ); + } - public show() { - return this.authenticationService.currentUserValue != undefined; - } + public show() { + return this.authenticationService.currentUserValue != undefined; + } - public logout() { - this.serviceCacheApi.delete(CacheApiKey.Dropzone); - this.authenticationService.logout(); - this.router.navigate(["/login"], { skipLocationChange: true }); - } + public logout() { + this.serviceCacheApi.delete(CacheApiKey.Dropzone); + this.authenticationService.logout(); + this.router.navigate(["/login"], { skipLocationChange: true }); + } - public switchLang(event: any) { - this.translateService.use(event.value); - this.currentUser.language = event.value; - this.authenticationService.currentUserValue = this.currentUser; - this.selectedLanguageFlag = event.value; + public switchLang(event: any) { + this.translateService.use(event.value); + this.currentUser.language = event.value; + this.authenticationService.currentUserValue = this.currentUser; + this.selectedLanguageFlag = event.value; - this.serviceComm.forceTranslate(); - } + this.serviceComm.forceTranslate(); + } } diff --git a/Front/skydivelogs-app/src/app/app.config.ts b/Front/skydivelogs-app/src/app/app.config.ts index 46428cd..9e7f38e 100644 --- a/Front/skydivelogs-app/src/app/app.config.ts +++ b/Front/skydivelogs-app/src/app/app.config.ts @@ -32,42 +32,44 @@ import { provideTranslateHttpLoader } from "@ngx-translate/http-loader"; // Déclaration de la fonction d'initialisation de la configuration export function initConfig(configService: ConfigurationHelper) { - return () => configService.load(environment.env); + return () => configService.load(environment.env); } export const appConfig: ApplicationConfig = { - providers: [ - TunnelService, - TunnelFlightService, - ImageService, - AircraftService, - DropzoneService, - GearService, - JumpService, - JumpTypeService, - StatsService, - ServiceComm, - DateService, - RequestCache, - ConfigurationHelper, - DatePipe, - ServiceCacheApi, - provideAppInitializer(() => { - const initializerFn = initConfig(inject(ConfigurationHelper)); - return initializerFn(); - }), - provideHttpClient(withInterceptors([JwtAuthInterceptor, ErrorInterceptor])), - provideCharts(withDefaultRegisterables()), - provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(routes), - provideHttpClient(), - provideTranslateService({ - loader: provideTranslateHttpLoader({ - prefix: "/assets/i18n/", - suffix: ".json", - }), - fallbackLang: "en", - lang: "en", - }), - ], + providers: [ + TunnelService, + TunnelFlightService, + ImageService, + AircraftService, + DropzoneService, + GearService, + JumpService, + JumpTypeService, + StatsService, + ServiceComm, + DateService, + RequestCache, + ConfigurationHelper, + DatePipe, + ServiceCacheApi, + provideAppInitializer(() => { + const initializerFn = initConfig(inject(ConfigurationHelper)); + return initializerFn(); + }), + provideHttpClient( + withInterceptors([JwtAuthInterceptor, ErrorInterceptor]), + ), + provideCharts(withDefaultRegisterables()), + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideHttpClient(), + provideTranslateService({ + loader: provideTranslateHttpLoader({ + prefix: "/assets/i18n/", + suffix: ".json", + }), + fallbackLang: "en", + lang: "en", + }), + ], }; diff --git a/Front/skydivelogs-app/src/app/app.routes.ts b/Front/skydivelogs-app/src/app/app.routes.ts index cfcb433..befabe1 100644 --- a/Front/skydivelogs-app/src/app/app.routes.ts +++ b/Front/skydivelogs-app/src/app/app.routes.ts @@ -3,91 +3,97 @@ import { Routes } from "@angular/router"; import { AuthGuardService } from "../services/auth-guard.service"; export const routes: Routes = [ - { - path: "", - loadComponent: () => - import("./default/default.component").then((m) => m.DefaultComponent), - canActivate: [AuthGuardService], - }, - { - path: "summary", - loadComponent: () => - import("./summary/summary.component").then((m) => m.SummaryComponent), - canActivate: [AuthGuardService], - }, - { - path: "jumps", - loadComponent: () => - import("./list-of-jumps/list-of-jumps.component").then( - (m) => m.ListOfJumpsComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "dzs", - loadComponent: () => - import("./list-of-dzs/list-of-dzs.component").then( - (m) => m.ListOfDzsComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "newjump", - loadComponent: () => - import("./new-jump/new-jump.component").then((m) => m.NewJumpComponent), - canActivate: [AuthGuardService], - }, - { - path: "aircrafts", - loadComponent: () => - import("./list-of-aircrafts/list-of-aircrafts.component").then( - (m) => m.ListOfAircraftsComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "jumpTypes", - loadComponent: () => - import("./list-of-jump-types/list-of-jump-types.component").then( - (m) => m.ListOfJumpTypesComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "gears", - loadComponent: () => - import("./list-of-gears/list-of-gears.component").then( - (m) => m.ListOfGearsComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "user", - loadComponent: () => - import("./user-profile/user-profile.component").then( - (m) => m.UserProfileComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "newTunnelFlight", - loadComponent: () => - import("./new-tunnel-flight/new-tunnel-flight.component").then( - (m) => m.NewTunnelFlightComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "tunnelFlights", - loadComponent: () => - import("./list-of-tunnel-flights/list-of-tunnel-flights.component").then( - (m) => m.ListOfTunnelFlightsComponent, - ), - canActivate: [AuthGuardService], - }, - { - path: "login", - loadComponent: () => - import("./login/login.component").then((m) => m.LoginComponent), - }, + { + path: "", + loadComponent: () => + import("./default/default.component").then( + (m) => m.DefaultComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "summary", + loadComponent: () => + import("./summary/summary.component").then( + (m) => m.SummaryComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "jumps", + loadComponent: () => + import("./list-of-jumps/list-of-jumps.component").then( + (m) => m.ListOfJumpsComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "dzs", + loadComponent: () => + import("./list-of-dzs/list-of-dzs.component").then( + (m) => m.ListOfDzsComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "newjump", + loadComponent: () => + import("./new-jump/new-jump.component").then( + (m) => m.NewJumpComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "aircrafts", + loadComponent: () => + import("./list-of-aircrafts/list-of-aircrafts.component").then( + (m) => m.ListOfAircraftsComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "jumpTypes", + loadComponent: () => + import("./list-of-jump-types/list-of-jump-types.component").then( + (m) => m.ListOfJumpTypesComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "gears", + loadComponent: () => + import("./list-of-gears/list-of-gears.component").then( + (m) => m.ListOfGearsComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "user", + loadComponent: () => + import("./user-profile/user-profile.component").then( + (m) => m.UserProfileComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "newTunnelFlight", + loadComponent: () => + import("./new-tunnel-flight/new-tunnel-flight.component").then( + (m) => m.NewTunnelFlightComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "tunnelFlights", + loadComponent: () => + import("./list-of-tunnel-flights/list-of-tunnel-flights.component").then( + (m) => m.ListOfTunnelFlightsComponent, + ), + canActivate: [AuthGuardService], + }, + { + path: "login", + loadComponent: () => + import("./login/login.component").then((m) => m.LoginComponent), + }, ]; diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html index dd070eb..b2057ef 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.html @@ -1,126 +1,136 @@
-

- - {{ "LoginCreateUser_Firstname" | translate }} - - @if (formCtrls['firstname'].hasError('required')) { - - {{ "LoginCreateUser_FirstnameRequired" | translate }} - - } - @if (formCtrls['firstname'].hasError('minlength')) { - - {{ "LoginCreateUser_FirstnamePattern" | translate }} - - } - -

-

- - {{ "LoginCreateUser_Lastname" | translate }} - - @if (formCtrls['lastname'].hasError('required')) { - - {{ "LoginCreateUser_LastnameRequired" | translate }} - - } - @if (formCtrls['lastname'].hasError('minlength')) { - - {{ "LoginCreateUser_LastnamePattern" | translate }} - - } - -

-

- - {{ "LoginCreateUser_Email" | translate }} - - @if (formCtrls['email'].hasError('required')) { - - {{ "LoginCreateUser_EmailRequired" | translate }} - - } - @if (formCtrls['email'].hasError('email')) { - - {{ "LoginCreateUser_EmailPattern" | translate }} - - } - -

-

- - {{ "LoginCreateUser_Username" | translate }} - - @if (formCtrls['username'].hasError('required')) { - - {{ "LoginCreateUser_UsernameRequired" | translate }} - - } - @if (formCtrls['username'].hasError('minlength')) { - - {{ "LoginCreateUser_UsernamePattern" | translate }} - - } - -

-

- - {{ "LoginCreateUser_Password" | translate }} - - @if (formCtrls['password'].hasError('required')) { - - {{ "LoginCreateUser_PasswordRequired" | translate }} - - } - @if (formCtrls['password'].hasError('pattern')) { - - {{ "LoginCreateUser_PasswordPattern" | translate }} - - } - -

+ focusInvalidInput + autocomplete="off" + style="padding: 10px" + (ngSubmit)="onCreateSubmit()" + [formGroup]="createForm" +> +

+ + {{ "LoginCreateUser_Firstname" | translate }} + + @if (formCtrls["firstname"].hasError("required")) { + + {{ "LoginCreateUser_FirstnameRequired" | translate }} + + } + @if (formCtrls["firstname"].hasError("minlength")) { + + {{ "LoginCreateUser_FirstnamePattern" | translate }} + + } + +

+

+ + {{ "LoginCreateUser_Lastname" | translate }} + + @if (formCtrls["lastname"].hasError("required")) { + + {{ "LoginCreateUser_LastnameRequired" | translate }} + + } + @if (formCtrls["lastname"].hasError("minlength")) { + + {{ "LoginCreateUser_LastnamePattern" | translate }} + + } + +

+

+ + {{ "LoginCreateUser_Email" | translate }} + + @if (formCtrls["email"].hasError("required")) { + + {{ "LoginCreateUser_EmailRequired" | translate }} + + } + @if (formCtrls["email"].hasError("email")) { + + {{ "LoginCreateUser_EmailPattern" | translate }} + + } + +

+

+ + {{ "LoginCreateUser_Username" | translate }} + + @if (formCtrls["username"].hasError("required")) { + + {{ "LoginCreateUser_UsernameRequired" | translate }} + + } + @if (formCtrls["username"].hasError("minlength")) { + + {{ "LoginCreateUser_UsernamePattern" | translate }} + + } + +

+

+ + {{ "LoginCreateUser_Password" | translate }} + + @if (formCtrls["password"].hasError("required")) { + + {{ "LoginCreateUser_PasswordRequired" | translate }} + + } + @if (formCtrls["password"].hasError("pattern")) { + + {{ "LoginCreateUser_PasswordPattern" | translate }} + + } + +

- - @if (error) { -
{{ error }}
- } + + @if (error) { +
{{ error }}
+ }
diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts index 90b5cf5..a4142cd 100644 --- a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts +++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit, ViewChild } from "@angular/core"; import { Router, ActivatedRoute } from "@angular/router"; import { - FormBuilder, - FormGroup, - ReactiveFormsModule, - Validators, + FormBuilder, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { - TranslateModule, - TranslatePipe, - TranslateService, + TranslateModule, + TranslatePipe, + TranslateService, } from "@ngx-translate/core"; import { CommonModule } from "@angular/common"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -22,90 +22,90 @@ import { AuthenticationService } from "../../services/authentication.service"; import { User } from "../../models/user"; @Component({ - selector: "app-create-user", - templateUrl: "./create-user.component.html", - styleUrls: ["./create-user.component.css"], - imports: [ - CommonModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - TranslateModule, - TranslatePipe, - ], + selector: "app-create-user", + templateUrl: "./create-user.component.html", + styleUrls: ["./create-user.component.css"], + imports: [ + CommonModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + TranslateModule, + TranslatePipe, + ], }) export class CreateUserComponent implements OnInit { - public createForm: FormGroup; - public invalidForm = true; - public submitted = false; - public returnUrl: string; - public error: string = ""; + public createForm: FormGroup; + public invalidForm = true; + public submitted = false; + public returnUrl: string; + public error: string = ""; - constructor( - private formBuilder: FormBuilder, - private route: ActivatedRoute, - private router: Router, - private authenticationService: AuthenticationService, - private translateService: TranslateService, - ) { - // redirect to home if already logged in - if (this.authenticationService.currentUserValue) { - this.router.navigate(["/"]); + constructor( + private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + private authenticationService: AuthenticationService, + private translateService: TranslateService, + ) { + // redirect to home if already logged in + if (this.authenticationService.currentUserValue) { + this.router.navigate(["/"]); + } } - } - ngOnInit() { - this.createForm = this.formBuilder.group( - { - firstname: ["", [Validators.required, Validators.minLength(3)]], - lastname: ["", [Validators.required, Validators.minLength(3)]], - email: ["", [Validators.required, Validators.email]], - username: ["", [Validators.required, Validators.minLength(3)]], - password: [ - "", - [ - Validators.required, - Validators.pattern( - "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$", - ), - ], - ], - }, - { updateOn: "blur" }, - ); + ngOnInit() { + this.createForm = this.formBuilder.group( + { + firstname: ["", [Validators.required, Validators.minLength(3)]], + lastname: ["", [Validators.required, Validators.minLength(3)]], + email: ["", [Validators.required, Validators.email]], + username: ["", [Validators.required, Validators.minLength(3)]], + password: [ + "", + [ + Validators.required, + Validators.pattern( + "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$", + ), + ], + ], + }, + { updateOn: "blur" }, + ); - // get return url from route parameters or default to '/' - this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; - } - - get formCtrls() { - return this.createForm.controls; - } - - onCreateSubmit() { - this.invalidForm = false; - this.submitted = true; - if (this.createForm.invalid) { - this.invalidForm = true; - return; + // get return url from route parameters or default to '/' + this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; + } + + get formCtrls() { + return this.createForm.controls; + } + + onCreateSubmit() { + this.invalidForm = false; + this.submitted = true; + if (this.createForm.invalid) { + this.invalidForm = true; + return; + } + let createUser = new User(); + createUser.login = this.formCtrls["username"].value; + createUser.password = this.formCtrls["password"].value; + createUser.firstName = this.formCtrls["firstname"].value; + createUser.lastName = this.formCtrls["lastname"].value; + createUser.email = this.formCtrls["email"].value; + createUser.language = this.translateService.getCurrentLang(); + this.authenticationService + .create(createUser) + .pipe(first()) + .subscribe({ + complete: () => this.router.navigate([this.returnUrl]), + error: (error) => { + this.error = error.message; + this.invalidForm = false; + }, + }); } - let createUser = new User(); - createUser.login = this.formCtrls["username"].value; - createUser.password = this.formCtrls["password"].value; - createUser.firstName = this.formCtrls["firstname"].value; - createUser.lastName = this.formCtrls["lastname"].value; - createUser.email = this.formCtrls["email"].value; - createUser.language = this.translateService.getCurrentLang(); - this.authenticationService - .create(createUser) - .pipe(first()) - .subscribe({ - complete: () => this.router.navigate([this.returnUrl]), - error: (error) => { - this.error = error.message; - this.invalidForm = false; - }, - }); - } } diff --git a/Front/skydivelogs-app/src/app/default/default.component.css b/Front/skydivelogs-app/src/app/default/default.component.css index 43332bf..8668e1f 100644 --- a/Front/skydivelogs-app/src/app/default/default.component.css +++ b/Front/skydivelogs-app/src/app/default/default.component.css @@ -1,11 +1,11 @@ .content { - height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; + height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; } p { - margin: 0; + margin: 0; } diff --git a/Front/skydivelogs-app/src/app/default/default.component.html b/Front/skydivelogs-app/src/app/default/default.component.html index fb7fe86..197379b 100644 --- a/Front/skydivelogs-app/src/app/default/default.component.html +++ b/Front/skydivelogs-app/src/app/default/default.component.html @@ -1,62 +1,62 @@
-

- - - -

-

- - - -

-

- - - -

-

- - - -

+

+ + + +

+

+ + + +

+

+ + + +

+

+ + + +

diff --git a/Front/skydivelogs-app/src/app/default/default.component.ts b/Front/skydivelogs-app/src/app/default/default.component.ts index 7a28d1b..f52ec07 100644 --- a/Front/skydivelogs-app/src/app/default/default.component.ts +++ b/Front/skydivelogs-app/src/app/default/default.component.ts @@ -12,48 +12,48 @@ import { JumpTypeService } from "../../services/jump-type.service"; import { ServiceComm } from "../../services/service-comm.service"; @Component({ - selector: "app-default", - templateUrl: "./default.component.html", - styleUrls: ["./default.component.css"], - imports: [TranslateModule, MatIconModule, RouterLink], + selector: "app-default", + templateUrl: "./default.component.html", + styleUrls: ["./default.component.css"], + imports: [TranslateModule, MatIconModule, RouterLink], }) export class DefaultComponent implements OnInit { - constructor( - private serviceComm: ServiceComm, - private translateService: TranslateService, - private authenticationService: AuthenticationService, - private serviceApiAircraft: AircraftService, - private serviceApiJumpType: JumpTypeService, - private serviceApiDropzone: DropzoneService, - private serviceApiGear: GearService, - ) {} + constructor( + private serviceComm: ServiceComm, + private translateService: TranslateService, + private authenticationService: AuthenticationService, + private serviceApiAircraft: AircraftService, + private serviceApiJumpType: JumpTypeService, + private serviceApiDropzone: DropzoneService, + private serviceApiGear: GearService, + ) {} - ngOnInit() { - this.authenticationService.alwaysLogin(); + ngOnInit() { + this.authenticationService.alwaysLogin(); - this.putToCacheRefDatas().subscribe(() => { - console.log("Push to cache the referentiel datas"); - }); - this.updateTitle(); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { + this.putToCacheRefDatas().subscribe(() => { + console.log("Push to cache the referentiel datas"); + }); this.updateTitle(); - } - }); - } + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); + } - private putToCacheRefDatas(): Observable { - var aircraftResp = this.serviceApiAircraft.getListOfAircrafts(false); - var jumpTypeResp = this.serviceApiJumpType.getListOfJumpTypes(); - var dzResp = this.serviceApiDropzone.getListOfDropZones(false); - var gearResp = this.serviceApiGear.getListOfGears(); + private putToCacheRefDatas(): Observable { + var aircraftResp = this.serviceApiAircraft.getListOfAircrafts(false); + var jumpTypeResp = this.serviceApiJumpType.getListOfJumpTypes(); + var dzResp = this.serviceApiDropzone.getListOfDropZones(false); + var gearResp = this.serviceApiGear.getListOfGears(); - return forkJoin([aircraftResp, jumpTypeResp, dzResp, gearResp]); - } + return forkJoin([aircraftResp, jumpTypeResp, dzResp, gearResp]); + } - private updateTitle() { - this.translateService.get("Default_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("Default_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html b/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html index 5398f70..31ddc55 100644 --- a/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html +++ b/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html @@ -1,36 +1,36 @@
-

- Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }}) -

-

- Special jump +

+ Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }})

- CutawaySpecial jump -

- +

+

+ Cutaway +

+ - + -
- @if (editMode) { +
+ @if (editMode) { - } -
+ } + diff --git a/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts b/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts index 8e909a2..bf96de9 100644 --- a/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts +++ b/Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts @@ -15,44 +15,44 @@ import { JumpService } from "../../services/jump.service"; import { ServiceComm } from "../../services/service-comm.service"; @Component({ - selector: "app-jump-infos", - templateUrl: "./jump-infos.component.html", - styleUrls: ["./jump-infos.component.css"], - imports: [ - TranslateModule, - FormsModule, - MatCheckboxModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule -], + selector: "app-jump-infos", + templateUrl: "./jump-infos.component.html", + styleUrls: ["./jump-infos.component.css"], + imports: [ + TranslateModule, + FormsModule, + MatCheckboxModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class JumpInfosComponent implements OnInit { - public editMode: boolean; - public jump: JumpResp; + public editMode: boolean; + public jump: JumpResp; - constructor( - @Inject(MAT_DIALOG_DATA) public data: any, - private serviceJump: JumpService, - private serviceComm: ServiceComm - ) { - this.jump = new JumpResp(data.jump); - this.editMode = data.editMode; - } + constructor( + @Inject(MAT_DIALOG_DATA) public data: any, + private serviceJump: JumpService, + private serviceComm: ServiceComm, + ) { + this.jump = new JumpResp(data.jump); + this.editMode = data.editMode; + } - ngOnInit(): void {} + ngOnInit(): void {} - public updateJump() { - this.serviceJump - .updateJump( - this.jump.id, - this.jump.isSpecial, - this.jump.withCutaway, - this.jump.notes - ) - .subscribe(() => { - this.serviceComm.refreshData(AddAction.Jump); - }); - } + public updateJump() { + this.serviceJump + .updateJump( + this.jump.id, + this.jump.isSpecial, + this.jump.withCutaway, + this.jump.notes, + ) + .subscribe(() => { + this.serviceComm.refreshData(AddAction.Jump); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css index ff391a1..04e46a6 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css @@ -1,22 +1,22 @@ table { - width: 100%; + width: 100%; } .mat-row td { - padding: 15px; + padding: 15px; } .spanWithBreakWord { - display: inline-block; - min-width: 200px; - word-wrap: break-word; + display: inline-block; + min-width: 200px; + word-wrap: break-word; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html index e694fe6..062473c 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html @@ -1,47 +1,54 @@
- @if (dataSourceTable != null) { -
- @if (isUserAdmin == true) { - - } - - - - - - - - - - - - - - - -
- {{ "ListAircrafts_Header_Id" | translate }} - {{ element.id }} - {{ "ListAircrafts_Header_Name" | translate }} - {{ element.name }} - {{ "ListAircrafts_Header_Image" | translate }} - - No image -
-
- } @else { - - } - - + @if (dataSourceTable != null) { +
+ @if (isUserAdmin == true) { + + } + + + + + + + + + + + + + + + +
+ {{ "ListAircrafts_Header_Id" | translate }} + {{ element.id }} + {{ "ListAircrafts_Header_Name" | translate }} + + {{ element.name }} + + {{ "ListAircrafts_Header_Image" | translate }} + + No image +
+
+ } @else { + + } +
diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts index 63e4b6f..696737b 100644 --- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts @@ -15,70 +15,72 @@ import { AddAction } from "../../models/add-action.enum"; import { AircraftResp } from "../../models/aircraft"; @Component({ - selector: "app-list-of-aircrafts", - templateUrl: "./list-of-aircrafts.component.html", - styleUrls: ["./list-of-aircrafts.component.css"], - imports: [ - TranslateModule, - MatPaginatorModule, - MatProgressSpinnerModule, - MatTableModule, - MatButtonModule -], + selector: "app-list-of-aircrafts", + templateUrl: "./list-of-aircrafts.component.html", + styleUrls: ["./list-of-aircrafts.component.css"], + imports: [ + TranslateModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatTableModule, + MatButtonModule, + ], }) export class ListOfAircraftsComponent implements OnInit { - public displayedColumns: Array = ["name", "imageData"]; - public dataSourceTable: MatTableDataSource; - public resultsLength = 0; - public isUserAdmin: boolean; - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public displayedColumns: Array = ["name", "imageData"]; + public dataSourceTable: MatTableDataSource; + public resultsLength = 0; + public isUserAdmin: boolean; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor( - private serviceApi: AircraftService, - private serviceComm: ServiceComm, - private authenticationService: AuthenticationService, - public dialog: MatDialog, - private translateService: TranslateService - ) { - this.isUserAdmin = - this.authenticationService.currentUserValue.roles === "admin"; - } + constructor( + private serviceApi: AircraftService, + private serviceComm: ServiceComm, + private authenticationService: AuthenticationService, + public dialog: MatDialog, + private translateService: TranslateService, + ) { + this.isUserAdmin = + this.authenticationService.currentUserValue.roles === "admin"; + } + + ngOnInit() { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.Aircraft) { + this.dialog.closeAll(); + this.getListOfAircrafts(); + } + }); + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.Aircraft) { - this.dialog.closeAll(); - this.getListOfAircrafts(); - } - }); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + this.getListOfAircrafts(); + } - this.updateTitle(); - this.getListOfAircrafts(); - } + private getListOfAircrafts() { + this.serviceApi.getListOfAircrafts().subscribe((data) => { + setTimeout(() => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.dataSourceTable = new MatTableDataSource( + data, + ); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 500); + }); + } - private getListOfAircrafts() { - this.serviceApi.getListOfAircrafts().subscribe((data) => { - setTimeout(() => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; - }, 500); - }); - } + openDialogToAdd() { + this.dialog.open(NewAircraftComponent); + } - openDialogToAdd() { - this.dialog.open(NewAircraftComponent); - } - - private updateTitle() { - this.translateService.get("ListAircrafts_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("ListAircrafts_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css index 7513415..04e46a6 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.css @@ -1,22 +1,22 @@ table { - width: 100%; + width: 100%; } .mat-row td { - padding: 15px; + padding: 15px; } .spanWithBreakWord { - display: inline-block; - min-width: 200px; - word-wrap: break-word; + display: inline-block; + min-width: 200px; + word-wrap: break-word; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; -} \ No newline at end of file + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; +} diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html index ae2155e..f7d1aea 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html @@ -1,117 +1,138 @@
- @if (dataSourceTable != null) { -
- @if (isUserAdmin == true) { - - } - - {{ "ListDz_Filter" | translate }} - - - - - - - - - - - - - - - - - - - - - - - - - -
- @if (element.isFavorite === true) { - + @if (dataSourceTable != null) { +
+ @if (isUserAdmin == true) { + } - @if (element.isFavorite === false) { - - } - - - - - - - @if (element.email) { - - - - } -
- {{ "ListDz_Header_ID" | translate }} - {{ element.id }} - {{ "ListDz_Header_Name" | translate }} - - - - {{ "ListDz_Header_Address" | translate }} - - - - {{ "ListDz_Header_Type" | translate }} - {{ element.type }}
-
- } @else { - - } - - + + {{ "ListDz_Filter" | translate }} + + + + + + + + + + + + + + + + + + + + + + + + + +
+ @if (element.isFavorite === true) { + + } + @if (element.isFavorite === false) { + + } + + + + + + + @if (element.email) { + + + + } + + {{ "ListDz_Header_ID" | translate }} + {{ element.id }} + {{ "ListDz_Header_Name" | translate }} + + + + {{ "ListDz_Header_Address" | translate }} + + + + {{ "ListDz_Header_Type" | translate }} + + {{ element.type }} +
+
+ } @else { + + } + diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts index 75ecf59..d4840aa 100644 --- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts @@ -19,111 +19,113 @@ import { AuthenticationService } from "../../services/authentication.service"; import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component"; @Component({ - selector: "app-list-of-dzs", - templateUrl: "./list-of-dzs.component.html", - styleUrls: ["./list-of-dzs.component.css"], - imports: [ - TranslateModule, - MatIconModule, - MatPaginatorModule, - MatProgressSpinnerModule, - MatTableModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule -], + selector: "app-list-of-dzs", + templateUrl: "./list-of-dzs.component.html", + styleUrls: ["./list-of-dzs.component.css"], + imports: [ + TranslateModule, + MatIconModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatTableModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class ListOfDzsComponent implements OnInit { - public displayedColumns: Array = [ - "isfavorite", - "name", - "address", - "type", - ]; - public dataSourceTable: MatTableDataSource; - public isUserAdmin: boolean; - public resultsLength = 0; - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public displayedColumns: Array = [ + "isfavorite", + "name", + "address", + "type", + ]; + public dataSourceTable: MatTableDataSource; + public isUserAdmin: boolean; + public resultsLength = 0; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor( - private serviceApi: DropzoneService, - private serviceComm: ServiceComm, - private authenticationService: AuthenticationService, - public dialog: MatDialog, - private translateService: TranslateService - ) { - this.isUserAdmin = - this.authenticationService.currentUserValue.roles === "admin"; - } + constructor( + private serviceApi: DropzoneService, + private serviceComm: ServiceComm, + private authenticationService: AuthenticationService, + public dialog: MatDialog, + private translateService: TranslateService, + ) { + this.isUserAdmin = + this.authenticationService.currentUserValue.roles === "admin"; + } + + ngOnInit() { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.Dropzone) { + this.dialog.closeAll(); + this.getListOfDropZones(); + } + }); + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.Dropzone) { - this.dialog.closeAll(); - this.getListOfDropZones(); - } - }); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + this.getListOfDropZones(); + } - this.updateTitle(); - this.getListOfDropZones(); - } + private getListOfDropZones() { + this.serviceApi.getListOfDropZones().subscribe((data) => { + setTimeout(() => { + data.sort( + (a, b) => + (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) || + a.name.localeCompare(b.name), + ); + this.dataSourceTable = new MatTableDataSource( + data, + ); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 500); + }); + } - private getListOfDropZones() { - this.serviceApi.getListOfDropZones().subscribe((data) => { - setTimeout(() => { - data.sort( - (a, b) => - (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) || - a.name.localeCompare(b.name) - ); + public setToFavorite(dropzone: DropZoneResp) { + dropzone.isFavorite = true; + this.serviceApi.setFavoriteDropZone(dropzone); + + const data = this.dataSourceTable.data; + data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); this.dataSourceTable = new MatTableDataSource(data); this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; - }, 500); - }); - } + } - public setToFavorite(dropzone: DropZoneResp) { - dropzone.isFavorite = true; - this.serviceApi.setFavoriteDropZone(dropzone); + public removeToFavorite(dropzone: DropZoneResp) { + dropzone.isFavorite = false; + this.serviceApi.removeFavoriteDropZone(dropzone); - const data = this.dataSourceTable.data; - data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - } + const data = this.dataSourceTable.data; + data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + } - public removeToFavorite(dropzone: DropZoneResp) { - dropzone.isFavorite = false; - this.serviceApi.removeFavoriteDropZone(dropzone); + openDialogToAdd() { + this.dialog.open(NewDropZoneComponent, { + height: "400px", + width: "600px", + }); + } - const data = this.dataSourceTable.data; - data.sort((a, b) => (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0)); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - } + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSourceTable.filter = filterValue.trim().toLowerCase(); + } - openDialogToAdd() { - this.dialog.open(NewDropZoneComponent, { - height: "400px", - width: "600px", - }); - } - - applyFilter(event: Event) { - const filterValue = (event.target as HTMLInputElement).value; - this.dataSourceTable.filter = filterValue.trim().toLowerCase(); - } - - private updateTitle() { - this.translateService.get("ListDz_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("ListDz_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css index 7d2df70..15b82c8 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css @@ -1,26 +1,26 @@ table { - width: 100%; + width: 100%; } .mat-row td { - padding: 15px; + padding: 15px; } .spanWithBreakWord { - display: inline-block; - min-width: 200px; - word-wrap: break-word; + display: inline-block; + min-width: 200px; + word-wrap: break-word; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } th.mat-header-cell { - text-align: center; + text-align: center; } diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html index dbb4cb1..b8e76e2 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html @@ -1,61 +1,88 @@
- @if (dataSourceTable != null) { -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- {{ "ListGears_Header_Id" | translate }} - {{ element.id }} - {{ "ListGears_Header_Name" | translate }} - {{ element.name }} - {{ "ListGears_Header_Manufacturer" | translate }} - {{ element.manufacturer }} - {{ "ListGears_Header_CanopySize" | translate }} - - {{ element.minSize }} - {{ element.maxSize }} - - {{ "ListGears_Header_Aad" | translate }} - {{ element.aad }} - {{ "ListGears_Header_Main" | translate }} - {{ element.mainCanopy }} - {{ "ListGears_Header_Reserve" | translate }} - {{ element.reserveCanopy }}
-
- } @else { - - } - - + @if (dataSourceTable != null) { +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {{ "ListGears_Header_Id" | translate }} + {{ element.id }} + {{ "ListGears_Header_Name" | translate }} + + {{ element.name }} + + {{ "ListGears_Header_Manufacturer" | translate }} + + {{ element.manufacturer }} + + {{ "ListGears_Header_CanopySize" | translate }} + + {{ element.minSize }} - {{ element.maxSize }} + + {{ "ListGears_Header_Aad" | translate }} + + {{ element.aad }} + + {{ "ListGears_Header_Main" | translate }} + + {{ element.mainCanopy }} + + {{ "ListGears_Header_Reserve" | translate }} + + {{ element.reserveCanopy }} +
+
+ } @else { + + } +
diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts index 5ea4cd0..d8c3bc7 100644 --- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts @@ -14,75 +14,75 @@ import { AddAction } from "../../models/add-action.enum"; import { NewGearComponent } from "../new-gear/new-gear.component"; @Component({ - selector: "app-list-of-gears", - templateUrl: "./list-of-gears.component.html", - styleUrls: ["./list-of-gears.component.css"], - imports: [ - TranslateModule, - MatPaginatorModule, - MatProgressSpinnerModule, - MatTableModule, - MatButtonModule -], + selector: "app-list-of-gears", + templateUrl: "./list-of-gears.component.html", + styleUrls: ["./list-of-gears.component.css"], + imports: [ + TranslateModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatTableModule, + MatButtonModule, + ], }) export class ListOfGearsComponent implements OnInit { - public displayedColumns: Array = [ - "name", - "manufacturer", - "maxSize", - "aad", - "mainCanopy", - "reserveCanopy", - ]; - public dataSourceTable: MatTableDataSource; - public resultsLength = 0; - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public displayedColumns: Array = [ + "name", + "manufacturer", + "maxSize", + "aad", + "mainCanopy", + "reserveCanopy", + ]; + public dataSourceTable: MatTableDataSource; + public resultsLength = 0; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor( - private serviceApi: GearService, - private serviceComm: ServiceComm, - public dialog: MatDialog, - private translateService: TranslateService - ) {} + constructor( + private serviceApi: GearService, + private serviceComm: ServiceComm, + public dialog: MatDialog, + private translateService: TranslateService, + ) {} + + ngOnInit() { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.Gear) { + this.dialog.closeAll(); + this.getListOfGears(); + } + }); + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.Gear) { - this.dialog.closeAll(); - this.getListOfGears(); - } - }); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + this.getListOfGears(); + } - this.updateTitle(); - this.getListOfGears(); - } + getListOfGears() { + this.serviceApi.getListOfGears().subscribe((data) => { + setTimeout(() => { + data.sort((a, b) => b.id - a.id); + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 500); + }); + } - getListOfGears() { - this.serviceApi.getListOfGears().subscribe((data) => { - setTimeout(() => { - data.sort((a, b) => b.id - a.id); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; - }, 500); - }); - } + openDialogToAdd() { + this.dialog.open(NewGearComponent, { + height: "400px", + width: "600px", + }); + } - openDialogToAdd() { - this.dialog.open(NewGearComponent, { - height: "400px", - width: "600px", - }); - } - - private updateTitle() { - this.translateService.get("ListGears_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("ListGears_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css index 804593e..6406e37 100644 --- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css +++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css @@ -1,45 +1,45 @@ .imgmodal { - display: none; - position: fixed; - z-index: 1000; - padding-top: 10px; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: #000000; + display: none; + position: fixed; + z-index: 1000; + padding-top: 10px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: #000000; } .imgbox { - display: grid; - height: 100%; + display: grid; + height: 100%; } .center-fit { - max-width: 100%; - max-height: 100vh; - margin: auto; + max-width: 100%; + max-height: 100vh; + margin: auto; } .close { - color: white; - position: absolute; - top: 10px; - right: 25px; - font-size: 35px; - font-weight: bold; + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; } .rotate { - color: white; - position: absolute; - top: 10px; - right: 65px; - font-size: 35px; - font-weight: bold; + color: white; + position: absolute; + top: 10px; + right: 65px; + font-size: 35px; + font-weight: bold; } .cursor { - cursor: pointer; -} \ No newline at end of file + cursor: pointer; +} diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html index ec67a85..ee9967f 100644 --- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html +++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html @@ -1,86 +1,103 @@
-
-

- -

-

- - Comment about the image - - -

+

+ +

+

+ + Comment about the image + + +

- - -
+ + +
@if (resultsLength > 0) { -
- - - - - - - - - - - -
- Comments - - {{ element.comment }} - - Image - - image -
- -
+
+ + + + + + + + + + + +
+ Comments + + {{ + element.comment + }} + + Image + + image +
+ +
}
- × - -
- -
+ class="imgmodal" + [ngStyle]="{ display: showPopin === true ? 'block' : 'none' }" +> + × + +
+ +
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts index bc99f85..0ec8406 100644 --- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit, ViewChild } from "@angular/core"; import { - FormGroup, - FormControl, - Validators, - ReactiveFormsModule, + FormGroup, + FormControl, + Validators, + ReactiveFormsModule, } from "@angular/forms"; import { MatTableDataSource, MatTableModule } from "@angular/material/table"; import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator"; @@ -21,139 +21,144 @@ import { ImageResp } from "../../models/image"; import { AddAction } from "../../models/add-action.enum"; @Component({ - selector: "app-list-of-images", - templateUrl: "./list-of-images.component.html", - styleUrls: ["./list-of-images.component.css"], - animations: [ - trigger("rotatedState", [ - state("default", style({ transform: "rotate(0)" })), - state("rot90", style({ transform: "rotate(-90deg)" })), - state("rot180", style({ transform: "rotate(-180deg)" })), - state("rot270", style({ transform: "rotate(-270deg)" })), - ]), - ], - imports: [ - TranslateModule, - CommonModule, - MatIconModule, - MatPaginatorModule, - MatFormFieldModule, - ReactiveFormsModule, - MatTableModule, - MatButtonModule, - MatInputModule, - ], + selector: "app-list-of-images", + templateUrl: "./list-of-images.component.html", + styleUrls: ["./list-of-images.component.css"], + animations: [ + trigger("rotatedState", [ + state("default", style({ transform: "rotate(0)" })), + state("rot90", style({ transform: "rotate(-90deg)" })), + state("rot180", style({ transform: "rotate(-180deg)" })), + state("rot270", style({ transform: "rotate(-270deg)" })), + ]), + ], + imports: [ + TranslateModule, + CommonModule, + MatIconModule, + MatPaginatorModule, + MatFormFieldModule, + ReactiveFormsModule, + MatTableModule, + MatButtonModule, + MatInputModule, + ], }) export class ListOfImagesComponent implements OnInit { - public displayedColumns: Array = ["comment", "data"]; - public imgForm: FormGroup; - public imageError: string; - private selectedFile: string; - public popinImage: string; - public showPopin: boolean; - public dataSourceTable: MatTableDataSource; - public resultsLength = 0; - public stateRotation: string = "default"; - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public displayedColumns: Array = ["comment", "data"]; + public imgForm: FormGroup; + public imageError: string; + private selectedFile: string; + public popinImage: string; + public showPopin: boolean; + public dataSourceTable: MatTableDataSource; + public resultsLength = 0; + public stateRotation: string = "default"; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor( - private serviceApi: ImageService, - private serviceComm: ServiceComm, - ) {} + constructor( + private serviceApi: ImageService, + private serviceComm: ServiceComm, + ) {} - ngOnInit(): void { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.Gear) { + ngOnInit(): void { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.Gear) { + this.getListOfImages(); + } + }); this.getListOfImages(); - } - }); - this.getListOfImages(); - this.imgForm = new FormGroup({ - comment: new FormControl("", Validators.required), - image: new FormControl("", Validators.required), - }); - } - - private getListOfImages() { - this.serviceApi.getListOfImages().subscribe((data) => { - setTimeout(() => { - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; - }, 500); - }); - } - - public onFileChanged(fileInput: any) { - const file = fileInput.dataTransfer - ? fileInput.dataTransfer.files[0] - : fileInput.target.files[0]; - const allowed_types = ["image/png", "image/jpeg"]; - const max_size = 20971520; - - if (!allowed_types.includes(file.type)) { - this.imageError = "Only Images are allowed ( JPG | PNG )"; - } else if (file.size > max_size) { - this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb"; - } else { - const reader = new FileReader(); - reader.onload = this.checkAndExtractDataToBase64.bind(this); - reader.readAsDataURL(fileInput.target.files[0]); - } - } - - private checkAndExtractDataToBase64(e: any) { - const max_height = 15200; - const max_width = 25600; - - const image = new Image(); - image.src = e.target.result; - image.onload = (rs) => { - const img_height = rs.currentTarget["height"]; - const img_width = rs.currentTarget["width"]; - - if (img_height > max_height && img_width > max_width) { - this.imageError = - "Maximum dimentions allowed " + max_height + "*" + max_width + "px"; - } else { - const imgBase64Path = e.target.result; - this.selectedFile = imgBase64Path; - this.imageError = "OK"; - } - }; - } - - onSubmit(formData) { - if (formData.invalid) { - return; + this.imgForm = new FormGroup({ + comment: new FormControl("", Validators.required), + image: new FormControl("", Validators.required), + }); } - this.serviceApi - .addImage(formData.comment, this.selectedFile) - .subscribe(() => { - this.getListOfImages(); - }); - } - - openModal(image: ImageResp) { - this.popinImage = image.data; - this.showPopin = true; - } - - closeModal() { - this.showPopin = false; - } - - rotate() { - if (this.stateRotation === "default") { - this.stateRotation = "rot90"; - } else if (this.stateRotation === "rot90") { - this.stateRotation = "rot180"; - } else if (this.stateRotation === "rot180") { - this.stateRotation = "rot270"; - } else { - this.stateRotation = "default"; + private getListOfImages() { + this.serviceApi.getListOfImages().subscribe((data) => { + setTimeout(() => { + this.dataSourceTable = new MatTableDataSource(data); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 500); + }); + } + + public onFileChanged(fileInput: any) { + const file = fileInput.dataTransfer + ? fileInput.dataTransfer.files[0] + : fileInput.target.files[0]; + const allowed_types = ["image/png", "image/jpeg"]; + const max_size = 20971520; + + if (!allowed_types.includes(file.type)) { + this.imageError = "Only Images are allowed ( JPG | PNG )"; + } else if (file.size > max_size) { + this.imageError = + "Maximum size allowed is " + max_size / 1000 + "Mb"; + } else { + const reader = new FileReader(); + reader.onload = this.checkAndExtractDataToBase64.bind(this); + reader.readAsDataURL(fileInput.target.files[0]); + } + } + + private checkAndExtractDataToBase64(e: any) { + const max_height = 15200; + const max_width = 25600; + + const image = new Image(); + image.src = e.target.result; + image.onload = (rs) => { + const img_height = rs.currentTarget["height"]; + const img_width = rs.currentTarget["width"]; + + if (img_height > max_height && img_width > max_width) { + this.imageError = + "Maximum dimentions allowed " + + max_height + + "*" + + max_width + + "px"; + } else { + const imgBase64Path = e.target.result; + this.selectedFile = imgBase64Path; + this.imageError = "OK"; + } + }; + } + + onSubmit(formData) { + if (formData.invalid) { + return; + } + + this.serviceApi + .addImage(formData.comment, this.selectedFile) + .subscribe(() => { + this.getListOfImages(); + }); + } + + openModal(image: ImageResp) { + this.popinImage = image.data; + this.showPopin = true; + } + + closeModal() { + this.showPopin = false; + } + + rotate() { + if (this.stateRotation === "default") { + this.stateRotation = "rot90"; + } else if (this.stateRotation === "rot90") { + this.stateRotation = "rot180"; + } else if (this.stateRotation === "rot180") { + this.stateRotation = "rot270"; + } else { + this.stateRotation = "default"; + } } - } } diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css index ff391a1..04e46a6 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css @@ -1,22 +1,22 @@ table { - width: 100%; + width: 100%; } .mat-row td { - padding: 15px; + padding: 15px; } .spanWithBreakWord { - display: inline-block; - min-width: 200px; - word-wrap: break-word; + display: inline-block; + min-width: 200px; + word-wrap: break-word; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html index d46c59c..addb09c 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html @@ -1,35 +1,42 @@
- @if (dataSourceTable != null) { -
- @if (isUserAdmin == true) { - - } - - - - - - - - - - - -
- {{ "ListJumpType_Header_Id" | translate }} - {{ element.id }} - {{ "ListJumpType_Header_Name" | translate }} - {{ element.name }}
-
- } @else { - - } - - + @if (dataSourceTable != null) { +
+ @if (isUserAdmin == true) { + + } + + + + + + + + + + + +
+ {{ "ListJumpType_Header_Id" | translate }} + {{ element.id }} + {{ "ListJumpType_Header_Name" | translate }} + + {{ element.name }} +
+
+ } @else { + + } +
diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts index 31a765f..37a5410 100644 --- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts @@ -15,70 +15,72 @@ import { AuthenticationService } from "../../services/authentication.service"; import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component"; @Component({ - selector: "app-list-of-jump-types", - templateUrl: "./list-of-jump-types.component.html", - styleUrls: ["./list-of-jump-types.component.css"], - imports: [ - TranslateModule, - MatPaginatorModule, - MatProgressSpinnerModule, - MatTableModule, - MatButtonModule -], + selector: "app-list-of-jump-types", + templateUrl: "./list-of-jump-types.component.html", + styleUrls: ["./list-of-jump-types.component.css"], + imports: [ + TranslateModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatTableModule, + MatButtonModule, + ], }) export class ListOfJumpTypesComponent implements OnInit { - public displayedColumns: Array = ["name"]; - public dataSourceTable: MatTableDataSource; - public isUserAdmin: boolean; - public resultsLength = 0; - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public displayedColumns: Array = ["name"]; + public dataSourceTable: MatTableDataSource; + public isUserAdmin: boolean; + public resultsLength = 0; + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor( - private serviceApi: JumpTypeService, - private serviceComm: ServiceComm, - private authenticationService: AuthenticationService, - public dialog: MatDialog, - private translateService: TranslateService - ) { - this.isUserAdmin = - this.authenticationService.currentUserValue.roles === "admin"; - } + constructor( + private serviceApi: JumpTypeService, + private serviceComm: ServiceComm, + private authenticationService: AuthenticationService, + public dialog: MatDialog, + private translateService: TranslateService, + ) { + this.isUserAdmin = + this.authenticationService.currentUserValue.roles === "admin"; + } + + ngOnInit() { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.JumpType) { + this.dialog.closeAll(); + this.getListOfJumpTypes(); + } + }); + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.JumpType) { - this.dialog.closeAll(); - this.getListOfJumpTypes(); - } - }); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + this.getListOfJumpTypes(); + } - this.updateTitle(); - this.getListOfJumpTypes(); - } + getListOfJumpTypes() { + this.serviceApi.getListOfJumpTypes().subscribe((data) => { + setTimeout(() => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.dataSourceTable = new MatTableDataSource( + data, + ); + this.dataSourceTable.paginator = this.paginator; + this.resultsLength = data.length; + }, 500); + }); + } - getListOfJumpTypes() { - this.serviceApi.getListOfJumpTypes().subscribe((data) => { - setTimeout(() => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.dataSourceTable = new MatTableDataSource(data); - this.dataSourceTable.paginator = this.paginator; - this.resultsLength = data.length; - }, 500); - }); - } + openDialogToAdd() { + this.dialog.open(NewJumpTypeComponent); + } - openDialogToAdd() { - this.dialog.open(NewJumpTypeComponent); - } - - private updateTitle() { - this.translateService.get("ListJumpTypes_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("ListJumpTypes_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css index 28559ab..372df31 100644 --- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css +++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css @@ -1,32 +1,32 @@ table { - width: 100%; + width: 100%; } .mat-row td { - padding: 15px; + padding: 15px; } .spanWithBreakWord { - display: inline-block; - min-width: 200px; - word-wrap: break-word; + display: inline-block; + min-width: 200px; + word-wrap: break-word; } .smallSpanWithBreakWord { - display: inline-block; - min-width: 50px; - word-wrap: break-word; + display: inline-block; + min-width: 50px; + word-wrap: break-word; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } th.mat-header-cell { - text-align: center; -} \ No newline at end of file + text-align: center; +} diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html index 2785662..43a8f4b 100644 --- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html +++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html @@ -1,166 +1,176 @@
-
- -
+
+ +
- @if (isLoading) { - - } + @if (isLoading) { + + } -
- - - - - +
+
- - - -
+ + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
+ + + + - {{ "ListJump_Header_Num" | translate }} - - {{ - paginator.length - (paginator.pageIndex * paginator.pageSize + i) - }} - + {{ "ListJump_Header_Num" | translate }} + + {{ + paginator.length - + (paginator.pageIndex * paginator.pageSize + i) + }} + - {{ "ListJump_Header_Date" | translate }} - - - + {{ "ListJump_Header_Date" | translate }} + + + - {{ "ListJump_Header_JumpType" | translate }} - - - + {{ "ListJump_Header_JumpType" | translate }} + + + - {{ "ListJump_Header_Aircraft" | translate }} - - - + {{ "ListJump_Header_Aircraft" | translate }} + + + - {{ "ListJump_Header_Dz" | translate }} - - - + {{ "ListJump_Header_Dz" | translate }} + + + - {{ "ListJump_Header_Id" | translate }} - {{ element.gear.name }} + {{ "ListJump_Header_Id" | translate }} + + {{ element.gear.name }} + - - - + + +
-
+ + + +
- + diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts index 15aafc9..aaeced8 100644 --- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit, ViewChild } from "@angular/core"; import { RouterLink, RouterModule } from "@angular/router"; import { - MatPaginator, - MatPaginatorModule, - PageEvent, + MatPaginator, + MatPaginatorModule, + PageEvent, } from "@angular/material/paginator"; import { MatTableDataSource, MatTableModule } from "@angular/material/table"; import { MatDialog } from "@angular/material/dialog"; @@ -25,108 +25,108 @@ import { JumpInfosComponent } from "../jump-infos/jump-infos.component"; import { StatsService } from "../../services/stats.service"; @Component({ - selector: "app-list-of-jumps", - templateUrl: "./list-of-jumps.component.html", - styleUrls: ["./list-of-jumps.component.css"], - imports: [ - TranslateModule, - CommonModule, - RouterLink, - RouterModule, - MatIconModule, - MatPaginatorModule, - MatProgressSpinnerModule, - MatProgressBarModule, - MatTableModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - ], + selector: "app-list-of-jumps", + templateUrl: "./list-of-jumps.component.html", + styleUrls: ["./list-of-jumps.component.css"], + imports: [ + TranslateModule, + CommonModule, + RouterLink, + RouterModule, + MatIconModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatProgressBarModule, + MatTableModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class ListOfJumpsComponent implements OnInit { - public displayedColumns: Array = [ - "infos", - "id", - "jumpDate", - "jumpType", - "aircraft", - "dropZone", - "actions", - ]; - public dataSourceTable: MatTableDataSource = new MatTableDataSource(); - @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - public isLoading: boolean = false; + public displayedColumns: Array = [ + "infos", + "id", + "jumpDate", + "jumpType", + "aircraft", + "dropZone", + "actions", + ]; + public dataSourceTable: MatTableDataSource = new MatTableDataSource(); + @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; + public isLoading: boolean = false; - constructor( - private serviceApi: JumpService, - private serviceComm: ServiceComm, - public dialog: MatDialog, - private translateService: TranslateService, - private statsService: StatsService - ) {} + constructor( + private serviceApi: JumpService, + private serviceComm: ServiceComm, + public dialog: MatDialog, + private translateService: TranslateService, + private statsService: StatsService, + ) {} - ngAferViewInit(): void { - this.dataSourceTable.paginator = this.paginator; - } + ngAferViewInit(): void { + this.dataSourceTable.paginator = this.paginator; + } + + ngOnInit() { + this.serviceComm.refreshRequest.subscribe((action) => { + if (action === AddAction.Jump) { + this.dialog.closeAll(); + this.getListOfJumps(); + } + }); + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.refreshRequest.subscribe((action) => { - if (action === AddAction.Jump) { - this.dialog.closeAll(); - this.getListOfJumps(); - } - }); - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + this.getListOfJumps(); + } - this.updateTitle(); - this.getListOfJumps(); - } + getListOfJumps(pageSize: number = 20, pageIndex: number = 0) { + this.isLoading = true; - getListOfJumps(pageSize: number = 20, pageIndex: number = 0) { - this.isLoading = true; + this.serviceApi + .getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize) + .subscribe((data) => { + this.dataSourceTable.data = data.rows; + setTimeout(() => { + this.paginator.length = data.count; + this.paginator.pageIndex = pageIndex; + this.isLoading = false; + }, 500); + }); + } - this.serviceApi - .getJumps(pageIndex * pageSize, pageIndex * pageSize + pageSize) - .subscribe((data) => { - this.dataSourceTable.data = data.rows; - setTimeout(() => { - this.paginator.length = data.count; - this.paginator.pageIndex = pageIndex; - this.isLoading = false; - }, 500); - }); - } + openDialog(item: Jump, editMode: boolean) { + this.dialog.open(JumpInfosComponent, { + data: { jump: item, editMode: editMode }, + maxHeight: "400px", + minWidth: "350px", + }); + } - openDialog(item: Jump, editMode: boolean) { - this.dialog.open(JumpInfosComponent, { - data: { jump: item, editMode: editMode }, - maxHeight: "400px", - minWidth: "350px", - }); - } + delete(item: Jump) { + let data: Array = this.dataSourceTable.data; + data = data.filter((d) => d.id !== item.id); - delete(item: Jump) { - let data: Array = this.dataSourceTable.data; - data = data.filter((d) => d.id !== item.id); + this.dataSourceTable.data = data; - this.dataSourceTable.data = data; + this.serviceApi.deleteJump(item); + this.statsService.resetStats(); + } - this.serviceApi.deleteJump(item); - this.statsService.resetStats(); - } + pageChanged(event: PageEvent) { + this.getListOfJumps(event.pageSize, event.pageIndex); + } - pageChanged(event: PageEvent) { - this.getListOfJumps(event.pageSize, event.pageIndex); - } - - private updateTitle() { - this.translateService.get("ListJumps_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("ListJumps_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css index d52e6a2..a58b82b 100644 --- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css +++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.css @@ -1,24 +1,24 @@ .formListTunnelFlight { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } .chart-container { - position: relative; - margin: auto; - height: 80vh; - width: 80vw; + position: relative; + margin: auto; + height: 80vh; + width: 80vw; } diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html index e98ae39..0778389 100644 --- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html +++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html @@ -1,133 +1,147 @@
-
- -
- - @if (isLoading) { - - } - - - {{ - "ListTunnelFlight_CurrentYear" | translate - }} - {{ - "ListTunnelFlight_12Months" | translate - }} - {{ - "ListTunnelFlight_AllFlights" | translate - }} - - - - @for (stat of stats; track stat) { - - - - } - - -
- - - -
- -
- - - @if (dataSourceTable?.data.length) { - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID - - Tunnel - - Jump Type - - Minutes - - Notes - - Date - - - -
+ {{ "ListTunnelFlight_Add" | translate }} + +
+ + @if (isLoading) { + } -
+ + + {{ + "ListTunnelFlight_CurrentYear" | translate + }} + {{ + "ListTunnelFlight_12Months" | translate + }} + {{ + "ListTunnelFlight_AllFlights" | translate + }} + + + + @for (stat of stats; track stat) { + + + + } + + +
+ + + +
+ +
+ + + @if (dataSourceTable?.data.length) { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID + + Tunnel + + Jump Type + + Minutes + + Notes + + Date + + + +
+ } +
diff --git a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts index a2e820e..67268cc 100644 --- a/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts +++ b/Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts @@ -22,257 +22,274 @@ import { DateService } from "../../services/date.service"; import { TunnelFlight, TunnelFlightByMonth } from "../../models/tunnel-flight"; @Component({ - selector: "app-list-of-tunnel-flights", - templateUrl: "./list-of-tunnel-flights.component.html", - styleUrls: ["./list-of-tunnel-flights.component.css"], - imports: [ - TranslateModule, - BaseChartDirective, - CommonModule, - MatIconModule, - MatListModule, - MatProgressSpinnerModule, - RouterLink, - MatRadioModule, - MatProgressBarModule, - FormsModule, - RouterModule, - MatTableModule, - MatButtonModule, - ], + selector: "app-list-of-tunnel-flights", + templateUrl: "./list-of-tunnel-flights.component.html", + styleUrls: ["./list-of-tunnel-flights.component.css"], + imports: [ + TranslateModule, + BaseChartDirective, + CommonModule, + MatIconModule, + MatListModule, + MatProgressSpinnerModule, + RouterLink, + MatRadioModule, + MatProgressBarModule, + FormsModule, + RouterModule, + MatTableModule, + MatButtonModule, + ], }) export class ListOfTunnelFlightsComponent implements OnInit { - public barChartLegend = true; - public barChartData: ChartData<"bar">; - public barChartOptions: ChartConfiguration["options"]; - public barChartType: ChartType; - public isLoading: boolean = false; - public selectedPeriod: string; - public dataSourceTable: MatTableDataSource = - new MatTableDataSource(); - public displayedColumns: Array = [ - "id", - "tunnel", - "jumpType", - "nbMinutes", - "notes", - "flightDate", - "actions", - ]; - public stats: Array<{ id: String | Number; values: String | Number }> = []; + public barChartLegend = true; + public barChartData: ChartData<"bar">; + public barChartOptions: ChartConfiguration["options"]; + public barChartType: ChartType; + public isLoading: boolean = false; + public selectedPeriod: string; + public dataSourceTable: MatTableDataSource = + new MatTableDataSource(); + public displayedColumns: Array = [ + "id", + "tunnel", + "jumpType", + "nbMinutes", + "notes", + "flightDate", + "actions", + ]; + public stats: Array<{ id: String | Number; values: String | Number }> = []; - constructor( - private serviceComm: ServiceComm, - private serviceTunnelFlight: TunnelFlightService, - private translateService: TranslateService, - private dateService: DateService - ) {} + constructor( + private serviceComm: ServiceComm, + private serviceTunnelFlight: TunnelFlightService, + private translateService: TranslateService, + private dateService: DateService, + ) {} - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { - this.updateTitle(); - } - }); - this.updateTitle(); - - this.chartConfig(); - this.selectedPeriod = "currentYear"; - this.getDataForGraph(); - } - - public onPeriodChange() { - this.getDataForGraph(); - if (this.dataSourceTable?.data.length > 0) { - this.getDataForTable(); - } - } - - public onLoadTable() { - this.getDataForTable(); - } - - private chartConfig() { - this.barChartType = "bar"; - this.barChartOptions = { - responsive: true, - maintainAspectRatio: true, - plugins: { - legend: { - display: true, - }, - tooltip: { - callbacks: { - footer: this.footer, - }, - }, - }, - interaction: { - intersect: false, - mode: "nearest", - axis: "x", - }, - scales: { - x: { - stacked: true, - }, - y: { - stacked: true, - }, - }, - }; - } - - private updateTitle() { - this.translateService.get("ListTunnelFlight_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } - - private getDataForTable(): void { - this.isLoading = true; - - // Get data to show in a table - let endDate = new Date(); - endDate.setHours(0, 0, 0, 0); - let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate); - - this.serviceTunnelFlight - .getTunnelFlights(beginDate, endDate) - .subscribe((data) => { - this.dataSourceTable.data = data; - this.isLoading = false; - }); - } - - private getDataForGraph(): void { - this.isLoading = true; - - // Get data to show in a table - let endDate = new Date(); - endDate.setHours(0, 0, 0, 0); - let beginDate = this.computeBeginDateByPeriod(this.selectedPeriod, endDate); - - this.serviceTunnelFlight - .getTunnelFlightsByMonth(beginDate, endDate) - .subscribe((data) => { - const allMonths = this.getMontsBetweenDates(beginDate, endDate); - const cumulatedTime = this.getCumulatedTimeByTypeByMonth( - data, - allMonths - ); - this.computeTimeByType(data); - this.barChartData = { - labels: allMonths, - datasets: cumulatedTime, - }; - - this.isLoading = false; - }); - } - - private computeTimeByType(stats: TunnelFlightByMonth[]) { - this.stats = []; - from(stats) - .pipe( - groupBy((type) => type.type, { element: (p) => p.nb }), - mergeMap((group$) => - group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`])) - ), - map((arr) => ({ - id: arr[0], - values: arr.slice(1).reduce((a, b) => Number(a) + Number(b), 0), - })) - ) - .subscribe((p) => { - console.log(p); - this.stats.push(p); - }); - } - - private getMontsBetweenDates(beginDate: Date, endDate: Date): Array { - let results: Array = []; - let tmpBeginDate = new Date(beginDate.getTime()); - const tmpEndDate = new Date(endDate.getTime()); - - while (tmpBeginDate < tmpEndDate) { - results.push(formatDate(tmpBeginDate, "yy-MM", "en")); - tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1); - } - - return results; - } - - private getCumulatedTimeByTypeByMonth( - stats: TunnelFlightByMonth[], - allMonths: string[] - ): Array { - let tmpResults = new Map(); - - const disctintType = Array.from(new Set(stats.map((item) => item.type))); - disctintType.forEach((type) => { - tmpResults.set( - type, - Array.from({ length: allMonths.length }, (v, k) => 0) - ); - }); - - for (let i = 0; i < allMonths.length; i++) { - const month = allMonths[i]; - let filteredStats = stats.filter((d) => d.month == month); - - if (filteredStats.length > 0) { - filteredStats.forEach((fs) => { - tmpResults.get(fs.type)[i] += fs.nb; + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } }); - } + this.updateTitle(); + + this.chartConfig(); + this.selectedPeriod = "currentYear"; + this.getDataForGraph(); } - const results = Array.from(tmpResults, function (item) { - return { label: item[0], data: item[1] }; - }); - - return results; - } - - private footer = (tooltipItems: any) => { - let sum = 0; - - tooltipItems.forEach(function (tooltipItem: any) { - sum += tooltipItem.parsed.y; - }); - - return "Sum: " + sum; - }; - - private computeBeginDateByPeriod( - selectedPeriod: String, - endDate: Date - ): Date { - let beginDate = new Date(); - - switch (selectedPeriod) { - case "currentYear": - beginDate = new Date(endDate.getFullYear(), 0, 1); - break; - case "12Months": - beginDate = this.dateService.addMonths(endDate, -12); - beginDate.setDate(1); - break; - case "all": - beginDate = this.dateService.addMonths(endDate, -120); - beginDate.setDate(1); - break; + public onPeriodChange() { + this.getDataForGraph(); + if (this.dataSourceTable?.data.length > 0) { + this.getDataForTable(); + } } - return beginDate; - } + public onLoadTable() { + this.getDataForTable(); + } - public delete(item: TunnelFlight) { - let data: Array = this.dataSourceTable.data; - data = data.filter((d) => d.id !== item.id); + private chartConfig() { + this.barChartType = "bar"; + this.barChartOptions = { + responsive: true, + maintainAspectRatio: true, + plugins: { + legend: { + display: true, + }, + tooltip: { + callbacks: { + footer: this.footer, + }, + }, + }, + interaction: { + intersect: false, + mode: "nearest", + axis: "x", + }, + scales: { + x: { + stacked: true, + }, + y: { + stacked: true, + }, + }, + }; + } - this.dataSourceTable.data = data; - this.serviceTunnelFlight.deleteTunnelFlight(item); - } + private updateTitle() { + this.translateService + .get("ListTunnelFlight_Title") + .subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } + + private getDataForTable(): void { + this.isLoading = true; + + // Get data to show in a table + let endDate = new Date(); + endDate.setHours(0, 0, 0, 0); + let beginDate = this.computeBeginDateByPeriod( + this.selectedPeriod, + endDate, + ); + + this.serviceTunnelFlight + .getTunnelFlights(beginDate, endDate) + .subscribe((data) => { + this.dataSourceTable.data = data; + this.isLoading = false; + }); + } + + private getDataForGraph(): void { + this.isLoading = true; + + // Get data to show in a table + let endDate = new Date(); + endDate.setHours(0, 0, 0, 0); + let beginDate = this.computeBeginDateByPeriod( + this.selectedPeriod, + endDate, + ); + + this.serviceTunnelFlight + .getTunnelFlightsByMonth(beginDate, endDate) + .subscribe((data) => { + const allMonths = this.getMontsBetweenDates(beginDate, endDate); + const cumulatedTime = this.getCumulatedTimeByTypeByMonth( + data, + allMonths, + ); + this.computeTimeByType(data); + this.barChartData = { + labels: allMonths, + datasets: cumulatedTime, + }; + + this.isLoading = false; + }); + } + + private computeTimeByType(stats: TunnelFlightByMonth[]) { + this.stats = []; + from(stats) + .pipe( + groupBy((type) => type.type, { element: (p) => p.nb }), + mergeMap((group$) => + group$.pipe( + reduce((acc, cur) => [...acc, cur], [`${group$.key}`]), + ), + ), + map((arr) => ({ + id: arr[0], + values: arr + .slice(1) + .reduce((a, b) => Number(a) + Number(b), 0), + })), + ) + .subscribe((p) => { + console.log(p); + this.stats.push(p); + }); + } + + private getMontsBetweenDates( + beginDate: Date, + endDate: Date, + ): Array { + let results: Array = []; + let tmpBeginDate = new Date(beginDate.getTime()); + const tmpEndDate = new Date(endDate.getTime()); + + while (tmpBeginDate < tmpEndDate) { + results.push(formatDate(tmpBeginDate, "yy-MM", "en")); + tmpBeginDate.setMonth(tmpBeginDate.getMonth() + 1); + } + + return results; + } + + private getCumulatedTimeByTypeByMonth( + stats: TunnelFlightByMonth[], + allMonths: string[], + ): Array { + let tmpResults = new Map(); + + const disctintType = Array.from( + new Set(stats.map((item) => item.type)), + ); + disctintType.forEach((type) => { + tmpResults.set( + type, + Array.from({ length: allMonths.length }, (v, k) => 0), + ); + }); + + for (let i = 0; i < allMonths.length; i++) { + const month = allMonths[i]; + let filteredStats = stats.filter((d) => d.month == month); + + if (filteredStats.length > 0) { + filteredStats.forEach((fs) => { + tmpResults.get(fs.type)[i] += fs.nb; + }); + } + } + + const results = Array.from(tmpResults, function (item) { + return { label: item[0], data: item[1] }; + }); + + return results; + } + + private footer = (tooltipItems: any) => { + let sum = 0; + + tooltipItems.forEach(function (tooltipItem: any) { + sum += tooltipItem.parsed.y; + }); + + return "Sum: " + sum; + }; + + private computeBeginDateByPeriod( + selectedPeriod: String, + endDate: Date, + ): Date { + let beginDate = new Date(); + + switch (selectedPeriod) { + case "currentYear": + beginDate = new Date(endDate.getFullYear(), 0, 1); + break; + case "12Months": + beginDate = this.dateService.addMonths(endDate, -12); + beginDate.setDate(1); + break; + case "all": + beginDate = this.dateService.addMonths(endDate, -120); + beginDate.setDate(1); + break; + } + + return beginDate; + } + + public delete(item: TunnelFlight) { + let data: Array = this.dataSourceTable.data; + data = data.filter((d) => d.id !== item.id); + + this.dataSourceTable.data = data; + this.serviceTunnelFlight.deleteTunnelFlight(item); + } } diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.html b/Front/skydivelogs-app/src/app/login-user/login-user.component.html index fdebc60..3ab3f2f 100644 --- a/Front/skydivelogs-app/src/app/login-user/login-user.component.html +++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.html @@ -1,62 +1,66 @@
-

- - {{ "LoginUser_Username" | translate }} - - @if (formCtrls['username'].hasError('required')) { - - {{ "LoginUser_UsernameRequired" | translate }} - - } - @if (formCtrls['username'].hasError('minlength')) { - - {{ 'LoginUser_UsernamePattern | translate }} - - } - -

-

- - {{ "LoginUser_Password" | translate }} - - @if (formCtrls['password'].hasError('required')) { - - {{ "LoginUser_PasswordRequired" | translate }} - - } - @if (formCtrls['password'].hasError('pattern')) { - - {{ "LoginUser_PasswordPattern" | translate }} - - } - -

+ focusInvalidInput + autocomplete="off" + style="padding: 10px" + [formGroup]="loginForm" + (ngSubmit)="onLoginSubmit()" +> +

+ + {{ "LoginUser_Username" | translate }} + + @if (formCtrls["username"].hasError("required")) { + + {{ "LoginUser_UsernameRequired" | translate }} + + } + @if (formCtrls["username"].hasError("minlength")) { + + {{ 'LoginUser_UsernamePattern | translate }} + + } + +

+

+ + {{ "LoginUser_Password" | translate }} + + @if (formCtrls["password"].hasError("required")) { + + {{ "LoginUser_PasswordRequired" | translate }} + + } + @if (formCtrls["password"].hasError("pattern")) { + + {{ "LoginUser_PasswordPattern" | translate }} + + } + +

- + + @if (error) { +
{{ error }}
} - {{ "LoginUser_BtnLogin" | translate }} - - - @if (error) { -
{{ error }}
- }
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts index 38831a4..c5fcb93 100644 --- a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts +++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts @@ -2,10 +2,10 @@ import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core"; import { Router, ActivatedRoute } from "@angular/router"; import { CommonModule } from "@angular/common"; import { - FormBuilder, - FormGroup, - ReactiveFormsModule, - Validators, + FormBuilder, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { TranslateModule, TranslatePipe } from "@ngx-translate/core"; import { MatInput, MatInputModule } from "@angular/material/input"; @@ -17,72 +17,72 @@ import { first } from "rxjs/operators"; import { AuthenticationService } from "../../services/authentication.service"; @Component({ - selector: "app-login-user", - templateUrl: "./login-user.component.html", - styleUrls: ["./login-user.component.css"], - imports: [ - CommonModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - TranslateModule, - TranslatePipe, - MatButtonModule, - ], + selector: "app-login-user", + templateUrl: "./login-user.component.html", + styleUrls: ["./login-user.component.css"], + imports: [ + CommonModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + TranslateModule, + TranslatePipe, + MatButtonModule, + ], }) export class LoginUserComponent implements OnInit { - public loginForm: FormGroup; - public loading = false; - public submitted = false; - public returnUrl: string; - public error: string = ""; + public loginForm: FormGroup; + public loading = false; + public submitted = false; + public returnUrl: string; + public error: string = ""; - constructor( - private formBuilder: FormBuilder, - private route: ActivatedRoute, - private router: Router, - private authenticationService: AuthenticationService - ) { - if (this.authenticationService.currentUserValue) { - this.router.navigate(["/"]); + constructor( + private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + private authenticationService: AuthenticationService, + ) { + if (this.authenticationService.currentUserValue) { + this.router.navigate(["/"]); + } } - } - ngOnInit() { - this.loginForm = this.formBuilder.group( - { - username: ["", [Validators.required, Validators.minLength(3)]], - password: ["", [Validators.required]], - }, - { updateOn: "submit" } - ); + ngOnInit() { + this.loginForm = this.formBuilder.group( + { + username: ["", [Validators.required, Validators.minLength(3)]], + password: ["", [Validators.required]], + }, + { updateOn: "submit" }, + ); - // get return url from route parameters or default to '/' - this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; - } - - get formCtrls() { - return this.loginForm.controls; - } - - public onLoginSubmit() { - this.submitted = true; - - if (this.loginForm.valid) { - this.loading = true; - this.authenticationService - .login( - this.formCtrls["username"].value, - this.formCtrls["password"].value - ) - .pipe(first()) - .subscribe({ - complete: () => this.router.navigate([this.returnUrl]), - error: (error) => { - this.error = error.message; - this.loading = false; - }, - }); + // get return url from route parameters or default to '/' + this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; + } + + get formCtrls() { + return this.loginForm.controls; + } + + public onLoginSubmit() { + this.submitted = true; + + if (this.loginForm.valid) { + this.loading = true; + this.authenticationService + .login( + this.formCtrls["username"].value, + this.formCtrls["password"].value, + ) + .pipe(first()) + .subscribe({ + complete: () => this.router.navigate([this.returnUrl]), + error: (error) => { + this.error = error.message; + this.loading = false; + }, + }); + } } - } } diff --git a/Front/skydivelogs-app/src/app/login/login.component.css b/Front/skydivelogs-app/src/app/login/login.component.css index 8db9a61..dfcef33 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.css +++ b/Front/skydivelogs-app/src/app/login/login.component.css @@ -1,10 +1,10 @@ .content { - height: 90vh; - display: flex; - justify-content: center; - align-items: center; + height: 90vh; + display: flex; + justify-content: center; + align-items: center; } .mat-card-title { - margin: 0 !important; + margin: 0 !important; } diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html index f712a7a..393cd16 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.html +++ b/Front/skydivelogs-app/src/app/login/login.component.html @@ -1,43 +1,51 @@
- - - {{ "Login_Title" | translate }} + + + {{ "Login_Title" | translate }} - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + +
diff --git a/Front/skydivelogs-app/src/app/login/login.component.ts b/Front/skydivelogs-app/src/app/login/login.component.ts index 180ef06..7db5a0e 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.ts +++ b/Front/skydivelogs-app/src/app/login/login.component.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from "@angular/core"; import { - TranslateModule, - TranslatePipe, - TranslateService, + TranslateModule, + TranslatePipe, + TranslateService, } from "@ngx-translate/core"; import { MatSelectModule } from "@angular/material/select"; @@ -14,31 +14,31 @@ import { LoginUserComponent } from "../login-user/login-user.component"; import { CreateUserComponent } from "../create-user/create-user.component"; @Component({ - selector: "app-login", - templateUrl: "./login.component.html", - styleUrls: ["./login.component.css"], - imports: [ - TranslateModule, - MatSelectModule, - MatOptionModule, - MatCardModule, - MatTabsModule, - LoginUserComponent, - CreateUserComponent, - TranslateModule -], + selector: "app-login", + templateUrl: "./login.component.html", + styleUrls: ["./login.component.css"], + imports: [ + TranslateModule, + MatSelectModule, + MatOptionModule, + MatCardModule, + MatTabsModule, + LoginUserComponent, + CreateUserComponent, + TranslateModule, + ], }) export class LoginComponent implements OnInit { - public selectedLanguageFlag: string; + public selectedLanguageFlag: string; - constructor(private translate: TranslateService) { - this.selectedLanguageFlag = "en"; - } + constructor(private translate: TranslateService) { + this.selectedLanguageFlag = "en"; + } - ngOnInit() {} + ngOnInit() {} - public switchLang(event: any) { - this.translate.use(event.value); - this.selectedLanguageFlag = event.value; - } + public switchLang(event: any) { + this.translate.use(event.value); + this.selectedLanguageFlag = event.value; + } } diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css index 33a5371..cdfd171 100644 --- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css +++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.css @@ -1,7 +1,7 @@ .content { - height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; + height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; } diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html index 3db76cd..55534a6 100644 --- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html +++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html @@ -1,16 +1,23 @@
-
-

- - Aircraft name - - -

-

- -

+ +

+ + Aircraft name + + +

+

+ +

- -
+ +
diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts index 63731de..9a790fb 100644 --- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts +++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from "@angular/core"; import { - FormControl, - FormGroup, - ReactiveFormsModule, - Validators, + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -16,101 +16,106 @@ import { AircraftService } from "../../services/aircraft.service"; import { ServiceComm } from "../../services/service-comm.service"; @Component({ - selector: "app-new-aircraft", - templateUrl: "./new-aircraft.component.html", - styleUrls: ["./new-aircraft.component.css"], - imports: [ - TranslateModule, - MatFormFieldModule, - ReactiveFormsModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - ], + selector: "app-new-aircraft", + templateUrl: "./new-aircraft.component.html", + styleUrls: ["./new-aircraft.component.css"], + imports: [ + TranslateModule, + MatFormFieldModule, + ReactiveFormsModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class NewAircraftComponent implements OnInit { - public addForm: FormGroup; - public imageError: string; - private selectedFile: string; + public addForm: FormGroup; + public imageError: string; + private selectedFile: string; - constructor( - private serviceComm: ServiceComm, - private serviceApi: AircraftService, - private translateService: TranslateService, - ) { - this.addForm = new FormGroup( - { - aircraftName: new FormControl("", Validators.required), - }, - { updateOn: "blur" }, - ); - } + constructor( + private serviceComm: ServiceComm, + private serviceApi: AircraftService, + private translateService: TranslateService, + ) { + this.addForm = new FormGroup( + { + aircraftName: new FormControl("", Validators.required), + }, + { updateOn: "blur" }, + ); + } + + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); - - this.updateTitle(); - } - - onSubmit(formData) { - if (formData.invalid) { - return; } - this.serviceApi - .addAircraft(formData.aircraftName, this.selectedFile) - .subscribe(() => { - this.serviceComm.refreshData(AddAction.Aircraft); - }); - } + onSubmit(formData) { + if (formData.invalid) { + return; + } - public onFileChanged(fileInput: any) { - const file = fileInput.dataTransfer - ? fileInput.dataTransfer.files[0] - : fileInput.target.files[0]; - const allowed_types = ["image/png", "image/jpeg"]; - const max_size = 20971520; - - if (!allowed_types.includes(file.type)) { - this.imageError = "Only Images are allowed ( JPG | PNG )"; - } else if (file.size > max_size) { - this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb"; - } else { - const reader = new FileReader(); - reader.onload = this.checkAndExtractDataToBase64.bind(this); - reader.readAsDataURL(fileInput.target.files[0]); + this.serviceApi + .addAircraft(formData.aircraftName, this.selectedFile) + .subscribe(() => { + this.serviceComm.refreshData(AddAction.Aircraft); + }); } - } - private checkAndExtractDataToBase64(e: any) { - const max_height = 15200; - const max_width = 25600; + public onFileChanged(fileInput: any) { + const file = fileInput.dataTransfer + ? fileInput.dataTransfer.files[0] + : fileInput.target.files[0]; + const allowed_types = ["image/png", "image/jpeg"]; + const max_size = 20971520; - const image = new Image(); - image.src = e.target.result; - image.onload = (rs) => { - const img_height = rs.currentTarget["height"]; - const img_width = rs.currentTarget["width"]; + if (!allowed_types.includes(file.type)) { + this.imageError = "Only Images are allowed ( JPG | PNG )"; + } else if (file.size > max_size) { + this.imageError = + "Maximum size allowed is " + max_size / 1000 + "Mb"; + } else { + const reader = new FileReader(); + reader.onload = this.checkAndExtractDataToBase64.bind(this); + reader.readAsDataURL(fileInput.target.files[0]); + } + } - if (img_height > max_height && img_width > max_width) { - this.imageError = - "Maximum dimentions allowed " + max_height + "*" + max_width + "px"; - } else { - const imgBase64Path = e.target.result; - this.selectedFile = imgBase64Path; - this.imageError = "OK"; - } - }; - } + private checkAndExtractDataToBase64(e: any) { + const max_height = 15200; + const max_width = 25600; - private updateTitle() { - this.translateService.get("NewAircraft_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + const image = new Image(); + image.src = e.target.result; + image.onload = (rs) => { + const img_height = rs.currentTarget["height"]; + const img_width = rs.currentTarget["width"]; + + if (img_height > max_height && img_width > max_width) { + this.imageError = + "Maximum dimentions allowed " + + max_height + + "*" + + max_width + + "px"; + } else { + const imgBase64Path = e.target.result; + this.selectedFile = imgBase64Path; + this.imageError = "OK"; + } + }; + } + + private updateTitle() { + this.translateService.get("NewAircraft_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css index 33a5371..cdfd171 100644 --- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css +++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.css @@ -1,7 +1,7 @@ .content { - height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; + height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; } diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html index 0d8a899..831dbf7 100644 --- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html +++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.html @@ -1,42 +1,42 @@
-
-

- - Dropzone name - - -

-

- - GPS - - -

-

- - Address of the DZ - - -

-

- - Web site - - -

-

- - Mail of contact - - -

-

- Is a dropzone -

-

- Is a tunnel -

+ +

+ + Dropzone name + + +

+

+ + GPS + + +

+

+ + Address of the DZ + + +

+

+ + Web site + + +

+

+ + Mail of contact + + +

+

+ Is a dropzone +

+

+ Is a tunnel +

- -
+ +
diff --git a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts index e519f5b..b83fb14 100644 --- a/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts +++ b/Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from "@angular/core"; import { - FormControl, - FormGroup, - ReactiveFormsModule, - Validators, + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -17,87 +17,87 @@ import { ServiceComm } from "../../services/service-comm.service"; import { DropzoneService } from "../../services/dropzone.service"; @Component({ - selector: "app-new-drop-zone", - templateUrl: "./new-drop-zone.component.html", - styleUrls: ["./new-drop-zone.component.css"], - imports: [ - TranslateModule, - MatFormFieldModule, - MatCheckboxModule, - ReactiveFormsModule, - MatFormFieldModule, - MatInputModule, - MatButtonModule, - ], + selector: "app-new-drop-zone", + templateUrl: "./new-drop-zone.component.html", + styleUrls: ["./new-drop-zone.component.css"], + imports: [ + TranslateModule, + MatFormFieldModule, + MatCheckboxModule, + ReactiveFormsModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + ], }) export class NewDropZoneComponent implements OnInit { - public addForm: FormGroup; + public addForm: FormGroup; - constructor( - private serviceComm: ServiceComm, - private dropzoneService: DropzoneService, - private translateService: TranslateService, - ) { - this.addForm = new FormGroup( - { - dzName: new FormControl("", Validators.required), - gps: new FormControl("x.x,y.y", [ - Validators.required, - Validators.pattern("d+.d+,d+.d+"), - ]), - address: new FormControl("", Validators.required), - website: new FormControl("", Validators.required), - contactMail: new FormControl("", [ - Validators.required, - Validators.email, - ]), - isDz: new FormControl(true), - isTunnel: new FormControl(false), - }, - { updateOn: "blur" }, - ); - } + constructor( + private serviceComm: ServiceComm, + private dropzoneService: DropzoneService, + private translateService: TranslateService, + ) { + this.addForm = new FormGroup( + { + dzName: new FormControl("", Validators.required), + gps: new FormControl("x.x,y.y", [ + Validators.required, + Validators.pattern("d+.d+,d+.d+"), + ]), + address: new FormControl("", Validators.required), + website: new FormControl("", Validators.required), + contactMail: new FormControl("", [ + Validators.required, + Validators.email, + ]), + isDz: new FormControl(true), + isTunnel: new FormControl(false), + }, + { updateOn: "blur" }, + ); + } + + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); - - this.updateTitle(); - } - - onSubmit(formData) { - const splitGps: Array = formData.gps.split(","); - let dzType: Array = new Array(); - - if (formData.isDz === true) { - dzType.push("dz"); - } - if (formData.isTunnel === true) { - dzType.push("tunnel"); } - this.dropzoneService - .addDropZone( - splitGps[0], - splitGps[1], - formData.dzName, - formData.address, - formData.website, - formData.contactMail, - dzType, - false, - ) - .subscribe(() => { - this.serviceComm.refreshData(AddAction.Dropzone); - }); - } + onSubmit(formData) { + const splitGps: Array = formData.gps.split(","); + let dzType: Array = new Array(); - private updateTitle() { - this.translateService.get("NewDz_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + if (formData.isDz === true) { + dzType.push("dz"); + } + if (formData.isTunnel === true) { + dzType.push("tunnel"); + } + + this.dropzoneService + .addDropZone( + splitGps[0], + splitGps[1], + formData.dzName, + formData.address, + formData.website, + formData.contactMail, + dzType, + false, + ) + .subscribe(() => { + this.serviceComm.refreshData(AddAction.Dropzone); + }); + } + + private updateTitle() { + this.translateService.get("NewDz_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css index 33a5371..cdfd171 100644 --- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css +++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.css @@ -1,7 +1,7 @@ .content { - height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; + height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; } diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html index ddc1214..f361f46 100644 --- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html +++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.html @@ -1,48 +1,48 @@
-
-

- - Name of gear - - -

-

- - Manufacturer - - -

-

- - Min size of canopy - - -

-

- - Max size of canopy - - -

-

- - AAD system - - -

-

- - Main Canopy - - -

-

- - Reserve canopy - - -

+ +

+ + Name of gear + + +

+

+ + Manufacturer + + +

+

+ + Min size of canopy + + +

+

+ + Max size of canopy + + +

+

+ + AAD system + + +

+

+ + Main Canopy + + +

+

+ + Reserve canopy + + +

- -
+ +
diff --git a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts index 0d26ca6..abc8954 100644 --- a/Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts +++ b/Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from "@angular/core"; import { - FormControl, - FormGroup, - ReactiveFormsModule, - Validators, + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { MatFormFieldModule } from "@angular/material/form-field"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; @@ -15,85 +15,85 @@ import { GearService } from "../../services/gear.service"; import { AddAction } from "../../models/add-action.enum"; @Component({ - selector: "app-new-gear", - templateUrl: "./new-gear.component.html", - styleUrls: ["./new-gear.component.css"], - imports: [ - TranslateModule, - MatFormFieldModule, - ReactiveFormsModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - ], + selector: "app-new-gear", + templateUrl: "./new-gear.component.html", + styleUrls: ["./new-gear.component.css"], + imports: [ + TranslateModule, + MatFormFieldModule, + ReactiveFormsModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class NewGearComponent implements OnInit { - public addForm: FormGroup; + public addForm: FormGroup; - constructor( - private serviceComm: ServiceComm, - private serviceApi: GearService, - private translateService: TranslateService, - ) { - this.addForm = new FormGroup( - { - name: new FormControl("", Validators.required), - manufacturer: new FormControl("", Validators.required), - minSize: new FormControl("", [ - Validators.required, - Validators.min(60), - Validators.max(320), - ]), - maxSize: new FormControl("", [ - Validators.required, - Validators.min(60), - Validators.max(320), - ]), - aad: new FormControl("", Validators.required), - mainCanopy: new FormControl("", [ - Validators.required, - Validators.min(60), - Validators.max(320), - ]), - reserveCanopy: new FormControl("", [ - Validators.required, - Validators.min(60), - Validators.max(320), - ]), - }, - { updateOn: "blur" }, - ); - } + constructor( + private serviceComm: ServiceComm, + private serviceApi: GearService, + private translateService: TranslateService, + ) { + this.addForm = new FormGroup( + { + name: new FormControl("", Validators.required), + manufacturer: new FormControl("", Validators.required), + minSize: new FormControl("", [ + Validators.required, + Validators.min(60), + Validators.max(320), + ]), + maxSize: new FormControl("", [ + Validators.required, + Validators.min(60), + Validators.max(320), + ]), + aad: new FormControl("", Validators.required), + mainCanopy: new FormControl("", [ + Validators.required, + Validators.min(60), + Validators.max(320), + ]), + reserveCanopy: new FormControl("", [ + Validators.required, + Validators.min(60), + Validators.max(320), + ]), + }, + { updateOn: "blur" }, + ); + } + + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + } - this.updateTitle(); - } + onSubmit(formData) { + this.serviceApi + .addGear( + formData.name, + formData.manufacturer, + +formData.minSize, + +formData.maxSize, + formData.aad, + formData.mainCanopy, + formData.reserveCanopy, + ) + .subscribe(() => { + this.serviceComm.refreshData(AddAction.Gear); + }); + } - onSubmit(formData) { - this.serviceApi - .addGear( - formData.name, - formData.manufacturer, - +formData.minSize, - +formData.maxSize, - formData.aad, - formData.mainCanopy, - formData.reserveCanopy, - ) - .subscribe(() => { - this.serviceComm.refreshData(AddAction.Gear); - }); - } - - private updateTitle() { - this.translateService.get("NewGear_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("NewGear_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css index 33a5371..cdfd171 100644 --- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css +++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.css @@ -1,7 +1,7 @@ .content { - height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; + height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; } diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html index 53b2011..933c8ad 100644 --- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html +++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.html @@ -1,12 +1,12 @@
-
-

- - Jump type name - - -

+ +

+ + Jump type name + + +

- -
+ +
diff --git a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts index 86f3c2c..ad6fb7d 100644 --- a/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts +++ b/Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts @@ -1,9 +1,9 @@ import { Component, OnInit } from "@angular/core"; import { - FormControl, - FormGroup, - ReactiveFormsModule, - Validators, + FormControl, + FormGroup, + ReactiveFormsModule, + Validators, } from "@angular/forms"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; import { MatFormFieldModule } from "@angular/material/form-field"; @@ -15,52 +15,54 @@ import { ServiceComm } from "../../services/service-comm.service"; import { JumpTypeService } from "../../services/jump-type.service"; @Component({ - selector: "app-new-jump-type", - templateUrl: "./new-jump-type.component.html", - styleUrls: ["./new-jump-type.component.css"], - imports: [ - TranslateModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - ], + selector: "app-new-jump-type", + templateUrl: "./new-jump-type.component.html", + styleUrls: ["./new-jump-type.component.css"], + imports: [ + TranslateModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class NewJumpTypeComponent implements OnInit { - public addForm: FormGroup; + public addForm: FormGroup; - constructor( - private serviceComm: ServiceComm, - private jumpTypeService: JumpTypeService, - private translateService: TranslateService, - ) { - this.addForm = new FormGroup( - { - jumptypeName: new FormControl("", Validators.required), - }, - { updateOn: "blur" }, - ); - } + constructor( + private serviceComm: ServiceComm, + private jumpTypeService: JumpTypeService, + private translateService: TranslateService, + ) { + this.addForm = new FormGroup( + { + jumptypeName: new FormControl("", Validators.required), + }, + { updateOn: "blur" }, + ); + } + + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { this.updateTitle(); - } - }); + } - this.updateTitle(); - } + onSubmit(formData) { + this.jumpTypeService + .addJumpType(formData.jumptypeName) + .subscribe(() => { + this.serviceComm.refreshData(AddAction.JumpType); + }); + } - onSubmit(formData) { - this.jumpTypeService.addJumpType(formData.jumptypeName).subscribe(() => { - this.serviceComm.refreshData(AddAction.JumpType); - }); - } - - private updateTitle() { - this.translateService.get("NewJumpType_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private updateTitle() { + this.translateService.get("NewJumpType_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css index 0d83a3c..48667b0 100644 --- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css +++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css @@ -1,17 +1,17 @@ .formNewJumps { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html index 1d09622..b98745a 100644 --- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html +++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html @@ -1,278 +1,276 @@
-
- -

- {{ - "NewJump_ResetForm" | translate - }} -

-
+
+ +

+ {{ + "NewJump_ResetForm" | translate + }} +

+
- @if (notLoadingToDisplay()) { -
- - {{ "NewJump_ChooseJumpType" | translate }} - - - @for (jumpType of listOfJumpType; track jumpType) { - - {{ jumpType.name }} - - } - - @if (selectedJumpType) { - - } - - - {{ "NewJump_ChooseAircraft" | translate }} - - - @for (aircraft of listOfAircraft; track aircraft) { - - {{ aircraft.name }} - - } - - @if (selectedAircraft) { - - } - - - {{ "NewJump_ChooseDz" | translate }} - - - @for (dropZone of listOfFilteredDropZone; track dropZone) { - - {{ dropZone.name }} - @if (dropZone.isFavorite === true) { - - favorite + @if (notLoadingToDisplay()) { + + + {{ + "NewJump_ChooseJumpType" | translate + }} + + + @for (jumpType of listOfJumpType; track jumpType) { + + {{ jumpType.name }} + + } + + @if (selectedJumpType) { + } - + + + {{ + "NewJump_ChooseAircraft" | translate + }} + + + @for (aircraft of listOfAircraft; track aircraft) { + + {{ aircraft.name }} + + } + + @if (selectedAircraft) { + + } + + + {{ "NewJump_ChooseDz" | translate }} + + + @for (dropZone of listOfFilteredDropZone; track dropZone) { + + {{ dropZone.name }} + @if (dropZone.isFavorite === true) { + + favorite + } + + } + + @if (selectedDz) { + + } + + + {{ "NewJump_ChooseGear" | translate }} + + + @for (gear of listOfGear; track gear) { + + {{ gear.name }} ({{ gear.mainCanopy }}) + + } + + @if (selectedGear) { + + } + + {{ + "NewJump_Cutaway" | translate + }} + {{ + "NewJump_Special" | translate + }} + + + + + + + + + + + + + @if (exitAltitude) { + + } + + + + @if (deployAltitude) { + + } + + + + @if (countOfJumps) { + + } + + + + @if (comments) { + + } + +
+ @if (isValidatedForm()) { + } - - @if (selectedDz) { - - } - - - {{ "NewJump_ChooseGear" | translate }} - - - @for (gear of listOfGear; track gear) { - - {{ gear.name }} ({{ gear.mainCanopy }}) - - } - - @if (selectedGear) { - - } - - {{ - "NewJump_Cutaway" | translate - }} - {{ - "NewJump_Special" | translate - }} - - - - - - - - - - - - - @if (exitAltitude) { - - } - - - - @if (deployAltitude) { - - } - - - - @if (countOfJumps) { - - } - - - - @if (comments) { - - } - -
- @if (isValidatedForm()) { - - } -
+ } @else { - + } - -
+ diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts index a7a5dfa..1fd0c18 100644 --- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts +++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit } from "@angular/core"; import { RouterLink, RouterModule } from "@angular/router"; import { formatDate } from "@angular/common"; import { - DateAdapter, - MAT_DATE_FORMATS, - NativeDateAdapter, + DateAdapter, + MAT_DATE_FORMATS, + NativeDateAdapter, } from "@angular/material/core"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; @@ -34,244 +34,244 @@ import { GearService } from "../../services/gear.service"; import { StatsService } from "../../services/stats.service"; export const PICK_FORMATS = { - parse: { dateInput: "yy MM dd" }, - display: { - dateInput: "yyyy-MM-dd", - monthYearLabel: "yyyy MMM", - dateA11yLabel: "yyyy MM dd", - monthYearA11yLabel: "yyyy MMMM", - }, + parse: { dateInput: "yy MM dd" }, + display: { + dateInput: "yyyy-MM-dd", + monthYearLabel: "yyyy MMM", + dateA11yLabel: "yyyy MM dd", + monthYearA11yLabel: "yyyy MMMM", + }, }; class PickDateAdapter extends NativeDateAdapter { - override format(date: Date, displayFormat: Object): string { - return formatDate(date, displayFormat.toString(), "en"); - } + override format(date: Date, displayFormat: Object): string { + return formatDate(date, displayFormat.toString(), "en"); + } } @Component({ - selector: "app-new-jump", - templateUrl: "./new-jump.component.html", - styleUrls: ["./new-jump.component.css"], - providers: [ - { provide: DateAdapter, useClass: PickDateAdapter }, - { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }, - ], - imports: [ - TranslateModule, - RouterLink, - FormsModule, - RouterModule, - MatIconModule, - MatOptionModule, - MatFormFieldModule, - MatCheckboxModule, - MatAutocompleteModule, - MatDatepickerModule, - MatProgressSpinnerModule, - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule -], + selector: "app-new-jump", + templateUrl: "./new-jump.component.html", + styleUrls: ["./new-jump.component.css"], + providers: [ + { provide: DateAdapter, useClass: PickDateAdapter }, + { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }, + ], + imports: [ + TranslateModule, + RouterLink, + FormsModule, + RouterModule, + MatIconModule, + MatOptionModule, + MatFormFieldModule, + MatCheckboxModule, + MatAutocompleteModule, + MatDatepickerModule, + MatProgressSpinnerModule, + MatFormFieldModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + ], }) export class NewJumpComponent implements OnInit { - public beginDate: Date; - public endDate: Date; - public exitAltitude: number; - public deployAltitude: number; - public countOfJumps: number; - public selectedDz: DropZoneResp; - public selectedGear: GearResp; - public selectedAircraft: AircraftResp; - public selectedJumpType: JumpTypeResp; - public withCutaway: boolean; - public isSpecial: boolean; - public listOfJumpType: Array; - public listOfAircraft: Array; - public listOfFilteredDropZone: Array; - public listOfGear: Array; - public comments: string; - public resetForm: boolean; - private countDatasLoaded: number; - private pendingAddRequest: boolean; - private listOfDropZone: Array; - public maxDate: Date; + public beginDate: Date; + public endDate: Date; + public exitAltitude: number; + public deployAltitude: number; + public countOfJumps: number; + public selectedDz: DropZoneResp; + public selectedGear: GearResp; + public selectedAircraft: AircraftResp; + public selectedJumpType: JumpTypeResp; + public withCutaway: boolean; + public isSpecial: boolean; + public listOfJumpType: Array; + public listOfAircraft: Array; + public listOfFilteredDropZone: Array; + public listOfGear: Array; + public comments: string; + public resetForm: boolean; + private countDatasLoaded: number; + private pendingAddRequest: boolean; + private listOfDropZone: Array; + public maxDate: Date; - constructor( - private serviceComm: ServiceComm, - private serviceJump: JumpService, - private serviceJumpType: JumpTypeService, - private serviceAircraft: AircraftService, - private serviceDropzone: DropzoneService, - private serviceGear: GearService, - private dateService: DateService, - private translateService: TranslateService, - private statsService: StatsService - ) {} + constructor( + private serviceComm: ServiceComm, + private serviceJump: JumpService, + private serviceJumpType: JumpTypeService, + private serviceAircraft: AircraftService, + private serviceDropzone: DropzoneService, + private serviceGear: GearService, + private dateService: DateService, + private translateService: TranslateService, + private statsService: StatsService, + ) {} - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); this.updateTitle(); - } - }); - this.updateTitle(); - this.maxDate = this.dateService.addDays(new Date(), 1); + this.maxDate = this.dateService.addDays(new Date(), 1); - this.pendingAddRequest = false; - this.initForm(); - this.getListOfJumpTypes(); - } + this.pendingAddRequest = false; + this.initForm(); + this.getListOfJumpTypes(); + } - onFormSubmit() { - this.pendingAddRequest = true; + onFormSubmit() { + this.pendingAddRequest = true; - this.serviceJump - .addListOfJump( - this.selectedJumpType.id, - this.selectedAircraft.id, - this.selectedDz.id, - this.selectedGear.id, - this.withCutaway === undefined ? false : this.withCutaway, - this.beginDate, - this.endDate, - this.exitAltitude, - this.deployAltitude, - this.countOfJumps, - this.comments, - this.isSpecial === undefined ? false : this.isSpecial - ) - .subscribe(() => { - this.statsService.resetStats(); + this.serviceJump + .addListOfJump( + this.selectedJumpType.id, + this.selectedAircraft.id, + this.selectedDz.id, + this.selectedGear.id, + this.withCutaway === undefined ? false : this.withCutaway, + this.beginDate, + this.endDate, + this.exitAltitude, + this.deployAltitude, + this.countOfJumps, + this.comments, + this.isSpecial === undefined ? false : this.isSpecial, + ) + .subscribe(() => { + this.statsService.resetStats(); + this.comments = undefined; + this.withCutaway = false; + this.isSpecial = false; + + if (this.resetForm === true) { + this.initForm(); + } + this.pendingAddRequest = false; + }); + } + + public isValidatedForm(): boolean { + return ( + this.selectedDz !== undefined && + this.selectedDz.id !== undefined && + this.selectedGear !== undefined && + this.selectedGear.id !== undefined && + this.selectedAircraft !== undefined && + this.selectedAircraft.id !== undefined && + this.selectedJumpType !== undefined && + this.selectedJumpType.id !== undefined && + this.exitAltitude !== undefined && + typeof this.exitAltitude === "number" && + this.deployAltitude !== undefined && + typeof this.deployAltitude === "number" && + this.countOfJumps !== undefined && + typeof this.countOfJumps === "number" + ); + } + + private getListOfJumpTypes() { + this.serviceJumpType.getListOfJumpTypes().subscribe((data) => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.listOfJumpType = data; + this.countDatasLoaded = 1; + + this.getListOfAircrafts(); + this.getListOfDropZones(); + this.getListOfGears(); + }); + } + + private getListOfAircrafts() { + this.serviceAircraft.getListOfAircrafts(true).subscribe((data) => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.listOfAircraft = data; + this.countDatasLoaded++; + }); + } + + private getListOfDropZones() { + this.serviceDropzone.getListOfDropZones(true).subscribe((data) => { + data.sort( + (a, b) => + (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) || + a.name.localeCompare(b.name), + ); + this.listOfDropZone = data; + this.listOfFilteredDropZone = data; + this.countDatasLoaded++; + }); + } + + private getListOfGears() { + this.serviceGear.getListOfGears().subscribe((data) => { + data.sort((a, b) => b.id - a.id); + this.listOfGear = data; + this.countDatasLoaded++; + }); + } + + private initForm() { + this.endDate = new Date(); + this.endDate.setHours(0, 0, 0, 0); + this.beginDate = this.dateService.addDays(this.endDate, -1); + + this.exitAltitude = 4000; + this.deployAltitude = 1000; + this.countOfJumps = 1; + + this.selectedDz = undefined; + this.selectedGear = undefined; + this.selectedAircraft = undefined; + this.selectedJumpType = undefined; + + this.listOfFilteredDropZone = this.listOfDropZone; this.comments = undefined; + this.withCutaway = false; this.isSpecial = false; - - if (this.resetForm === true) { - this.initForm(); - } - this.pendingAddRequest = false; - }); - } - - public isValidatedForm(): boolean { - return ( - this.selectedDz !== undefined && - this.selectedDz.id !== undefined && - this.selectedGear !== undefined && - this.selectedGear.id !== undefined && - this.selectedAircraft !== undefined && - this.selectedAircraft.id !== undefined && - this.selectedJumpType !== undefined && - this.selectedJumpType.id !== undefined && - this.exitAltitude !== undefined && - typeof this.exitAltitude === "number" && - this.deployAltitude !== undefined && - typeof this.deployAltitude === "number" && - this.countOfJumps !== undefined && - typeof this.countOfJumps === "number" - ); - } - - private getListOfJumpTypes() { - this.serviceJumpType.getListOfJumpTypes().subscribe((data) => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.listOfJumpType = data; - this.countDatasLoaded = 1; - - this.getListOfAircrafts(); - this.getListOfDropZones(); - this.getListOfGears(); - }); - } - - private getListOfAircrafts() { - this.serviceAircraft.getListOfAircrafts(true).subscribe((data) => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.listOfAircraft = data; - this.countDatasLoaded++; - }); - } - - private getListOfDropZones() { - this.serviceDropzone.getListOfDropZones(true).subscribe((data) => { - data.sort( - (a, b) => - (b.isFavorite ? 1 : 0) - (a.isFavorite ? 1 : 0) || - a.name.localeCompare(b.name) - ); - this.listOfDropZone = data; - this.listOfFilteredDropZone = data; - this.countDatasLoaded++; - }); - } - - private getListOfGears() { - this.serviceGear.getListOfGears().subscribe((data) => { - data.sort((a, b) => b.id - a.id); - this.listOfGear = data; - this.countDatasLoaded++; - }); - } - - private initForm() { - this.endDate = new Date(); - this.endDate.setHours(0, 0, 0, 0); - this.beginDate = this.dateService.addDays(this.endDate, -1); - - this.exitAltitude = 4000; - this.deployAltitude = 1000; - this.countOfJumps = 1; - - this.selectedDz = undefined; - this.selectedGear = undefined; - this.selectedAircraft = undefined; - this.selectedJumpType = undefined; - - this.listOfFilteredDropZone = this.listOfDropZone; - this.comments = undefined; - - this.withCutaway = false; - this.isSpecial = false; - } - - public displayNameFn(data?: any): string | undefined { - return data ? data.name : undefined; - } - public displayGearFn(data?: GearResp): string | undefined { - return data ? `${data.name} (${data.mainCanopy})` : undefined; - } - - public onChangeDz(event: any) { - let filterValue: string; - - if (event.id === undefined) { - filterValue = event.toLowerCase(); - - this.listOfFilteredDropZone = this.listOfDropZone; - this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter( - (option) => option.name.toLowerCase().includes(filterValue) - ); } - } - public onChangeBeginDate(event: any) { - this.endDate = event; - } + public displayNameFn(data?: any): string | undefined { + return data ? data.name : undefined; + } + public displayGearFn(data?: GearResp): string | undefined { + return data ? `${data.name} (${data.mainCanopy})` : undefined; + } - public notLoadingToDisplay(): boolean { - return !(this.pendingAddRequest || this.countDatasLoaded !== 4); - } + public onChangeDz(event: any) { + let filterValue: string; - public resetDz() { - this.selectedDz = undefined; - this.onChangeDz(""); - } + if (event.id === undefined) { + filterValue = event.toLowerCase(); - private updateTitle() { - this.translateService.get("NewJump_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + this.listOfFilteredDropZone = this.listOfDropZone; + this.listOfFilteredDropZone = this.listOfFilteredDropZone.filter( + (option) => option.name.toLowerCase().includes(filterValue), + ); + } + } + + public onChangeBeginDate(event: any) { + this.endDate = event; + } + + public notLoadingToDisplay(): boolean { + return !(this.pendingAddRequest || this.countDatasLoaded !== 4); + } + + public resetDz() { + this.selectedDz = undefined; + this.onChangeDz(""); + } + + private updateTitle() { + this.translateService.get("NewJump_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } } diff --git a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css index 95f44a9..48667b0 100644 --- a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css +++ b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.css @@ -1,18 +1,17 @@ .formNewJumps { display: flex; flex-direction: column; - + min-width: 150px; max-width: 500px; width: 100%; - } - - .content { +} + +.content { min-height: 90vh; display: flex; justify-content: left; flex-direction: column; align-items: initial; padding-top: 25px; - } - \ No newline at end of file +} diff --git a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html index 2bfab0e..6cfd9f6 100644 --- a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html +++ b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html @@ -1,149 +1,153 @@
-
- -
- - @if (notLoadingToDisplay()) { -
- - {{ "NewTunnelFlight_ChooseJumpType" | translate }} - - - @for (jumpType of listOfJumpType; track jumpType) { - - {{ jumpType.name }} - - } - - @if (selectedJumpType) { - - } - - - {{ "NewTunnelFlight_ChooseTunnel" | translate }} - - - @for (tunnel of listOfFilteredTunnel; track tunnel) { - - {{ tunnel.name }} - - } - - @if (selectedTunnel) { - - } - - - {{ "NewTunnelFlight_Date_Lbl" | translate }} - - - - - - {{ "NewTunnelFlight_Minutes_Lbl" | translate }} - - @if (minutesOfFlight) { - - } - - - {{ "NewTunnelFlight_Comments_Lbl" | translate }} - - @if (comments) { - - } - -
- @if (isValidatedForm()) { - - } -
- } @else { - - } +
+ @if (notLoadingToDisplay()) { +
+ + {{ + "NewTunnelFlight_ChooseJumpType" | translate + }} + + + @for (jumpType of listOfJumpType; track jumpType) { + + {{ jumpType.name }} + + } + + @if (selectedJumpType) { + + } + + + {{ + "NewTunnelFlight_ChooseTunnel" | translate + }} + + + @for (tunnel of listOfFilteredTunnel; track tunnel) { + + {{ tunnel.name }} + + } + + @if (selectedTunnel) { + + } + + + {{ + "NewTunnelFlight_Date_Lbl" | translate + }} + + + + + + {{ + "NewTunnelFlight_Minutes_Lbl" | translate + }} + + @if (minutesOfFlight) { + + } + + + {{ + "NewTunnelFlight_Comments_Lbl" | translate + }} + + @if (comments) { + + } + +
+ @if (isValidatedForm()) { + + } +
+ } @else { + + } diff --git a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts index e594cd9..1c3d6c3 100644 --- a/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts +++ b/Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit } from "@angular/core"; import { RouterLink, RouterModule } from "@angular/router"; import { formatDate } from "@angular/common"; import { - DateAdapter, - MAT_DATE_FORMATS, - NativeDateAdapter, + DateAdapter, + MAT_DATE_FORMATS, + NativeDateAdapter, } from "@angular/material/core"; import { TranslateModule, TranslateService } from "@ngx-translate/core"; @@ -28,169 +28,169 @@ import { JumpTypeService } from "../../services/jump-type.service"; import { DateService } from "../../services/date.service"; export const PICK_FORMATS = { - parse: { dateInput: "yy MM dd" }, - display: { - dateInput: "yyyy-MM-dd", - monthYearLabel: "yyyy MMM", - dateA11yLabel: "yyyy MM dd", - monthYearA11yLabel: "yyyy MMMM", - }, + parse: { dateInput: "yy MM dd" }, + display: { + dateInput: "yyyy-MM-dd", + monthYearLabel: "yyyy MMM", + dateA11yLabel: "yyyy MM dd", + monthYearA11yLabel: "yyyy MMMM", + }, }; class PickDateAdapter extends NativeDateAdapter { - override format(date: Date, displayFormat: Object): string { - return formatDate(date, displayFormat.toString(), "en"); - } + override format(date: Date, displayFormat: Object): string { + return formatDate(date, displayFormat.toString(), "en"); + } } @Component({ - selector: "app-new-tunnel-flight", - templateUrl: "./new-tunnel-flight.component.html", - styleUrls: ["./new-tunnel-flight.component.css"], - providers: [ - { provide: DateAdapter, useClass: PickDateAdapter }, - { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }, - ], - imports: [ - TranslateModule, - RouterModule, - RouterLink, - FormsModule, - MatFormFieldModule, - ReactiveFormsModule, - MatAutocompleteModule, - MatInputModule, - MatButtonModule, - MatIconModule, - MatFormFieldModule, - MatOptionModule, - MatDatepickerModule, - MatProgressSpinnerModule -], + selector: "app-new-tunnel-flight", + templateUrl: "./new-tunnel-flight.component.html", + styleUrls: ["./new-tunnel-flight.component.css"], + providers: [ + { provide: DateAdapter, useClass: PickDateAdapter }, + { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }, + ], + imports: [ + TranslateModule, + RouterModule, + RouterLink, + FormsModule, + MatFormFieldModule, + ReactiveFormsModule, + MatAutocompleteModule, + MatInputModule, + MatButtonModule, + MatIconModule, + MatFormFieldModule, + MatOptionModule, + MatDatepickerModule, + MatProgressSpinnerModule, + ], }) export class NewTunnelFlightComponent implements OnInit { - public flightDate: Date; - public minutesOfFlight: number; - public selectedTunnel: TunnelResp; - public selectedJumpType: JumpTypeResp; - public listOfTunnel: Array; - public listOfFilteredTunnel: Array; - public resetForm: boolean; - public comments: string; - private countDatasLoaded: number; - private pendingAddRequest: boolean; - public listOfJumpType: Array; - public maxDate: Date; + public flightDate: Date; + public minutesOfFlight: number; + public selectedTunnel: TunnelResp; + public selectedJumpType: JumpTypeResp; + public listOfTunnel: Array; + public listOfFilteredTunnel: Array; + public resetForm: boolean; + public comments: string; + private countDatasLoaded: number; + private pendingAddRequest: boolean; + public listOfJumpType: Array; + public maxDate: Date; - constructor( - private serviceComm: ServiceComm, - private serviceTunnel: TunnelService, - private serviceTunnelFlight: TunnelFlightService, - private serviceJumpType: JumpTypeService, - private translateService: TranslateService, - private dateService: DateService - ) {} + constructor( + private serviceComm: ServiceComm, + private serviceTunnel: TunnelService, + private serviceTunnelFlight: TunnelFlightService, + private serviceJumpType: JumpTypeService, + private translateService: TranslateService, + private dateService: DateService, + ) {} - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); this.updateTitle(); - } - }); - this.updateTitle(); - this.maxDate = this.dateService.addDays(new Date(), 1); - this.countDatasLoaded = 0; - this.pendingAddRequest = false; - this.initForm(); - this.getListOfTunnels(); - this.getListOfJumpTypes(); - } - - public onFormSubmit() { - this.pendingAddRequest = true; - - this.serviceTunnelFlight - .addFlight( - this.selectedTunnel.id, - this.selectedJumpType.id, - this.flightDate, - this.minutesOfFlight, - this.comments - ) - .subscribe(() => { - this.comments = undefined; - - if (this.resetForm === true) { - this.initForm(); - } + this.maxDate = this.dateService.addDays(new Date(), 1); + this.countDatasLoaded = 0; this.pendingAddRequest = false; - }); - } - - public isValidatedForm(): boolean { - return ( - this.selectedTunnel !== undefined && - this.selectedTunnel.id !== undefined && - this.minutesOfFlight !== undefined && - typeof this.minutesOfFlight === "number" - ); - } - - private getListOfTunnels() { - this.serviceTunnel.getListOfTunnels().subscribe((data) => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.listOfTunnel = data; - this.listOfFilteredTunnel = data; - this.countDatasLoaded++; - }); - } - - private getListOfJumpTypes() { - this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => { - data.sort((a, b) => a.name.localeCompare(b.name)); - this.listOfJumpType = data; - this.countDatasLoaded++; - }); - } - - public notLoadingToDisplay(): boolean { - return !(this.pendingAddRequest || this.countDatasLoaded !== 2); - } - - private updateTitle() { - this.translateService.get("NewTunnelFlight_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } - - private initForm() { - this.flightDate = new Date(); - this.flightDate.setHours(0, 0, 0, 0); - - this.minutesOfFlight = 1; - this.selectedTunnel = undefined; - this.comments = undefined; - } - - public resetTunnel() { - this.selectedTunnel = undefined; - this.onChangeTunnel(""); - } - - public onChangeTunnel(event: any) { - let filterValue: string; - - if (event.id === undefined) { - filterValue = event.toLowerCase(); - - this.listOfFilteredTunnel = this.listOfTunnel; - this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter((option) => - option.name.toLowerCase().includes(filterValue) - ); + this.initForm(); + this.getListOfTunnels(); + this.getListOfJumpTypes(); } - } - public displayNameFn(data?: any): string | undefined { - return data ? data.name : undefined; - } + public onFormSubmit() { + this.pendingAddRequest = true; + + this.serviceTunnelFlight + .addFlight( + this.selectedTunnel.id, + this.selectedJumpType.id, + this.flightDate, + this.minutesOfFlight, + this.comments, + ) + .subscribe(() => { + this.comments = undefined; + + if (this.resetForm === true) { + this.initForm(); + } + this.pendingAddRequest = false; + }); + } + + public isValidatedForm(): boolean { + return ( + this.selectedTunnel !== undefined && + this.selectedTunnel.id !== undefined && + this.minutesOfFlight !== undefined && + typeof this.minutesOfFlight === "number" + ); + } + + private getListOfTunnels() { + this.serviceTunnel.getListOfTunnels().subscribe((data) => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.listOfTunnel = data; + this.listOfFilteredTunnel = data; + this.countDatasLoaded++; + }); + } + + private getListOfJumpTypes() { + this.serviceJumpType.getListOfJumpTypesForTunnel().subscribe((data) => { + data.sort((a, b) => a.name.localeCompare(b.name)); + this.listOfJumpType = data; + this.countDatasLoaded++; + }); + } + + public notLoadingToDisplay(): boolean { + return !(this.pendingAddRequest || this.countDatasLoaded !== 2); + } + + private updateTitle() { + this.translateService.get("NewTunnelFlight_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } + + private initForm() { + this.flightDate = new Date(); + this.flightDate.setHours(0, 0, 0, 0); + + this.minutesOfFlight = 1; + this.selectedTunnel = undefined; + this.comments = undefined; + } + + public resetTunnel() { + this.selectedTunnel = undefined; + this.onChangeTunnel(""); + } + + public onChangeTunnel(event: any) { + let filterValue: string; + + if (event.id === undefined) { + filterValue = event.toLowerCase(); + + this.listOfFilteredTunnel = this.listOfTunnel; + this.listOfFilteredTunnel = this.listOfFilteredTunnel.filter( + (option) => option.name.toLowerCase().includes(filterValue), + ); + } + } + + public displayNameFn(data?: any): string | undefined { + return data ? data.name : undefined; + } } diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.css b/Front/skydivelogs-app/src/app/summary/summary.component.css index 05bb70b..1a394be 100644 --- a/Front/skydivelogs-app/src/app/summary/summary.component.css +++ b/Front/skydivelogs-app/src/app/summary/summary.component.css @@ -1,49 +1,49 @@ .mat-row td { - padding-right: 15px; + padding-right: 15px; } .labelTab { - padding: 5px; - cursor: pointer; - text-decoration: underline; - font-weight: bold; - background-color: lightgray; + padding: 5px; + cursor: pointer; + text-decoration: underline; + font-weight: bold; + background-color: lightgray; } .labelTab.selected { - background-color: gray !important; + background-color: gray !important; } .content { - min-height: 90vh; - display: flex; - justify-content: left; - flex-direction: column; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + display: flex; + justify-content: left; + flex-direction: column; + align-items: initial; + padding-top: 25px; } .left160 { - clear: both; - float: left; - width: 160px; + clear: both; + float: left; + width: 160px; } .paragraph { - margin-bottom: 10px; + margin-bottom: 10px; } .containerFlex { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .contentFlex { - flex: 45%; + flex: 45%; } .chart-container { - position: relative; - margin: auto; - height: 80vh; - width: 80vw; + position: relative; + margin: auto; + height: 80vh; + width: 80vw; } diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.html b/Front/skydivelogs-app/src/app/summary/summary.component.html index 967a7fe..f3b0bad 100644 --- a/Front/skydivelogs-app/src/app/summary/summary.component.html +++ b/Front/skydivelogs-app/src/app/summary/summary.component.html @@ -1,182 +1,259 @@
-
- - : {{ totalJumps }} -
+
+ + : {{ totalJumps }} +
-
- - : {{ totalCutaways }} -
+
+ + : {{ totalCutaways }} +
-
- - : {{ lastJump }} -
+
+ + : {{ lastJump }} +
-
- - -
+
+ + +
- - - -
-
- {{ "Summary_LastMonth_ByDz" | translate }} - - - - - - - - -
{{ element.label }}{{ element.nb }}
-
-
- {{ "Summary_LastMonth_ByJumpType" | translate }} - - - - - - - - -
{{ element.label }}{{ element.nb }}
-
-
- - + + + +
+
+ + {{ "Summary_LastMonth_ByDz" | translate }} + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+
+
+ + {{ "Summary_LastMonth_ByJumpType" | translate }} + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+
+
+ + - - -
-
- {{ "Summary_LastYear_ByDz" | translate }} - - - - - - - - -
{{ element.label }}{{ element.nb }}
-
-
- {{ "Summary_LastYear_ByJumpType" | translate }} - - - - - - - - -
{{ element.label }}{{ element.nb }}
-
-
- - + + +
+
+ + {{ "Summary_LastYear_ByDz" | translate }} + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+
+
+ + {{ "Summary_LastYear_ByJumpType" | translate }} + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+
+
+ + - - - - - - - - - - -
{{ element.label }}{{ element.nb }}
- - + + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+ + - - - - - - - - - - -
{{ element.label }}{{ element.nb }}
- - + + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+ + - - - - - - - - - - -
{{ element.label }}{{ element.nb }}
- - + + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+ + - - - - - - - - - - -
{{ element.label }}{{ element.nb }}
- - + + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+ + - - - - - - - - - - -
{{ element.label }}{{ element.nb }}
- - + + + + + + + + + + +
+ {{ element.label }} + + {{ element.nb }} +
+ + - - -
- - -
- - - + + +
+ + +
+ + +
diff --git a/Front/skydivelogs-app/src/app/summary/summary.component.ts b/Front/skydivelogs-app/src/app/summary/summary.component.ts index c188965..3dccb3c 100644 --- a/Front/skydivelogs-app/src/app/summary/summary.component.ts +++ b/Front/skydivelogs-app/src/app/summary/summary.component.ts @@ -11,294 +11,297 @@ import { MatIconModule } from "@angular/material/icon"; import { ServiceComm } from "../../services/service-comm.service"; import { StatsService } from "../../services/stats.service"; import { - StatsByDzResp, - StatsByAircraftResp, - StatsByGearResp, - StatsByJumpTypeResp, - StatsByYearResp, + StatsByDzResp, + StatsByAircraftResp, + StatsByGearResp, + StatsByJumpTypeResp, + StatsByYearResp, } from "../../models/stats"; @Component({ - selector: "app-summary", - templateUrl: "./summary.component.html", - styleUrls: ["./summary.component.css"], - imports: [ - MatTabsModule, - TranslateModule, - BaseChartDirective, - MatIconModule, - MatTableModule, - ], + selector: "app-summary", + templateUrl: "./summary.component.html", + styleUrls: ["./summary.component.css"], + imports: [ + MatTabsModule, + TranslateModule, + BaseChartDirective, + MatIconModule, + MatTableModule, + ], }) export class SummaryComponent implements OnInit { - public dsNbJumpByDz: MatTableDataSource; - public dsNbJumpByAircraft: MatTableDataSource; - public dsNbJumpByGear: MatTableDataSource; - public dsNbJumpByType: MatTableDataSource; - public dsNbJumpByYear: MatTableDataSource; - public dsJumpForLastYearByDz: MatTableDataSource; - public dsJumpForLastYearByJumpType: MatTableDataSource; - public dsJumpForLastMonthByDz: MatTableDataSource; - public dsJumpForLastMonthByJumpType: MatTableDataSource; - public displayedColumns: Array = ["label", "nb"]; - public displayedColumnsByYearByJumpType: Array = [ - "label", - "label2", - "nb", - ]; + public dsNbJumpByDz: MatTableDataSource; + public dsNbJumpByAircraft: MatTableDataSource; + public dsNbJumpByGear: MatTableDataSource; + public dsNbJumpByType: MatTableDataSource; + public dsNbJumpByYear: MatTableDataSource; + public dsJumpForLastYearByDz: MatTableDataSource; + public dsJumpForLastYearByJumpType: MatTableDataSource; + public dsJumpForLastMonthByDz: MatTableDataSource; + public dsJumpForLastMonthByJumpType: MatTableDataSource; + public displayedColumns: Array = ["label", "nb"]; + public displayedColumnsByYearByJumpType: Array = [ + "label", + "label2", + "nb", + ]; - public barChartLegend = true; - public barChartPlugins: any = []; - public barChartData: ChartData<"line">; - public barChartOptions: ChartConfiguration["options"]; - public barChartType: ChartType; - private jumpTypeToColor: Map; + public barChartLegend = true; + public barChartPlugins: any = []; + public barChartData: ChartData<"line">; + public barChartOptions: ChartConfiguration["options"]; + public barChartType: ChartType; + private jumpTypeToColor: Map; - public totalJumps: number; - public totalCutaways: number; - public lastJump: string; - @ViewChild(MatTabGroup) tabGroup: MatTabGroup; + public totalJumps: number; + public totalCutaways: number; + public lastJump: string; + @ViewChild(MatTabGroup) tabGroup: MatTabGroup; - constructor( - private serviceApi: StatsService, - private serviceComm: ServiceComm, - private translateService: TranslateService, - ) {} + constructor( + private serviceApi: StatsService, + private serviceComm: ServiceComm, + private translateService: TranslateService, + ) {} - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); this.updateTitle(); - } - }); - this.updateTitle(); - this.serviceApi.getSimpleSummary().subscribe((data) => { - this.totalJumps = data.totalJumps; - this.totalCutaways = data.totalCutaways; + this.serviceApi.getSimpleSummary().subscribe((data) => { + this.totalJumps = data.totalJumps; + this.totalCutaways = data.totalCutaways; - const datepipe: DatePipe = new DatePipe("en-US"); - let formattedDate = datepipe.transform( - data.lastJump.jumpDate, - "EEEE dd MMMM YYYY", - ); - this.lastJump = formattedDate + " (" + data.lastJump.dropZone.name + ")"; - }); + const datepipe: DatePipe = new DatePipe("en-US"); + let formattedDate = datepipe.transform( + data.lastJump.jumpDate, + "EEEE dd MMMM YYYY", + ); + this.lastJump = + formattedDate + " (" + data.lastJump.dropZone.name + ")"; + }); - this.serviceApi.getStatsOfLastMonth().subscribe((data) => { - data.byDz.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz); - data.byJumpType.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastMonthByJumpType = new MatTableDataSource( - data.byJumpType, - ); - }); + this.serviceApi.getStatsOfLastMonth().subscribe((data) => { + data.byDz.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz); + data.byJumpType.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastMonthByJumpType = new MatTableDataSource( + data.byJumpType, + ); + }); - this.chartConfig(); - } - - public refreshStats() { - this.serviceApi.deleteAllCache(); - this.tabGroup.selectedIndex = 0; - } - - public onTabChanged(event: MatTabChangeEvent) { - switch (event.index) { - case 0: - this.statsLastMonth(); - break; - case 1: - this.statsLastYear(); - break; - case 2: - this.statsByDz(); - break; - case 3: - this.statsByAircraft(); - break; - case 4: - this.statsByGear(); - break; - case 5: - this.statsByJumpType(); - break; - case 6: - this.statsByYear(); - break; - case 7: - this.statsByYearByJumpType(); - break; + this.chartConfig(); } - } - private updateTitle() { - this.translateService.get("Summary_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + public refreshStats() { + this.serviceApi.deleteAllCache(); + this.tabGroup.selectedIndex = 0; + } - private chartConfig() { - this.barChartType = "line"; - this.barChartOptions = { - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - display: true, - }, - colors: { - forceOverride: false, - }, - }, - interaction: { - intersect: false, - mode: "nearest", - axis: "x", - }, - scales: { - x: { - stacked: false, - }, - y: { - stacked: false, - beginAtZero: true, - }, - }, - }; - - this.jumpTypeToColor = new Map([ - ["PAC", "#FFD700"], - ["Solo", "#FFA500"], - ["RW 3", "#40E0D0"], - ["RW 4", "#008080"], - ["RW 8", "#7FFFD4"], - ["RW X", "#114556"], - ["FreeFly", "#FFC0CB"], - ["FreeStyle", "#FF91A4"], - ["Track/Trace", "#87CEEB"], - ["Canopy", "#228B22"], - ["Landing accuracy", "#FF6347"], - ["Wingsuit 1", "#E6E6FA"], - ["Wingsuit 2", "#E0B0FF"], - ["Wingsuit 3", "#9400D3"], - ]); - } - - // #region Private methods to get stats - private statsByYearByJumpType() { - this.serviceApi.getStatsByYearByJumpType().subscribe((data) => { - data.sort((a, b) => a.label.localeCompare(b.label)); - - let firstYear: number = Number(data[0].label); - const now = new Date(); - const currentYear = now.getFullYear(); - const nbYears = currentYear - firstYear; - let listOfYears = new Array(nbYears).fill(null).map(() => firstYear++); - - // Prepare the list of jump type with am empty array - let tmpResults = new Map(); - const listOfJumpType = [...new Set(data.map((obj) => obj.label2))]; - listOfJumpType.forEach((type) => { - tmpResults.set(type, new Array(nbYears).fill(NaN)); - }); - - for (let i = 0; i < listOfYears.length; i++) { - const year = listOfYears[i].toString(); - - let filteredStats = data.filter((d) => d.label == year); - - if (filteredStats.length > 0) { - filteredStats.forEach((fs) => { - tmpResults.get(fs.label2)[i] = fs.nb; - }); + public onTabChanged(event: MatTabChangeEvent) { + switch (event.index) { + case 0: + this.statsLastMonth(); + break; + case 1: + this.statsLastYear(); + break; + case 2: + this.statsByDz(); + break; + case 3: + this.statsByAircraft(); + break; + case 4: + this.statsByGear(); + break; + case 5: + this.statsByJumpType(); + break; + case 6: + this.statsByYear(); + break; + case 7: + this.statsByYearByJumpType(); + break; } - } + } - const results: { - label: string; - data: number[]; - backgroundColor: string; - borderColor: string; - pointBackgroundColor: string; - fill: boolean; - pointRadius: number; - }[] = []; - tmpResults.forEach((value, key) => { - const color = this.jumpTypeToColor.get(key); - let tmp = { - label: key, - data: value, - backgroundColor: color, - borderColor: color, - pointBackgroundColor: color, - fill: false, - pointRadius: 6, + private updateTitle() { + this.translateService.get("Summary_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } + + private chartConfig() { + this.barChartType = "line"; + this.barChartOptions = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: true, + }, + colors: { + forceOverride: false, + }, + }, + interaction: { + intersect: false, + mode: "nearest", + axis: "x", + }, + scales: { + x: { + stacked: false, + }, + y: { + stacked: false, + beginAtZero: true, + }, + }, }; - results.push(tmp); - }); - this.barChartData = { - labels: listOfYears, - datasets: results, - }; - }); - } + this.jumpTypeToColor = new Map([ + ["PAC", "#FFD700"], + ["Solo", "#FFA500"], + ["RW 3", "#40E0D0"], + ["RW 4", "#008080"], + ["RW 8", "#7FFFD4"], + ["RW X", "#114556"], + ["FreeFly", "#FFC0CB"], + ["FreeStyle", "#FF91A4"], + ["Track/Trace", "#87CEEB"], + ["Canopy", "#228B22"], + ["Landing accuracy", "#FF6347"], + ["Wingsuit 1", "#E6E6FA"], + ["Wingsuit 2", "#E0B0FF"], + ["Wingsuit 3", "#9400D3"], + ]); + } - private statsByYear() { - this.serviceApi.getStatsByYear().subscribe((data) => { - data.sort((a, b) => b.label.localeCompare(a.label)); - this.dsNbJumpByYear = new MatTableDataSource(data); - }); - } + // #region Private methods to get stats + private statsByYearByJumpType() { + this.serviceApi.getStatsByYearByJumpType().subscribe((data) => { + data.sort((a, b) => a.label.localeCompare(b.label)); - private statsByJumpType() { - this.serviceApi.getStatsByJumpType().subscribe((data) => { - data.sort((a, b) => b.nb - a.nb); - this.dsNbJumpByType = new MatTableDataSource(data); - }); - } + let firstYear: number = Number(data[0].label); + const now = new Date(); + const currentYear = now.getFullYear(); + const nbYears = currentYear - firstYear; + let listOfYears = new Array(nbYears) + .fill(null) + .map(() => firstYear++); - private statsByGear() { - this.serviceApi.getStatsByGear().subscribe((data) => { - data.sort((a, b) => b.nb - a.nb); - this.dsNbJumpByGear = new MatTableDataSource(data); - }); - } + // Prepare the list of jump type with am empty array + let tmpResults = new Map(); + const listOfJumpType = [...new Set(data.map((obj) => obj.label2))]; + listOfJumpType.forEach((type) => { + tmpResults.set(type, new Array(nbYears).fill(NaN)); + }); - private statsByAircraft() { - this.serviceApi.getStatsByAircraft().subscribe((data) => { - data.sort((a, b) => b.nb - a.nb); - this.dsNbJumpByAircraft = new MatTableDataSource(data); - }); - } + for (let i = 0; i < listOfYears.length; i++) { + const year = listOfYears[i].toString(); - private statsByDz() { - this.serviceApi.getStatsByDz().subscribe((data) => { - data.sort((a, b) => b.nb - a.nb); - this.dsNbJumpByDz = new MatTableDataSource(data); - }); - } + let filteredStats = data.filter((d) => d.label == year); - private statsLastYear() { - this.serviceApi.getStatsOfLastYear().subscribe((data) => { - data.byDz.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz); - data.byJumpType.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastYearByJumpType = new MatTableDataSource( - data.byJumpType, - ); - }); - } + if (filteredStats.length > 0) { + filteredStats.forEach((fs) => { + tmpResults.get(fs.label2)[i] = fs.nb; + }); + } + } - private statsLastMonth() { - this.serviceApi.getStatsOfLastMonth().subscribe((data) => { - data.byDz.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz); - data.byJumpType.sort((a, b) => b.nb - a.nb); - this.dsJumpForLastMonthByJumpType = new MatTableDataSource( - data.byJumpType, - ); - }); - } - //#endregion + const results: { + label: string; + data: number[]; + backgroundColor: string; + borderColor: string; + pointBackgroundColor: string; + fill: boolean; + pointRadius: number; + }[] = []; + tmpResults.forEach((value, key) => { + const color = this.jumpTypeToColor.get(key); + let tmp = { + label: key, + data: value, + backgroundColor: color, + borderColor: color, + pointBackgroundColor: color, + fill: false, + pointRadius: 6, + }; + results.push(tmp); + }); + + this.barChartData = { + labels: listOfYears, + datasets: results, + }; + }); + } + + private statsByYear() { + this.serviceApi.getStatsByYear().subscribe((data) => { + data.sort((a, b) => b.label.localeCompare(a.label)); + this.dsNbJumpByYear = new MatTableDataSource(data); + }); + } + + private statsByJumpType() { + this.serviceApi.getStatsByJumpType().subscribe((data) => { + data.sort((a, b) => b.nb - a.nb); + this.dsNbJumpByType = new MatTableDataSource(data); + }); + } + + private statsByGear() { + this.serviceApi.getStatsByGear().subscribe((data) => { + data.sort((a, b) => b.nb - a.nb); + this.dsNbJumpByGear = new MatTableDataSource(data); + }); + } + + private statsByAircraft() { + this.serviceApi.getStatsByAircraft().subscribe((data) => { + data.sort((a, b) => b.nb - a.nb); + this.dsNbJumpByAircraft = new MatTableDataSource(data); + }); + } + + private statsByDz() { + this.serviceApi.getStatsByDz().subscribe((data) => { + data.sort((a, b) => b.nb - a.nb); + this.dsNbJumpByDz = new MatTableDataSource(data); + }); + } + + private statsLastYear() { + this.serviceApi.getStatsOfLastYear().subscribe((data) => { + data.byDz.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastYearByDz = new MatTableDataSource(data.byDz); + data.byJumpType.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastYearByJumpType = new MatTableDataSource( + data.byJumpType, + ); + }); + } + + private statsLastMonth() { + this.serviceApi.getStatsOfLastMonth().subscribe((data) => { + data.byDz.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastMonthByDz = new MatTableDataSource(data.byDz); + data.byJumpType.sort((a, b) => b.nb - a.nb); + this.dsJumpForLastMonthByJumpType = new MatTableDataSource( + data.byJumpType, + ); + }); + } + //#endregion } diff --git a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.css b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.css index af83daf..3ed54e5 100644 --- a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.css +++ b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.css @@ -1,14 +1,14 @@ .content { - min-height: 90vh; - justify-content: left; - align-items: initial; - padding-top: 25px; + min-height: 90vh; + justify-content: left; + align-items: initial; + padding-top: 25px; } .containerFlex { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .contentFlex { - flex: 45%; -} \ No newline at end of file + flex: 45%; +} diff --git a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html index ce4b431..a3b601d 100644 --- a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html +++ b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.html @@ -1,53 +1,62 @@
-
- Profile -
-

- - Login - - -

-

- - Firstname - - -

-

- - Lastname - - -

-

- - E-mail - - -

+
+ Profile + +

+ + Login + + +

+

+ + Firstname + + +

+

+ + Lastname + + +

+

+ + E-mail + + +

-

- - Current password - - -

-

- - New password - - -

+

+ + Current password + + +

+

+ + New password + + +

- - -
+ + +
-
- Images - -
+
+ Images + +
diff --git a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts index 8b1cca5..cb76bdb 100644 --- a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts +++ b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit } from "@angular/core"; import { - FormGroup, - FormControl, - Validators, - ReactiveFormsModule, + FormGroup, + FormControl, + Validators, + ReactiveFormsModule, } from "@angular/forms"; import { MatLabel, MatFormFieldModule } from "@angular/material/form-field"; import { - TranslateModule, - TranslatePipe, - TranslateService, + TranslateModule, + TranslatePipe, + TranslateService, } from "@ngx-translate/core"; import { MatInputModule } from "@angular/material/input"; import { MatButtonModule } from "@angular/material/button"; @@ -19,137 +19,137 @@ import { ListOfImagesComponent } from "../list-of-images/list-of-images.componen import { ServiceComm } from "../../services/service-comm.service"; @Component({ - selector: "app-user-profile", - templateUrl: "./user-profile.component.html", - styleUrls: ["./user-profile.component.css"], - imports: [ - ListOfImagesComponent, - ReactiveFormsModule, - MatLabel, - MatFormFieldModule, - MatInputModule, - MatButtonModule, - TranslateModule, - ], + selector: "app-user-profile", + templateUrl: "./user-profile.component.html", + styleUrls: ["./user-profile.component.css"], + imports: [ + ListOfImagesComponent, + ReactiveFormsModule, + MatLabel, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + TranslateModule, + ], }) export class UserProfileComponent implements OnInit { - public userForm: FormGroup; + public userForm: FormGroup; - constructor( - private authenticationService: AuthenticationService, - private translateService: TranslateService, - private serviceComm: ServiceComm, - ) {} + constructor( + private authenticationService: AuthenticationService, + private translateService: TranslateService, + private serviceComm: ServiceComm, + ) {} - ngOnInit() { - this.serviceComm.forceTranslateTitle.subscribe((data) => { - if (data === true) { + ngOnInit() { + this.serviceComm.forceTranslateTitle.subscribe((data) => { + if (data === true) { + this.updateTitle(); + } + }); this.updateTitle(); - } - }); - this.updateTitle(); - const currentUser = this.authenticationService.currentUserValue; + const currentUser = this.authenticationService.currentUserValue; - this.userForm = new FormGroup( - { - login: new FormControl(currentUser.login, Validators.required), - firstName: new FormControl(currentUser.firstName, [ - Validators.required, - Validators.minLength(3), - ]), - lastName: new FormControl(currentUser.lastName, [ - Validators.required, - Validators.minLength(3), - ]), - email: new FormControl(currentUser.email, [ - Validators.required, - Validators.email, - ]), - currentPassword: new FormControl( - "", - Validators.pattern("^[A-Za-z0-9_-]{8,15}$"), - ), - newPassword: new FormControl( - "", - Validators.pattern("^[A-Za-z0-9_-]{8,15}$"), - ), - }, - { updateOn: "blur" }, - ); - } - - onSubmit(formData) { - if (this.userForm.invalid) { - return; + this.userForm = new FormGroup( + { + login: new FormControl(currentUser.login, Validators.required), + firstName: new FormControl(currentUser.firstName, [ + Validators.required, + Validators.minLength(3), + ]), + lastName: new FormControl(currentUser.lastName, [ + Validators.required, + Validators.minLength(3), + ]), + email: new FormControl(currentUser.email, [ + Validators.required, + Validators.email, + ]), + currentPassword: new FormControl( + "", + Validators.pattern("^[A-Za-z0-9_-]{8,15}$"), + ), + newPassword: new FormControl( + "", + Validators.pattern("^[A-Za-z0-9_-]{8,15}$"), + ), + }, + { updateOn: "blur" }, + ); } - // const updatedUser = new User(); - // updatedUser.firstName = formData.firstName; - // updatedUser.lastName = formData.lastName; - // updatedUser.email = formData.email; + onSubmit(formData) { + if (this.userForm.invalid) { + return; + } - // this.authenticationService.update(updatedUser); - } + // const updatedUser = new User(); + // updatedUser.firstName = formData.firstName; + // updatedUser.lastName = formData.lastName; + // updatedUser.email = formData.email; - private calculTailleVoile() { - let tailleVoile = new Map>(); - tailleVoile.set("60", [175, 161, 147, 133, 124, 115, 107, 97, 89]); - tailleVoile.set("61", [178, 163, 149, 135, 126, 116, 108, 98, 90]); - tailleVoile.set("62", [180, 166, 151, 137, 127, 118, 109, 99, 91]); - tailleVoile.set("63", [183, 168, 153, 138, 129, 119, 111, 100, 91]); - tailleVoile.set("64", [185, 170, 155, 140, 130, 121, 112, 101, 92]); - tailleVoile.set("65", [188, 173, 157, 142, 132, 122, 113, 102, 93]); - tailleVoile.set("66", [190, 175, 159, 144, 134, 123, 114, 103, 94]); - tailleVoile.set("67", [193, 177, 161, 146, 135, 125, 116, 104, 94]); - tailleVoile.set("68", [195, 179, 164, 147, 137, 126, 117, 105, 95]); - tailleVoile.set("69", [198, 182, 166, 149, 138, 128, 118, 106, 96]); - tailleVoile.set("70", [200, 184, 168, 151, 140, 129, 119, 107, 96]); - tailleVoile.set("71", [203, 186, 170, 153, 142, 130, 120, 107, 97]); - tailleVoile.set("72", [205, 189, 172, 155, 143, 132, 121, 108, 98]); - tailleVoile.set("73", [208, 191, 174, 156, 145, 133, 123, 109, 99]); - tailleVoile.set("74", [210, 193, 176, 158, 146, 134, 124, 110, 99]); - tailleVoile.set("75", [213, 196, 178, 160, 148, 136, 125, 111, 100]); - tailleVoile.set("76", [215, 198, 180, 162, 150, 137, 126, 112, 101]); - tailleVoile.set("77", [218, 200, 182, 163, 151, 139, 127, 113, 101]); - tailleVoile.set("78", [220, 202, 184, 165, 153, 140, 128, 114, 102]); - tailleVoile.set("79", [223, 205, 186, 167, 154, 141, 129, 115, 103]); - tailleVoile.set("80", [225, 207, 188, 169, 156, 143, 131, 115, 103]); - tailleVoile.set("81", [228, 209, 190, 170, 157, 144, 132, 116, 104]); - tailleVoile.set("82", [230, 212, 192, 172, 159, 145, 133, 117, 104]); - tailleVoile.set("83", [233, 214, 194, 174, 160, 146, 134, 118, 105]); - tailleVoile.set("84", [235, 216, 196, 176, 162, 148, 135, 119, 106]); - tailleVoile.set("85", [238, 219, 198, 177, 163, 149, 136, 120, 106]); - tailleVoile.set("86", [240, 221, 201, 179, 165, 150, 137, 120, 107]); - tailleVoile.set("87", [243, 223, 203, 181, 166, 152, 138, 121, 108]); - tailleVoile.set("88", [245, 225, 205, 183, 168, 153, 139, 122, 108]); - tailleVoile.set("89", [248, 228, 207, 184, 170, 154, 140, 123, 109]); - tailleVoile.set("90", [250, 230, 209, 186, 171, 156, 141, 124, 109]); - tailleVoile.set("91", [253, 232, 211, 188, 173, 157, 143, 124, 110]); - tailleVoile.set("92", [255, 235, 213, 190, 174, 158, 144, 125, 110]); - tailleVoile.set("93", [258, 237, 215, 191, 176, 159, 145, 126, 111]); - tailleVoile.set("94", [260, 239, 217, 193, 177, 161, 146, 127, 112]); - tailleVoile.set("95", [263, 242, 219, 195, 179, 162, 147, 128, 112]); - tailleVoile.set("96", [265, 244, 221, 197, 180, 163, 148, 128, 113]); - tailleVoile.set("97", [268, 246, 223, 198, 182, 164, 149, 129, 113]); - tailleVoile.set("98", [270, 248, 225, 200, 183, 166, 150, 130, 114]); - tailleVoile.set("99", [273, 251, 227, 202, 185, 167, 151, 131, 114]); - tailleVoile.set("100", [275, 253, 229, 203, 186, 168, 152, 131, 115]); - tailleVoile.set("101", [278, 255, 231, 205, 188, 169, 153, 132, 115]); - tailleVoile.set("102", [280, 258, 233, 207, 189, 171, 154, 133, 116]); - tailleVoile.set("103", [283, 260, 235, 209, 190, 172, 155, 134, 116]); - tailleVoile.set("104", [285, 262, 237, 210, 192, 173, 156, 134, 117]); - tailleVoile.set("105", [288, 265, 239, 212, 193, 174, 157, 135, 118]); - tailleVoile.set("106", [290, 267, 241, 214, 195, 175, 158, 136, 118]); - tailleVoile.set("107", [293, 269, 243, 215, 196, 177, 159, 136, 119]); - tailleVoile.set("108", [295, 271, 245, 217, 198, 178, 160, 137, 119]); - tailleVoile.set("109", [298, 274, 247, 219, 199, 179, 161, 138, 120]); - tailleVoile.set("110", [300, 276, 249, 220, 201, 180, 162, 138, 120]); - } + // this.authenticationService.update(updatedUser); + } - private updateTitle() { - this.translateService.get("UserProfile_Title").subscribe((data) => { - this.serviceComm.updatedComponentTitle(data); - }); - } + private calculTailleVoile() { + let tailleVoile = new Map>(); + tailleVoile.set("60", [175, 161, 147, 133, 124, 115, 107, 97, 89]); + tailleVoile.set("61", [178, 163, 149, 135, 126, 116, 108, 98, 90]); + tailleVoile.set("62", [180, 166, 151, 137, 127, 118, 109, 99, 91]); + tailleVoile.set("63", [183, 168, 153, 138, 129, 119, 111, 100, 91]); + tailleVoile.set("64", [185, 170, 155, 140, 130, 121, 112, 101, 92]); + tailleVoile.set("65", [188, 173, 157, 142, 132, 122, 113, 102, 93]); + tailleVoile.set("66", [190, 175, 159, 144, 134, 123, 114, 103, 94]); + tailleVoile.set("67", [193, 177, 161, 146, 135, 125, 116, 104, 94]); + tailleVoile.set("68", [195, 179, 164, 147, 137, 126, 117, 105, 95]); + tailleVoile.set("69", [198, 182, 166, 149, 138, 128, 118, 106, 96]); + tailleVoile.set("70", [200, 184, 168, 151, 140, 129, 119, 107, 96]); + tailleVoile.set("71", [203, 186, 170, 153, 142, 130, 120, 107, 97]); + tailleVoile.set("72", [205, 189, 172, 155, 143, 132, 121, 108, 98]); + tailleVoile.set("73", [208, 191, 174, 156, 145, 133, 123, 109, 99]); + tailleVoile.set("74", [210, 193, 176, 158, 146, 134, 124, 110, 99]); + tailleVoile.set("75", [213, 196, 178, 160, 148, 136, 125, 111, 100]); + tailleVoile.set("76", [215, 198, 180, 162, 150, 137, 126, 112, 101]); + tailleVoile.set("77", [218, 200, 182, 163, 151, 139, 127, 113, 101]); + tailleVoile.set("78", [220, 202, 184, 165, 153, 140, 128, 114, 102]); + tailleVoile.set("79", [223, 205, 186, 167, 154, 141, 129, 115, 103]); + tailleVoile.set("80", [225, 207, 188, 169, 156, 143, 131, 115, 103]); + tailleVoile.set("81", [228, 209, 190, 170, 157, 144, 132, 116, 104]); + tailleVoile.set("82", [230, 212, 192, 172, 159, 145, 133, 117, 104]); + tailleVoile.set("83", [233, 214, 194, 174, 160, 146, 134, 118, 105]); + tailleVoile.set("84", [235, 216, 196, 176, 162, 148, 135, 119, 106]); + tailleVoile.set("85", [238, 219, 198, 177, 163, 149, 136, 120, 106]); + tailleVoile.set("86", [240, 221, 201, 179, 165, 150, 137, 120, 107]); + tailleVoile.set("87", [243, 223, 203, 181, 166, 152, 138, 121, 108]); + tailleVoile.set("88", [245, 225, 205, 183, 168, 153, 139, 122, 108]); + tailleVoile.set("89", [248, 228, 207, 184, 170, 154, 140, 123, 109]); + tailleVoile.set("90", [250, 230, 209, 186, 171, 156, 141, 124, 109]); + tailleVoile.set("91", [253, 232, 211, 188, 173, 157, 143, 124, 110]); + tailleVoile.set("92", [255, 235, 213, 190, 174, 158, 144, 125, 110]); + tailleVoile.set("93", [258, 237, 215, 191, 176, 159, 145, 126, 111]); + tailleVoile.set("94", [260, 239, 217, 193, 177, 161, 146, 127, 112]); + tailleVoile.set("95", [263, 242, 219, 195, 179, 162, 147, 128, 112]); + tailleVoile.set("96", [265, 244, 221, 197, 180, 163, 148, 128, 113]); + tailleVoile.set("97", [268, 246, 223, 198, 182, 164, 149, 129, 113]); + tailleVoile.set("98", [270, 248, 225, 200, 183, 166, 150, 130, 114]); + tailleVoile.set("99", [273, 251, 227, 202, 185, 167, 151, 131, 114]); + tailleVoile.set("100", [275, 253, 229, 203, 186, 168, 152, 131, 115]); + tailleVoile.set("101", [278, 255, 231, 205, 188, 169, 153, 132, 115]); + tailleVoile.set("102", [280, 258, 233, 207, 189, 171, 154, 133, 116]); + tailleVoile.set("103", [283, 260, 235, 209, 190, 172, 155, 134, 116]); + tailleVoile.set("104", [285, 262, 237, 210, 192, 173, 156, 134, 117]); + tailleVoile.set("105", [288, 265, 239, 212, 193, 174, 157, 135, 118]); + tailleVoile.set("106", [290, 267, 241, 214, 195, 175, 158, 136, 118]); + tailleVoile.set("107", [293, 269, 243, 215, 196, 177, 159, 136, 119]); + tailleVoile.set("108", [295, 271, 245, 217, 198, 178, 160, 137, 119]); + tailleVoile.set("109", [298, 274, 247, 219, 199, 179, 161, 138, 120]); + tailleVoile.set("110", [300, 276, 249, 220, 201, 180, 162, 138, 120]); + } + + private updateTitle() { + this.translateService.get("UserProfile_Title").subscribe((data) => { + this.serviceComm.updatedComponentTitle(data); + }); + } }