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

Import "TranslateModule"

Browse Source
This commit is contained in:
sandre
2026-01-14 10:56:01 +01:00
parent 7a667f10c3
commit c4cc91bb06
23 changed files with 653 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +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 { trigger,state, style } from '@angular/animations';
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 { trigger, state, style } from "@angular/animations";
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";
import { TranslateModule } from "@ngx-translate/core";
@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)' })),
])
],
standalone: false
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],
})
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;
@@ -32,13 +33,13 @@ export class ListOfImagesComponent implements OnInit {
public showPopin: boolean;
public dataSourceTable: MatTableDataSource<ImageResp>;
public resultsLength = 0;
public stateRotation: string = 'default';
public stateRotation: string = "default";
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
constructor(
private serviceApi: ImageService,
private serviceComm: ServiceComm
) { }
) {}
ngOnInit(): void {
this.serviceComm.refreshRequest.subscribe((action) => {
@@ -49,33 +50,32 @@ 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),
});
}
private getListOfImages() {
this.serviceApi.getListOfImages()
.subscribe((data) => {
setTimeout(() => {
this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
this.dataSourceTable.paginator = this.paginator;
this.resultsLength = data.length;
}, 500);
});
this.serviceApi.getListOfImages().subscribe((data) => {
setTimeout(() => {
this.dataSourceTable = new MatTableDataSource<ImageResp>(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 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);
@@ -90,16 +90,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";
}
};
}
@@ -109,13 +109,14 @@ export class ListOfImagesComponent implements OnInit {
return;
}
this.serviceApi.addImage(formData.comment, this.selectedFile)
.subscribe(
() => { this.getListOfImages(); }
);
this.serviceApi
.addImage(formData.comment, this.selectedFile)
.subscribe(() => {
this.getListOfImages();
});
}
openModal(image: ImageResp){
openModal(image: ImageResp) {
this.popinImage = image.data;
this.showPopin = true;
}
@@ -125,14 +126,14 @@ export class ListOfImagesComponent implements OnInit {
}
rotate() {
if (this.stateRotation === 'default') {
this.stateRotation = 'rot90';
} else if (this.stateRotation === 'rot90') {
this.stateRotation = 'rot180';
} else if (this.stateRotation === 'rot180') {
this.stateRotation = 'rot270';
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';
this.stateRotation = "default";
}
}
}