Style pour la popin de saut

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

@@ -26,3 +26,17 @@ table {
   align-items: initial;
   padding-top: 25px;
 }
+
+.stylePopin {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  border: 1px solid black;
+  z-index: 1000;
+}
+.showPopin {
+  display: '';
+}
+.hidePopin {
+  display: none;
+}

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

@@ -4,10 +4,12 @@
       <ng-container matColumnDef="infos">
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element" style="text-align: left; cursor: pointer;">
-          <mat-icon aria-hidden="false" aria-label="All informations of the jump">info</mat-icon>
-          <span style="display: block;">Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})</span>
-          <span style="display: block;">Cutaway : {{element.withCutaway}}</span>
-          <span style="display: block;">Notes : {{element.notes}}</span>
+          <mat-icon aria-hidden="false" aria-label="All informations of the jump" 
+                    (click)="showPopin($event, element)" style="display: block;">info</mat-icon>
+          <span [ngClass]="calculateClasses(element)">
+            Gear : {{element.gear.mainCanopy}} ({{element.gear.mainCanopy}})
+            <br>Cutaway : {{element.withCutaway}}
+            <br>Notes : {{element.notes}}</span>
         </td>
       </ng-container>
 

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

@@ -24,6 +24,7 @@ export class ListOfJumpsComponent implements OnInit {
   ];
   public dataSourceTable;
   public resultsLength = 0;
+  private previousElementId = -1;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -47,4 +48,24 @@ export class ListOfJumpsComponent implements OnInit {
       }, 500);
     });
   }
+
+  showPopin(event, item) {
+    let elementId = item.id;
+
+    if (this.previousElementId == -1) {
+      this.previousElementId = elementId;
+    }
+
+    if (elementId != this.previousElementId ) {
+      this.previousElementId = elementId;
+    }
+  }
+
+  calculateClasses(item) {
+    return {
+      'showPopin': item.id === this.previousElementId,
+      'hidePopin': item.id != this.previousElementId,
+      'stylePopin': true
+  };
+  }
 }