Fix missing translatable energy texts (#12877)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
Co-authored-by: Philip Allgaier <philip.allgaier@gmx.de>

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
+        ${this.hass.localize("ui.panel.energy.compare.info", {
-        <b
+          start: html`<b
-          >${formatDate(this._start!, this.hass.locale)}${dayDifference > 0
+            >${formatDate(this._start!, this.hass.locale)}${dayDifference > 0
-            ? ` -
+              ? ` -
-        ${formatDate(this._end || endOfDay(new Date()), this.hass.locale)}`
+          ${formatDate(this._end || endOfDay(new Date()), this.hass.locale)}`
-            : ""}</b
+              : ""}</b
-        >
+          >`,
-        with period
+          end: html`<b
-        <b
+            >${formatDate(
-          >${formatDate(this._startCompare, this.hass.locale)}${dayDifference >
+              this._startCompare,
-          0
+              this.hass.locale
-            ? ` -
+            )}${dayDifference > 0
-        ${formatDate(this._endCompare, this.hass.locale)}`
+              ? ` -
-            : ""}</b
+          ${formatDate(this._endCompare, this.hass.locale)}`
-        >
+              : ""}</b
+          >`,
+        })}
       </ha-alert>
     `;
   }

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>

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",