From 260afb9c9dcf156875f732f9b93795fbf6b2c84d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= <gael.metais@gmail.com>
Date: Wed, 26 Jul 2023 17:54:15 +0200
Subject: [PATCH] Add display for the new Old Image Formats rule

---
 front/src/views/rule.html | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/front/src/views/rule.html b/front/src/views/rule.html
index 3fc4c25..3d9d576 100644
--- a/front/src/views/rule.html
+++ b/front/src/views/rule.html
@@ -339,6 +339,23 @@ <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluraliz
         </div>
     </div>
 
+    <div ng-if="policyName === 'oldImageFormats'">
+        <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.images.length" when="{'one': '1 image', 'other': '{} images'}"></ng-pluralize></h3>
+        <div class="imageOffenders">
+            <div ng-repeat="image in rule.offendersObj.list.images | orderBy:'-maxGain'">
+                <div>
+                    Current file: <url-link url="image.url" max-length="50"></url-link>
+                    <div><a href="{{image.url}}" target="_blank" rel="noopener noreferrer"><img ng-src="{{image.url | https}}" class="checker" /></a></div>
+                </div>
+                <div>
+                    <p>Current weight as a <span>{{image.originalFormat}}</span>:<br/>{{image.originalWeigth | bytes}}</p>
+                    <p ng-if="image.webpSize">Converted to WebP:<br/>{{image.webpSize | bytes}} (<b>-{{image.webpGain | bytes}}</b>)</p>
+                    <p ng-if="image.avifSize">Converted to AVIF:<br/>{{image.avifSize | bytes}} (<b>-{{image.avifGain | bytes}}</b>)</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div ng-if="policyName === 'compression'">
         <h3 ng-if="rule.value > 0">{{rule.value | bytes}} could be saved on <ng-pluralize count="rule.offendersObj.list.files.length" when="{'one': '1 file', 'other': '{} files'}"></ng-pluralize></h3>
         <div class="table">