sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Début d'ajout d'une image pour les avions

Browse Source
This commit is contained in:
Sébastien André
2020-07-30 18:57:51 +02:00
parent eee6f596ac
commit 6c654d298d
8 changed files with 130 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
View File

@@ -1,21 +1,21 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from "@angular/material/paginator"; import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from "@angular/material/table"; import { MatTableDataSource } from '@angular/material/table';
import { MatDialog } from "@angular/material/dialog"; import { MatDialog } from '@angular/material/dialog';
import { AircraftResp } from "../../models/aircraft"; import { AircraftResp } from '../../models/aircraft';
import { AircraftService } from "../../services/aircraft.service"; import { AircraftService } from '../../services/aircraft.service';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
import { NewAircraftComponent } from "../new-aircraft/new-aircraft.component"; import { NewAircraftComponent } from '../new-aircraft/new-aircraft.component';
import { AddAction } from "../../models/add-action.enum"; import { AddAction } from '../../models/add-action.enum';
@Component({ @Component({
selector: "app-list-of-aircrafts", selector: 'app-list-of-aircrafts',
templateUrl: "./list-of-aircrafts.component.html", templateUrl: './list-of-aircrafts.component.html',
styleUrls: ["./list-of-aircrafts.component.css"] styleUrls: ['./list-of-aircrafts.component.css']
}) })
export class ListOfAircraftsComponent implements OnInit { export class ListOfAircraftsComponent implements OnInit {
public displayedColumns: Array<string> = ["id", "name"]; public displayedColumns: Array<string> = ['id', 'name'];
public dataSourceTable: MatTableDataSource<AircraftResp>; public dataSourceTable: MatTableDataSource<AircraftResp>;
public resultsLength = 0; public resultsLength = 0;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -33,7 +33,7 @@ export class ListOfAircraftsComponent implements OnInit {
this.getListOfAircrafts(); this.getListOfAircrafts();
} }
}); });
this.serviceComm.UpdatedComponentTitle("List of aircrafts"); this.serviceComm.UpdatedComponentTitle('List of aircrafts');
this.getListOfAircrafts(); this.getListOfAircrafts();
} }

46
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
View File

