From a755d5f362aebda2046162d58b5d93bca5ec55c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= Date: Wed, 29 Jul 2020 12:54:59 +0200 Subject: [PATCH 1/5] =?UTF-8?q?D=C3=A9but=20de=20fix=20pour=20avoir=20la?= =?UTF-8?q?=20navigation=20au=20clavier=20dans=20le=20formulaire=20de=20lo?= =?UTF-8?q?gin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/login-user/login-user.component.html | 6 +-- .../app/login-user/login-user.component.ts | 37 +++++++++++-------- .../skydivelogs-app/src/assets/css/styles.css | 2 +- 3 files changed, 26 insertions(+), 19 deletions(-) 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 3add5bb..35d6714 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 @@ -2,8 +2,8 @@

Username - + Username is required @@ -16,7 +16,7 @@ Password + [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }"> Password is required 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 105fe20..6bbe913 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 @@ -1,22 +1,24 @@ -import { Component, OnInit } from "@angular/core"; -import { Router, ActivatedRoute } from "@angular/router"; -import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MatInput } from '@angular/material/input'; -import { first } from "rxjs/operators"; +import { first } from 'rxjs/operators'; -import { AuthenticationService } from "../../services/authentication.service"; +import { AuthenticationService } from '../../services/authentication.service'; @Component({ - selector: "app-login-user", - templateUrl: "./login-user.component.html", - styleUrls: ["./login-user.component.css"] + selector: 'app-login-user', + templateUrl: './login-user.component.html', + styleUrls: ['./login-user.component.css'] }) -export class LoginUserComponent implements OnInit { +export class LoginUserComponent implements OnInit, AfterViewInit { loginForm: FormGroup; loading = false; submitted = false; returnUrl: string; - error = ""; + error = ''; + @ViewChild('username') userNameInput: MatInput; constructor( private formBuilder: FormBuilder, @@ -26,26 +28,31 @@ export class LoginUserComponent implements OnInit { ) { // redirect to home if already logged in if (this.authenticationService.currentUserValue) { - this.router.navigate(["/"]); + this.router.navigate(['/']); } } + ngAfterViewInit() { + this.userNameInput.focus(); + } + ngOnInit() { this.loginForm = this.formBuilder.group( { - username: ["", [Validators.required, Validators.minLength(3)]], + username: ['', [Validators.required, Validators.minLength(3)]], password: [ - "", + '', [ Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/ ] ] }, - { updateOn: "blur" } + { updateOn: 'blur' } ); // get return url from route parameters or default to '/' - this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/"; + this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; + } get formCtrls() { diff --git a/Front/skydivelogs-app/src/assets/css/styles.css b/Front/skydivelogs-app/src/assets/css/styles.css index 1c8e9c9..063df0b 100644 --- a/Front/skydivelogs-app/src/assets/css/styles.css +++ b/Front/skydivelogs-app/src/assets/css/styles.css @@ -3,7 +3,7 @@ html, body { min-height: 100vh; - width: 100vw; + /*width: 100vw;*/ box-sizing: border-box; overflow: auto; } From 1e3e728fdd2bcc6b8924b3cf859df7313e44d47f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= Date: Wed, 29 Jul 2020 13:22:19 +0200 Subject: [PATCH 2/5] Un de syle sur la liste des DZs --- .../list-of-dzs/list-of-dzs.component.html | 12 +++--- .../app/list-of-dzs/list-of-dzs.component.ts | 43 +++++++++---------- .../src/app/login/login.component.html | 4 +- .../skydivelogs-app/src/assets/css/styles.css | 2 - 4 files changed, 29 insertions(+), 32 deletions(-) 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 c704e07..6a1c900 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 @@ -4,8 +4,8 @@ - - + @@ -39,10 +42,7 @@ - - - - + 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 ce8e8e9..82b2b9f 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 @@ -1,27 +1,26 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { MatPaginator } from "@angular/material/paginator"; -import { MatTableDataSource } from "@angular/material/table"; -import { MatDialog } from "@angular/material/dialog"; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatTableDataSource } from '@angular/material/table'; +import { MatDialog } from '@angular/material/dialog'; -import { AddAction } from "../../models/add-action.enum"; -import { DropZoneResp } from "../../models/dropzone"; -import { DropzoneService } from "../../services/dropzone.service"; -import { ServiceComm } from "../../services/service-comm.service"; -import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component"; +import { AddAction } from '../../models/add-action.enum'; +import { DropZoneResp } from '../../models/dropzone'; +import { DropzoneService } from '../../services/dropzone.service'; +import { ServiceComm } from '../../services/service-comm.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"], + selector: 'app-list-of-dzs', + templateUrl: './list-of-dzs.component.html', + styleUrls: ['./list-of-dzs.component.css'], }) export class ListOfDzsComponent implements OnInit { public displayedColumns: Array = [ - "isfavorite", - "id", - "name", - "address", - "email", - "type", + 'isfavorite', + 'id', + 'name', + 'address', + 'type', ]; public dataSourceTable: MatTableDataSource; public resultsLength = 0; @@ -31,7 +30,7 @@ export class ListOfDzsComponent implements OnInit { private serviceApi: DropzoneService, private serviceComm: ServiceComm, public dialog: MatDialog - ) {} + ) { } ngOnInit() { this.serviceComm.refreshRequest.subscribe((action) => { @@ -40,7 +39,7 @@ export class ListOfDzsComponent implements OnInit { this.getListOfDropZones(); } }); - this.serviceComm.UpdatedComponentTitle("List of DZs"); + this.serviceComm.UpdatedComponentTitle('List of DZs'); this.getListOfDropZones(); } @@ -73,8 +72,8 @@ export class ListOfDzsComponent implements OnInit { openDialogToAdd() { this.dialog.open(NewDropZoneComponent, { - height: "400px", - width: "600px", + height: '400px', + width: '600px', }); } } diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html index 17930f4..4307049 100644 --- a/Front/skydivelogs-app/src/app/login/login.component.html +++ b/Front/skydivelogs-app/src/app/login/login.component.html @@ -5,10 +5,10 @@ - + - + diff --git a/Front/skydivelogs-app/src/assets/css/styles.css b/Front/skydivelogs-app/src/assets/css/styles.css index 063df0b..bb7b7ed 100644 --- a/Front/skydivelogs-app/src/assets/css/styles.css +++ b/Front/skydivelogs-app/src/assets/css/styles.css @@ -1,5 +1,3 @@ -/* @import 'bootstrap-4.3.1.min.css'; */ - html, body { min-height: 100vh; From caa7215b71de594b0359ffe3feb6718b0d2dd771 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= Date: Wed, 29 Jul 2020 14:17:57 +0200 Subject: [PATCH 3/5] 2-3 changements d'affichage dans les tableaux --- .../list-of-dzs/list-of-dzs.component.html | 6 ++-- .../list-of-jumps.component.html | 7 ++++ .../list-of-jumps/list-of-jumps.component.ts | 36 +++++++++---------- .../src/app/new-jump/new-jump.component.html | 4 +-- .../src/environments/environment.prod.ts | 4 +-- .../src/environments/environment.ts | 4 +-- 6 files changed, 34 insertions(+), 27 deletions(-) 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 6a1c900..3ea27e3 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 @@ -6,10 +6,10 @@
+ favorite map + + mail_outline + E-mail{{element.email}}Type {{element.type}} - favorite + favorite favorite_border + (click)="setToFavorite(element)" style="cursor: pointer;">favorite_border link 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 bc47a54..b15b645 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,6 +1,13 @@
+ + + + + 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 a25a4d8..6c23a4d 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,26 +1,26 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { MatPaginator } from "@angular/material/paginator"; -import { MatTableDataSource } from "@angular/material/table"; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatTableDataSource } from '@angular/material/table'; -import { Observable } from "rxjs"; -import { JumpResp } from "../../models/jump"; -import { JumpService } from "../../services/jump.service"; -import { ServiceComm } from "../../services/service-comm.service"; +import { Observable } from 'rxjs'; +import { JumpResp } from '../../models/jump'; +import { JumpService } from '../../services/jump.service'; +import { ServiceComm } from '../../services/service-comm.service'; @Component({ - selector: "app-list-of-jumps", - templateUrl: "./list-of-jumps.component.html", - styleUrls: ["./list-of-jumps.component.css"] + selector: 'app-list-of-jumps', + templateUrl: './list-of-jumps.component.html', + styleUrls: ['./list-of-jumps.component.css'] }) export class ListOfJumpsComponent implements OnInit { public listOfJumps: Observable>; public displayedColumns: Array = [ - "id", - "jumpDate", - "jumpType", - "aircraft", - "dropZone", - "gear" + 'infos', + 'id', + 'jumpDate', + 'jumpType', + 'aircraft', + 'dropZone' ]; public dataSourceTable; public resultsLength = 0; @@ -29,10 +29,10 @@ export class ListOfJumpsComponent implements OnInit { constructor( private serviceApi: JumpService, private serviceComm: ServiceComm - ) {} + ) { } ngOnInit() { - this.serviceComm.UpdatedComponentTitle("List of jumps"); + this.serviceComm.UpdatedComponentTitle('List of jumps'); this.getListOfJumps(); } 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 03f1d8b..a1871da 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 @@ -37,8 +37,8 @@ {{dropZone.name}} - favorite DZ + + favorite 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 e6b58be..5220310 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,16 +1,18 @@ -import { Component, OnInit } from "@angular/core"; -import { FormControl, FormGroup, Validators } from "@angular/forms"; -import { AircraftService } from "../../services/aircraft.service"; -import { ServiceComm } from "../../services/service-comm.service"; -import { AddAction } from "../../models/add-action.enum"; +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { AircraftService } from '../../services/aircraft.service'; +import { ServiceComm } from '../../services/service-comm.service'; +import { AddAction } from '../../models/add-action.enum'; @Component({ - selector: "app-new-aircraft", - templateUrl: "./new-aircraft.component.html", - styleUrls: ["./new-aircraft.component.css"] + selector: 'app-new-aircraft', + templateUrl: './new-aircraft.component.html', + styleUrls: ['./new-aircraft.component.css'] }) export class NewAircraftComponent implements OnInit { public addForm: FormGroup; + public imageError: string; + private selectedFile: string; constructor( private serviceComm: ServiceComm, @@ -18,16 +20,59 @@ export class NewAircraftComponent implements OnInit { ) { this.addForm = new FormGroup( { - aircraftName: new FormControl("", Validators.required) + aircraftName: new FormControl('', Validators.required) }, - { updateOn: "blur" } + { updateOn: 'blur' } ); } - ngOnInit() {} + ngOnInit() { } onSubmit(formData) { - this.serviceApi.AddAircraft(formData.aircraftName); + if (formData.invalid) { + return; + } + + this.serviceApi.AddAircraft(formData.aircraftName, this.selectedFile); this.serviceComm.RefreshData(AddAction.Aircraft); } + + 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'; + } + }; + } } 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 c1488e5..dfdbca2 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,20 +1,20 @@ -import { Component, OnInit } from "@angular/core"; -import { FormGroup, FormControl, Validators } from "@angular/forms"; -import { AuthenticationService } from "../../services/authentication.service"; -import { User } from "../../models/user"; +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { AuthenticationService } from '../../services/authentication.service'; +import { User } from '../../models/user'; @Component({ - selector: "app-user-profile", - templateUrl: "./user-profile.component.html", - styleUrls: ["./user-profile.component.css"], + selector: 'app-user-profile', + templateUrl: './user-profile.component.html', + styleUrls: ['./user-profile.component.css'], }) export class UserProfileComponent implements OnInit { public userForm: FormGroup; - constructor(private authenticationService: AuthenticationService) {} + constructor(private authenticationService: AuthenticationService) { } ngOnInit(): void { - let currentUser = this.authenticationService.currentUserValue; + const currentUser = this.authenticationService.currentUserValue; this.userForm = new FormGroup( { @@ -32,15 +32,15 @@ export class UserProfileComponent implements OnInit { Validators.email, ]), currentPassword: new FormControl( - "", - Validators.pattern("^[A-Za-z0-9_-]{8,15}$") + '', + Validators.pattern('^[A-Za-z0-9_-]{8,15}$') ), newPassword: new FormControl( - "", - Validators.pattern("^[A-Za-z0-9_-]{8,15}$") + '', + Validators.pattern('^[A-Za-z0-9_-]{8,15}$') ), }, - { updateOn: "blur" } + { updateOn: 'blur' } ); } @@ -49,7 +49,7 @@ export class UserProfileComponent implements OnInit { return; } - let updatedUser = new User(); + const updatedUser = new User(); updatedUser.login = formData.username; updatedUser.password = formData.password; updatedUser.firstName = formData.firstname; diff --git a/Front/skydivelogs-app/src/models/aircraft.ts b/Front/skydivelogs-app/src/models/aircraft.ts index 2a5322f..b04eddc 100644 --- a/Front/skydivelogs-app/src/models/aircraft.ts +++ b/Front/skydivelogs-app/src/models/aircraft.ts @@ -5,6 +5,7 @@ export class AircraftReq { public id: number; public name: string; + public imageData: string; } export class AircraftResp { @@ -14,4 +15,5 @@ export class AircraftResp { public id: number; public name: string; + public imageData: string; } diff --git a/Front/skydivelogs-app/src/services/aircraft.service.ts b/Front/skydivelogs-app/src/services/aircraft.service.ts index 41a85c9..56e9d9c 100644 --- a/Front/skydivelogs-app/src/services/aircraft.service.ts +++ b/Front/skydivelogs-app/src/services/aircraft.service.ts @@ -1,10 +1,10 @@ -import { Injectable } from "@angular/core"; -import { HttpClient } from "@angular/common/http"; -import { Observable } from "rxjs"; +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; -import { AircraftResp, AircraftReq } from "../models/aircraft"; +import { AircraftResp, AircraftReq } from '../models/aircraft'; -import { BaseService } from "./base.service"; +import { BaseService } from './base.service'; @Injectable() export class AircraftService extends BaseService { @@ -18,10 +18,11 @@ export class AircraftService extends BaseService { }); } - public AddAircraft(aircraftName: string) { + public AddAircraft(aircraftName: string, dataImg: string) { const bodyNewAircraft: AircraftReq = { id: 0, - name: aircraftName + name: aircraftName, + imageData: dataImg }; this.http diff --git a/Front/skydivelogs-app/src/services/image.service.ts b/Front/skydivelogs-app/src/services/image.service.ts index 360bb56..a16b43f 100644 --- a/Front/skydivelogs-app/src/services/image.service.ts +++ b/Front/skydivelogs-app/src/services/image.service.ts @@ -1,10 +1,10 @@ -import { Injectable } from "@angular/core"; -import { HttpClient } from "@angular/common/http"; -import { Observable } from "rxjs"; +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; -import { ImageResp, ImageReq } from "../models/Image"; +import { ImageResp, ImageReq } from '../models/Image'; -import { BaseService } from "./base.service"; +import { BaseService } from './base.service'; @Injectable() export class ImageService extends BaseService {
+ info + ID {{element.id}}