From 709bc87a36f7696d2be47a5b8eb423d992fa9b52 Mon Sep 17 00:00:00 2001
From: Emanuele <55278049+elax46@users.noreply.github.com>
Date: Thu, 23 Jun 2022 11:02:02 +0200
Subject: [PATCH] Fix missing translatable energy texts (#12877)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Philip Allgaier <philip.allgaier@gmx.de>
---
 .../cards/energy/hui-energy-compare-card.ts   | 32 ++++++++++---------
 .../components/hui-energy-period-selector.ts  |  8 +++--
 translations/frontend/en.json                 |  7 +++-
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
index 0d49566b04..0f8181c44c 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts
@@ -56,21 +56,23 @@ export class HuiEnergyCompareCard
 
     return html`
       <ha-alert dismissable @alert-dismissed-clicked=${this._stopCompare}>
-        You are comparing the period
-        <b
-          >${formatDate(this._start!, this.hass.locale)}${dayDifference > 0
-            ? ` -
-        ${formatDate(this._end || endOfDay(new Date()), this.hass.locale)}`
-            : ""}</b
-        >
-        with period
-        <b
-          >${formatDate(this._startCompare, this.hass.locale)}${dayDifference >
-          0
-            ? ` -
-        ${formatDate(this._endCompare, this.hass.locale)}`
-            : ""}</b
-        >
+        ${this.hass.localize("ui.panel.energy.compare.info", {
+          start: html`<b
+            >${formatDate(this._start!, this.hass.locale)}${dayDifference > 0
+              ? ` -
+          ${formatDate(this._end || endOfDay(new Date()), this.hass.locale)}`
+              : ""}</b
+          >`,
+          end: html`<b
+            >${formatDate(
+              this._startCompare,
+              this.hass.locale
+            )}${dayDifference > 0
+              ? ` -
+          ${formatDate(this._endCompare, this.hass.locale)}`
+              : ""}</b
+          >`,
+        })}
       </ha-alert>
     `;
   }
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index 6d102da24c..38011288fd 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -151,7 +151,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
                 dense
                 outlined
               >
-                Compare data
+                ${this.hass.localize(
+                  "ui.panel.lovelace.components.energy_period_selector.compare"
+                )}
               </ha-icon-button>`
             : html`<mwc-button
                 class="compare ${this._compare ? "active" : ""}"
@@ -159,7 +161,9 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
                 dense
                 outlined
               >
-                Compare data
+                ${this.hass.localize(
+                  "ui.panel.lovelace.components.energy_period_selector.compare"
+                )}
               </mwc-button>`}
         </div>
       </div>
diff --git a/translations/frontend/en.json b/translations/frontend/en.json
index 16d2933745..1c192e45aa 100644
--- a/translations/frontend/en.json
+++ b/translations/frontend/en.json
@@ -2429,6 +2429,10 @@
                                 "title": "Entity not tracked"
                             }
                         }
+                    },
+                    "compare":{
+                        "info": "You are comparing the period {start} with {end}"
+
                     }
                 },
                 "entities": {
@@ -3852,7 +3856,8 @@
                         "previous": "Previous",
                         "today": "Today",
                         "week": "Week",
-                        "year": "Year"
+                        "year": "Year",
+                        "compare": "Compare data"
                     },
                     "timestamp-display": {
                         "invalid": "Invalid timestamp",