indent_size à 4
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,23 @@
|
||||
<div class="content">
|
||||
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<mat-label>Aircraft name</mat-label>
|
||||
<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>
|
||||
<form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)">
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<mat-label>Aircraft name</mat-label>
|
||||
<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>
|
||||
<button type="submit" mat-raised-button color="accent">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user