@@ -1,25 +1,25 @@
import { Component, OnInit, ViewChild } from "@angular/core"; import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms"; import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableDataSource } from "@angular/material/table"; import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from "@angular/material/paginator"; import { MatPaginator } from '@angular/material/paginator';
import { ImageService } from "../../services/image.service"; import { ImageService } from '../../services/image.service';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
import { ImageResp } from "../../models/Image"; import { ImageResp } from '../../models/Image';
import { AddAction } from "../../models/add-action.enum"; import { AddAction } from '../../models/add-action.enum';
@Component({ @Component({
selector: "app-list-of-images", selector: 'app-list-of-images',
templateUrl: "./list-of-images.component.html", templateUrl: './list-of-images.component.html',
styleUrls: ["./list-of-images.component.css"], styleUrls: ['./list-of-images.component.css'],
}) })
export class ListOfImagesComponent implements OnInit { export class ListOfImagesComponent implements OnInit {
public displayedColumns: Array<string> = ["comment", "data"]; public displayedColumns: Array<string> = ['comment', 'data'];
public imgForm: FormGroup; public imgForm: FormGroup;
public imageError: string; public imageError: string;
private selectedFile: string;
public dataSourceTable: MatTableDataSource<ImageResp>; public dataSourceTable: MatTableDataSource<ImageResp>;
public resultsLength = 0; public resultsLength = 0;
private selectedFile: string;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor( constructor(
@@ -36,8 +36,8 @@ export class ListOfImagesComponent implements OnInit {
this.getListOfImages(); this.getListOfImages();
this.imgForm = new FormGroup({ this.imgForm = new FormGroup({
comment: new FormControl("", Validators.required), comment: new FormControl('', Validators.required),
image: new FormControl("", Validators.required), image: new FormControl('', Validators.required),
}); });
} }
@@ -52,16 +52,16 @@ export class ListOfImagesComponent implements OnInit {
} }
public onFileChanged(fileInput: any) { public onFileChanged(fileInput: any) {
var file = fileInput.dataTransfer const file = fileInput.dataTransfer
? fileInput.dataTransfer.files[0] ? fileInput.dataTransfer.files[0]
: fileInput.target.files[0]; : fileInput.target.files[0];
const allowed_types = ["image/png", "image/jpeg"]; const allowed_types = ['image/png', 'image/jpeg'];
const max_size = 20971520; const max_size = 20971520;
if (!allowed_types.includes(file.type)) { if (!allowed_types.includes(file.type)) {
this.imageError = "Only Images are allowed ( JPG | PNG )"; this.imageError = 'Only Images are allowed ( JPG | PNG )';
} else if (file.size > max_size) { } else if (file.size > max_size) {
this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb"; this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
} else { } else {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = this.checkAndExtractDataToBase64.bind(this); reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -76,16 +76,16 @@ export class ListOfImagesComponent implements OnInit {
const image = new Image(); const image = new Image();
image.src = e.target.result; image.src = e.target.result;
image.onload = (rs) => { image.onload = (rs) => {
const img_height = rs.currentTarget["height"]; const img_height = rs.currentTarget['height'];
const img_width = rs.currentTarget["width"]; const img_width = rs.currentTarget['width'];
if (img_height > max_height && img_width > max_width) { if (img_height > max_height && img_width > max_width) {
this.imageError = this.imageError =
"Maximum dimentions allowed " + max_height + "*" + max_width + "px"; 'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
} else { } else {
const imgBase64Path = e.target.result; const imgBase64Path = e.target.result;
this.selectedFile = imgBase64Path; this.selectedFile = imgBase64Path;
this.imageError = "OK"; this.imageError = 'OK';
} }
}; };
} }

4
Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
View File

@@ -6,6 +6,10 @@
<input matInput type="text" formControlName="aircraftName"> <input matInput type="text" formControlName="aircraftName">
</mat-form-field> </mat-form-field>
</p> </p>
<p>
<input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
(change)="onFileChanged($event)" />
</p>
<button type="submit" mat-raised-button color="accent">Add</button> <button type="submit" mat-raised-button color="accent">Add</button>
</form> </form>

67
Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts
View File

@@ -1,16 +1,18 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms"; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AircraftService } from "../../services/aircraft.service"; import { AircraftService } from '../../services/aircraft.service';
import { ServiceComm } from "../../services/service-comm.service"; import { ServiceComm } from '../../services/service-comm.service';
import { AddAction } from "../../models/add-action.enum"; import { AddAction } from '../../models/add-action.enum';
@Component({ @Component({
selector: "app-new-aircraft", selector: 'app-new-aircraft',
templateUrl: "./new-aircraft.component.html", templateUrl: './new-aircraft.component.html',
styleUrls: ["./new-aircraft.component.css"] styleUrls: ['./new-aircraft.component.css']
}) })
export class NewAircraftComponent implements OnInit { export class NewAircraftComponent implements OnInit {
public addForm: FormGroup; public addForm: FormGroup;
public imageError: string;
private selectedFile: string;
constructor( constructor(
private serviceComm: ServiceComm, private serviceComm: ServiceComm,
@@ -18,16 +20,59 @@ export class NewAircraftComponent implements OnInit {
) { ) {
this.addForm = new FormGroup( this.addForm = new FormGroup(
{ {
aircraftName: new FormControl("", Validators.required) aircraftName: new FormControl('', Validators.required)
}, },
{ updateOn: "blur" } { updateOn: 'blur' }
); );
} }
ngOnInit() { } ngOnInit() { }
onSubmit(formData) { onSubmit(formData) {
this.serviceApi.AddAircraft(formData.aircraftName); if (formData.invalid) {
return;
}
this.serviceApi.AddAircraft(formData.aircraftName, this.selectedFile);
this.serviceComm.RefreshData(AddAction.Aircraft); 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';
}
};
}
} }

28
Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts
View File

@@ -1,12 +1,12 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms"; import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthenticationService } from "../../services/authentication.service"; import { AuthenticationService } from '../../services/authentication.service';
import { User } from "../../models/user"; import { User } from '../../models/user';
@Component({ @Component({
selector: "app-user-profile", selector: 'app-user-profile',
templateUrl: "./user-profile.component.html", templateUrl: './user-profile.component.html',
styleUrls: ["./user-profile.component.css"], styleUrls: ['./user-profile.component.css'],
}) })
export class UserProfileComponent implements OnInit { export class UserProfileComponent implements OnInit {
public userForm: FormGroup; public userForm: FormGroup;
@@ -14,7 +14,7 @@ export class UserProfileComponent implements OnInit {
constructor(private authenticationService: AuthenticationService) { } constructor(private authenticationService: AuthenticationService) { }
ngOnInit(): void { ngOnInit(): void {
let currentUser = this.authenticationService.currentUserValue; const currentUser = this.authenticationService.currentUserValue;
this.userForm = new FormGroup( this.userForm = new FormGroup(
{ {
@@ -32,15 +32,15 @@ export class UserProfileComponent implements OnInit {
Validators.email, Validators.email,
]), ]),
currentPassword: new FormControl( currentPassword: new FormControl(
"", '',
Validators.pattern("^[A-Za-z0-9_-]{8,15}$") Validators.pattern('^[A-Za-z0-9_-]{8,15}$')
), ),
newPassword: new FormControl( 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; return;
} }
let updatedUser = new User(); const updatedUser = new User();
updatedUser.login = formData.username; updatedUser.login = formData.username;
updatedUser.password = formData.password; updatedUser.password = formData.password;
updatedUser.firstName = formData.firstname; updatedUser.firstName = formData.firstname;

2
Front/skydivelogs-app/src/models/aircraft.ts
View File

@@ -5,6 +5,7 @@ export class AircraftReq {
public id: number; public id: number;
public name: string; public name: string;
public imageData: string;
} }
export class AircraftResp { export class AircraftResp {
@@ -14,4 +15,5 @@ export class AircraftResp {
public id: number; public id: number;
public name: string; public name: string;
public imageData: string;
} }

15
Front/skydivelogs-app/src/services/aircraft.service.ts
View File

@@ -1,10 +1,10 @@
import { Injectable } from "@angular/core"; import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http"; import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs"; 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() @Injectable()
export class AircraftService extends BaseService { 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 = { const bodyNewAircraft: AircraftReq = {
id: 0, id: 0,
name: aircraftName name: aircraftName,
imageData: dataImg
}; };
this.http this.http

10
Front/skydivelogs-app/src/services/image.service.ts
View File

@@ -1,10 +1,10 @@
import { Injectable } from "@angular/core"; import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http"; import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs"; 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() @Injectable()
export class ImageService extends BaseService { export class ImageService extends BaseService {