New popin for the jump infos

Front/skydivelogs-app/src/app/app.module.ts

@@ -52,7 +52,6 @@ import { MatTabsModule } from "@angular/material/tabs";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatCardModule } from "@angular/material/card";
 import { MatRadioModule } from "@angular/material/radio";
-import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -60,6 +59,7 @@ import { JwtAuthInterceptor } from "../interceptor/jwt-auth.interceptor";
 import { ErrorInterceptor } from "../interceptor/error.interceptor";
 import { UserProfileComponent } from "./user-profile/user-profile.component";
 import { ListOfImagesComponent } from "./list-of-images/list-of-images.component";
+import { JumpInfosComponent } from './jump-infos/jump-infos.component';
 
 const appRoutes: Routes = [
   { path: "", component: DefaultComponent, canActivate: [AuthGuardService] },
@@ -130,6 +130,7 @@ const appRoutes: Routes = [
     LoginUserComponent,
     UserProfileComponent,
     ListOfImagesComponent,
+    JumpInfosComponent,
   ],
   imports: [
     RouterModule.forRoot(
@@ -157,8 +158,7 @@ const appRoutes: Routes = [
     MatTabsModule,
     MatDialogModule,
     MatCardModule,
-    MatRadioModule,
-    MatTooltipModule
+    MatRadioModule
   ],
   exports: [HttpClientModule],
   providers: [

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html

@@ -0,0 +1,3 @@
+<p><span>Gear : {{data.gear.mainCanopy}} ({{data.gear.mainCanopy}})</span></p>
+<p><span>Cutaway : {{data.withCutaway}}</span></p>
+<p><span>Notes : {{data.notes}}</span></p>

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JumpInfosComponent } from './jump-infos.component';
+
+describe('JumpInfosComponent', () => {
+  let component: JumpInfosComponent;
+  let fixture: ComponentFixture<JumpInfosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ JumpInfosComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JumpInfosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+import { JumpResp } from '../../models/jump';
+
+@Component({
+  selector: 'app-jump-infos',
+  templateUrl: './jump-infos.component.html',
+  styleUrls: ['./jump-infos.component.css']
+})
+export class JumpInfosComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: JumpResp) {}
+
+  ngOnInit(): void {
+  }
+
+}

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