SkydiveLogs/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
import {
  FormGroup,
  FormControl,
  Validators,
  ReactiveFormsModule,
} from "@angular/forms";
import { MatTableDataSource } 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 { 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)" })),
    ]),
  ],
  imports: [
    TranslateModule,
    CommonModule,
    MatIconModule,
    MatPaginatorModule,
    MatFormFieldModule,
    ReactiveFormsModule,
  ],
})
export class ListOfImagesComponent implements OnInit {
  public displayedColumns: Array<string> = ["comment", "data"];
  public imgForm: FormGroup;
  public imageError: string;
  private selectedFile: string;
  public popinImage: string;
  public showPopin: boolean;
  public dataSourceTable: MatTableDataSource<ImageResp>;
  public resultsLength = 0;
  public stateRotation: string = "default";
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  constructor(
    private serviceApi: ImageService,
    private serviceComm: ServiceComm
  ) {}

  ngOnInit(): void {
    this.serviceComm.refreshRequest.subscribe((action) => {
      if (action === AddAction.Gear) {
        this.getListOfImages();
      }
    });
    this.getListOfImages();

    this.imgForm = new FormGroup({
      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);
    });
  }

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

  onSubmit(formData) {
    if (formData.invalid) {
      return;
    }

    this.serviceApi
      .addImage(formData.comment, this.selectedFile)
      .subscribe(() => {
        this.getListOfImages();
      });
  }

  openModal(image: ImageResp) {
    this.popinImage = image.data;
    this.showPopin = true;
  }

  closeModal() {
    this.showPopin = false;
  }

  rotate() {
    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";
    }
  }
}