From 6b927be26aedc957efeb60c9a75cca7391a78319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <sebastien.a-andre@external.total.com>
Date: Tue, 6 Apr 2021 18:26:34 +0200
Subject: [PATCH] =?UTF-8?q?D=C3=A9but=20pour=20afficher=20une=20popin=20af?=
 =?UTF-8?q?fichant=20les=20images=20dans=20le=20profil=20utilisateur.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../list-of-images.component.css              | 33 +++++++++++++++++++
 .../list-of-images.component.html             | 11 ++++++-
 .../list-of-images.component.ts               | 16 ++++++++-
 .../src/services/image.service.ts             |  9 ++---
 4 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
index e69de29..7f32ee1 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
@@ -0,0 +1,33 @@
+.slide-modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 10px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: #000000;
+  }
+  
+  .slide-modal-content {
+    /* position: relative; */
+    margin: auto;
+    padding: 0;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .close {
+    color: white;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 35px;
+    font-weight: bold;
+  }
+  
+  .cursor {
+    cursor: pointer;
+  }
\ No newline at end of file
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
index fdf00fe..1780251 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
@@ -28,7 +28,9 @@
 
     <ng-container matColumnDef="data">
       <th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
-      <td mat-cell *matCellDef="let element" style="text-align: center;"><img src="{{element.data}}" alt="toto" style="width:50%;"></td>
+      <td mat-cell *matCellDef="let element" style="text-align: center;">
+        <img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)">
+      </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
@@ -37,3 +39,10 @@
 
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
+
+<div id="imgModal" class="slide-modal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
+  <span class="close cursor" (click)="closeModal()">&times;</span>
+  <div class="slide-modal-content">
+    <img class="images" src="{{ popinImage }}" (click)="closeModal()" style="width: 100%;  display: table;">
+  </div>
+</div>
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
index 02d7b73..8ede9b4 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
@@ -18,6 +18,8 @@ export class ListOfImagesComponent implements OnInit {
   public imgForm: FormGroup;
   public imageError: string;
   private selectedFile: string;
+  public popinImage: string;
+  public showPopin: boolean;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -96,6 +98,18 @@ export class ListOfImagesComponent implements OnInit {
       return;
     }
 
-    this.serviceApi.AddImage(formData.comment, this.selectedFile);
+    this.serviceApi.AddImage(formData.comment, this.selectedFile)
+                   .subscribe(
+                     () => { this.getListOfImages(); }
+                   );
+  }
+
+  openModal(image: ImageResp){
+    this.popinImage = image.data;
+    this.showPopin = true;
+  }
+
+  closeModal() {
+    this.showPopin = false;
   }
 }
diff --git a/Front/skydivelogs-app/src/services/image.service.ts b/Front/skydivelogs-app/src/services/image.service.ts
index eb6f63f..e26dfa2 100644
--- a/Front/skydivelogs-app/src/services/image.service.ts
+++ b/Front/skydivelogs-app/src/services/image.service.ts
@@ -25,11 +25,8 @@ export class ImageService extends BaseService {
       data: dataImg,
     };
 
-    this.http.post(`${this.apiUrl}/Image`, 
-                   bodyNewImage, 
-                   { headers: this.headers })
-              .subscribe(
-                error => { console.error(error); }
-              );
+    return this.http.post(`${this.apiUrl}/Image`, 
+                          bodyNewImage, 
+                          { headers: this.headers });
   }
 }