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

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

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

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

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

@@ -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';
}
};
}
}

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

@@ -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;

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

@@ -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;
}

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

@@ -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

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

@@ -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 {