From 932fba5991c81bf8def103d6b1316cd0e42116ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Sat, 26 Dec 2020 19:18:49 +0100
Subject: [PATCH] Style pour la popin de saut

---
 .../list-of-jumps/list-of-jumps.component.css | 14 +++++++++++++
 .../list-of-jumps.component.html              | 10 +++++----
 .../list-of-jumps/list-of-jumps.component.ts  | 21 +++++++++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
index 134094d..293751b 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
+++ b/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;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
index 17fadb1..f39f996 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+++ b/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>
 
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
index 6c23a4d..9293379 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.ts
+++ b/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
+  };
+  }
 }