From b0a4db5a6c7ab7d72f64b6743d2bbafc2b6893b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <sebastien.a-andre@external.total.com>
Date: Wed, 7 Apr 2021 11:06:24 +0200
Subject: [PATCH] =?UTF-8?q?Rotation=20de=20l'image=20zoom=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../list-of-images.component.css              |  9 ++++++++
 .../list-of-images.component.html             |  5 +++--
 .../list-of-images.component.ts               | 22 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
index 3699120..804593e 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
index 8cd4899..dd275d3 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
+++ b/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>
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
index 8ede9b4..6dfbdb4 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
+++ b/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';
+    }
+  }
 }