Début pour afficher une popin affichant les

images dans le profil utilisateur.

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

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>

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

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