2 MEU DEUS DO CEU

import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { FormControl,FormBuilder, Validators } from '@angular/forms';
import { NgxCroppieComponent } from 'ngx-croppie';
import { CroppieOptions } from 'croppie';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { BadgeImageEditorComponent } from 'src/app/badge-image-editor/badge-image-editor.component';

@Component({
  selector: 'app-identification-badge',
  templateUrl: './identification-badge.component.html',
  styleUrls: ['./identification-badge.component.css']
})

export class IdentificationBadgeComponent {

  @ViewChild('myCanvas') canvasRef: ElementRef;

  reader  = new FileReader();
  image = this.fb.group({
    fileInput: this.fb.control('', Validators.required),
  });
  name = new FormControl('', Validators.required);
  lastName =  new FormControl('', Validators.required);
  file = new FormControl({value: 'None', disabled: true}, Validators.required);
  url = '';
  event;

  constructor(private fb: FormBuilder, public dialog: MatDialog) {
    this.image.get('fileInput').valueChanges.subscribe(r => {
      this.file.setValue(r.replace(/^.*[\\\/]/, ''));
    });
    this.file.setValue('Nenhum arquivo carregado');
   }

  openDialog() {
    let dialogRef = this.dialog.open(BadgeImageEditorComponent, {
      height:'600px',
      width:'600px',
      data : {url: this.url}
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result){
        this.url = result.dataURL;
        this.file.setValue(result.name);
      }

    });
  }

   /**
    * Enables hidden input for loading user image
    */
   uploadPhoto(){
     this.openDialog();
    //document.getElementById('file-input').click();
   }

   /**
    * Displays user's chosen image
    * @param image choose event
    */
   showImage(event){

      let reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]);

      reader.onload = (event) => {
        this.url = event.target.result;
        this.openDialog();
        this.event = event;
      };
   }


  /**
   * Returns error message for empty name field
   */
   getNameErrorMessage() {
      if(this.name.hasError('required')){
        return 'Você precisa preencher este campo'
      }
      return '';

  }

   /**
   * Returns error message for empty last name field
   */
  getLastNameErrorMessage() {
    if(this.lastName.hasError('required')){
      return 'Você precisa preencher este campo';
    }
    return '';
}

 /**
   * Returns error message for empty file field
   */
  getFileErrorMessage() {
    if(this.file.hasError('required')){
      return 'Você precisa preencher este campo'
    }
    return '';
  }

  /**
   * Generate badge image
   */
  generateBadge(){
    const canvas = this.canvasRef.nativeElement;

    this.configureCanvas(canvas);

    this.downloadBadge(canvas);
  };

  /**
   * Create an href element for badge download
   */

  downloadBadge(canvas){
      const a = document.createElement('a');
      a.href = canvas.toDataURL('image/jpeg');
      a.download = 'idenfication-badge.jpg';
      document.body.appendChild(a);
      a.click();
    }

    /**
     * Configure HTML canvas to display the images one on top of the other and display text
     * @param canvas
     */
    configureCanvas(canvas){
      const imgUser = document.getElementById('user-image');
      const imgVirtus = document.getElementById('virtus-image');

      const ctx = canvas.getContext('2d');
      ctx.canvas.width = 3190;
      ctx.canvas.height = 5079;

      ctx.drawImage(imgUser, 0,0,3190,3700);
      ctx.drawImage(imgVirtus, 0,3700,3190,1400);

      ctx.fillStyle = '#112369';
      ctx.font = '200px Sans-Serif';
      ctx.fillText(this.name.value,200,4000);

      ctx.fillStyle = '#112369';
      ctx.font = '250px Sans-Serif';
      ctx.fillText(this.lastName.value,200,4250);
    }

  /**
   * Empty all fields, returning to original state
   */
  discardBadge(){
    this.file.setValue('Nenhum arquivo carregado');
    this.name.setValue('');
    this.lastName.setValue('');
    this.url = '';
  };

}