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

Update to Angular v19 and fixing (#3)

Browse Source 
Reviewed-on: #3
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>
This commit was merged in pull request #3.
This commit is contained in:
sandre
2026-01-20 10:56:31 +00:00
committed by sandre
parent af44e50f54
commit 137b2ab1fc
117 changed files with 3496 additions and 2471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,30 +1,51 @@
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,
ReactiveFormsModule,
} from "@angular/forms";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { trigger, state, style } from "@angular/animations";
import { CommonModule } from "@angular/common";
import { MatIconModule } from "@angular/material/icon";
import { MatFormFieldModule } from "@angular/material/form-field";
import { TranslateModule } from "@ngx-translate/core";
import { MatButtonModule } from "@angular/material/button";
import { MatInputModule } from "@angular/material/input";
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'],
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,
CommonModule,
MatIconModule,
MatPaginatorModule,
MatFormFieldModule,
ReactiveFormsModule,
MatTableModule,
MatButtonModule,
MatInputModule,
],
})
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 +53,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
) { }
private serviceComm: ServiceComm,
) {}
ngOnInit(): void {
this.serviceComm.refreshRequest.subscribe((action) => {
@@ -49,33 +70,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 +110,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 +129,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 +146,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";
}
}
}