tournament image done

Author: alvaroga2175

frontend/src/app/components/tournament/tournament.component.html

@@ -556,9 +556,9 @@ <h3 class="tournament-bracket__round-title">Final</h3>
 
                   <img *ngIf="tournament.image" src="/api/tournaments/{{tournament.id}}/image"><br>
                   <img *ngIf="!tournament.image" src="../../../assets/images/product_02.jpg">
-                  <input *ngIf="tournament.image" type='checkbox' name='removeImage'> <label>Remove image</label><br>
+                  <input *ngIf="tournament.image" type='checkbox' name='removeImage' [(ngModel)]="removeImage"> <label>Remove image</label><br>
 
-                  <input type='file' name='imageField' accept=".jpg, .jpeg">
+                  <input #file   type='file' name='imageField' accept=".jpg, .jpeg">
 
                 </div>
               </div>

frontend/src/app/components/tournament/tournament.component.ts

@@ -3,7 +3,7 @@ import { Team } from './../../models/team.model';
 import { User } from './../../models/user.model';
 import { Tournament } from './../../models/tournament.model';
 import { TournamentService } from 'src/app/services/tournament.service';
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LoginService } from 'src/app/services/login.service';
 import { UserService } from 'src/app/services/user.service';
@@ -31,6 +31,11 @@ export class TournamentComponent{
   hasMoreUsers: boolean = true;
   usersList: User[] = [];
 
+  @ViewChild("file")
+  file: any;
+
+  removeImage:boolean;
+
 
   constructor(private router: Router, activatedRoute: ActivatedRoute, public tournamentService: TournamentService,
     public userService: UserService, public loginService: LoginService) {
@@ -205,14 +210,48 @@ export class TournamentComponent{
       startDate: newstartDate,
       started: false,
       //BE CAREFULL WITH THIS BOOLEAN WHEN UPDATED A IMG (NOT DONE YET)
-      image: false
+      image: this.tournament.image
     }
 
     this.tournamentService.updateTournament(updatedTournanent).subscribe(
-      _ => this.getTournamentInit(this.id)
+      response => { this.uploadImage();
+        this.getTournamentInit(this.id)
+        },
+        error => {
+          if (error.status != 400) {
+            console.error('Unexpected Error on deleteUser')
+          }
+        }
     );
   }
 
+  uploadImage(): void {
+
+    const image = this.file.nativeElement.files[0];
+    if (image) {
+      let formData = new FormData();
+      formData.append("imageFile", image);
+      this.tournamentService.setTournamentImage(this.id,formData).subscribe(
+        _ => {this.afterUploadImage();this.getTournamentInit(this.id)},
+        error => alert('Error uploading user image: ' + error)
+      );
+    } else if(this.removeImage){
+      this.tournamentService.deleteTournamentImage(this.id).subscribe(
+        _ => {this.afterUploadImage();
+          this.getTournamentInit(this.id)},
+        error => alert('Error deleting user image: ' + error)
+      );
+    } else {
+      console.log("Entramos en else")
+      this.afterUploadImage();
+      this.getTournamentInit(this.id);
+    }
+  }
+
+  private afterUploadImage(){
+    this.router.navigate(['/tournament/'+this.id]);
+  }
+
   private formatDateReverse(date: string): string {
     let splitted1 = date.split('  ');
     let splitted2 = splitted1[1].split('/');

frontend/src/app/services/tournament.service.ts

@@ -85,6 +85,20 @@ export class TournamentService {
     ))
   }
 
+  setTournamentImage(id:number, formData: FormData) {
+    return this.http.post(BASE_URL +id+ '/image', formData)
+      .pipe(
+        catchError(error => this.handleError(error))
+      );
+  }
+
+  deleteTournamentImage(id:number){
+    return this.http.delete(BASE_URL +id+ '/image')
+      .pipe(
+        catchError(error => this.handleError(error))
+      );
+  }
+
   private handleError(error: any) {
     console.log("ERROR:");
     console.error(error);