Rotation de l'image zoomée

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

@@ -31,6 +31,15 @@
   font-weight: bold;
 }
 
+.rotate {
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 65px;
+  font-size: 35px;
+  font-weight: bold;
+}
+
 .cursor {
   cursor: pointer;
 }

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

@@ -29,7 +29,7 @@
     <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="image" style="width:50%;" (click)="openModal(element)">
+        <img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)" class="cursor">
       </td>
     </ng-container>
 
@@ -42,7 +42,8 @@
 
 <div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
   <span class="close cursor" (click)="closeModal()">&times;</span>
+  <mat-icon aria-hidden="false" aria-label="Rotation" (click)="rotate()" class="rotate cursor">undo</mat-icon>
   <div class="imgbox">
-    <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()">
+    <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()" [@rotatedState]='stateRotation'>
   </div>
 </div>

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

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
+import { trigger,state, style } from '@angular/animations';
 
 import { ImageService } from '../../services/image.service';
 import { ServiceComm } from '../../services/service-comm.service';
@@ -12,6 +13,14 @@ import { AddAction } from '../../models/add-action.enum';
   selector: 'app-list-of-images',
   templateUrl: './list-of-images.component.html',
   styleUrls: ['./list-of-images.component.css'],
+  animations: [
+      trigger('rotatedState', [
+        state('default', style({ transform: 'rotate(0)' })),
+        state('rot90', style({ transform: 'rotate(-90deg)' })),
+        state('rot180', style({ transform: 'rotate(-180deg)' })),
+        state('rot270', style({ transform: 'rotate(-270deg)' })),
+    ])
+  ]
 })
 export class ListOfImagesComponent implements OnInit {
   public displayedColumns: Array<string> = ['comment', 'data'];
@@ -22,6 +31,7 @@ export class ListOfImagesComponent implements OnInit {
   public showPopin: boolean;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
+  public stateRotation: string = 'default';
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -112,4 +122,16 @@ export class ListOfImagesComponent implements OnInit {
   closeModal() {
     this.showPopin = false;
   }
+
+  rotate() {
+    if (this.stateRotation === 'default') {
+      this.stateRotation = 'rot90';
+    } else if (this.stateRotation === 'rot90') {
+      this.stateRotation = 'rot180';
+    } else if (this.stateRotation === 'rot180') {
+      this.stateRotation = 'rot270';
+    } else {
+      this.stateRotation = 'default';
+    }
+  }
 }