New popin for the jump infos

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -7,28 +7,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element" style="text-align: left;">
           <mat-icon aria-hidden="false" aria-label="All informations of the jump" style="cursor: pointer;"
-                    #tooltip="matTooltip" matTooltip="Tooltips in Angular" matTooltipPosition="above"
-                    (click)="tooltip.toggle()">info</mat-icon>
-
-          <ng-template #popinContent>
-            <span>
-              Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
-              <br>Cutaway : {{element.withCutaway}}
-              <br>Notes : {{element.notes}}
-            </span>
-          </ng-template>
-
-
-          <!-- 
-            (mouseover)='showPopin($event, element)'
-            (mouseout)='hidePopin($event, element)'
-
-            <div [ngClass]="calculateClasses(element)" style="display: none;">
-            <span>
-            Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
-            <br>Cutaway : {{element.withCutaway}}
-            <br>Notes : {{element.notes}}</span>
-          </div> -->
+                    (click)='openDialog(element)'>info</mat-icon>
         </td>
       </ng-container>
 

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from "@angular/material/dialog";
 
 import { Observable } from 'rxjs';
 import { JumpResp } from '../../models/jump';
 import { JumpService } from '../../services/jump.service';
 import { ServiceComm } from '../../services/service-comm.service';
+import { JumpInfosComponent } from "../jump-infos/jump-infos.component";
 
 @Component({
   selector: 'app-list-of-jumps',
@@ -29,7 +31,8 @@ export class ListOfJumpsComponent implements OnInit {
 
   constructor(
     private serviceApi: JumpService,
-    private serviceComm: ServiceComm
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
   ) { }
 
   ngOnInit() {
@@ -60,6 +63,16 @@ export class ListOfJumpsComponent implements OnInit {
   calculateClasses(item) {
     return {
       'showPopin': this.showPopinForItemId != -1 && item.id === this.showPopinForItemId,
-  };
+    };
+  }
+
+  openDialog(item: JumpResp) {
+    this.dialog.open(JumpInfosComponent, {
+      data: item,
+      position: {
+        top: '0px',
+        left: '0px'
+      }
+    });
   }
 }