Add support for entity component translations (piitaya#1074)

bryan-stewart · Apr 5, 2023 · 3eeec3d · 3eeec3d
1 parent 235410a
commit 3eeec3d
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 42 deletions.
diff --git a/src/cards/chips-card/chips/alarm-control-panel-chip.ts b/src/cards/chips-card/chips/alarm-control-panel-chip.ts
@@ -77,7 +77,8 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
 
         const iconStyle = {};

diff --git a/src/cards/chips-card/chips/entity-chip.ts b/src/cards/chips-card/chips/entity-chip.ts
@@ -70,7 +70,8 @@ export class EntityChip extends LitElement implements LovelaceChip {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
 
         const active = isActive(entity);

diff --git a/src/cards/chips-card/chips/light-chip.ts b/src/cards/chips-card/chips/light-chip.ts
@@ -76,7 +76,8 @@ export class LightChip extends LitElement implements LovelaceChip {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
 
         const active = isActive(entity);

diff --git a/src/cards/chips-card/chips/weather-chip.ts b/src/cards/chips-card/chips/weather-chip.ts
@@ -65,7 +65,8 @@ export class WeatherChip extends LitElement implements LovelaceChip {
                 this.hass.localize,
                 entity,
                 this.hass.locale,
-                this.hass.entities
+                this.hass.entities,
+                this.hass.connection.haVersion,
             );
             displayLabels.push(stateDisplay);
         }

diff --git a/src/cards/climate-card/climate-card-editor.ts b/src/cards/climate-card/climate-card-editor.ts
@@ -2,7 +2,7 @@ import { html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
-import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "../../ha";
+import { atLeastHaVersion, fireEvent, LocalizeFunc, LovelaceCardEditor } from "../../ha";
 import setupCustomlocalize from "../../localize";
 import { computeActionsFormSchema } from "../../shared/config/actions-config";
 import { APPEARANCE_FORM_SCHEMA } from "../../shared/config/appearance-config";
@@ -16,34 +16,40 @@ import { ClimateCardConfig, climateCardConfigStruct, HVAC_MODES } from "./climat
 
 const CLIMATE_LABELS = ["hvac_modes", "show_temperature_control"] as string[];
 
-const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaFormSchema[] => [
-    { name: "entity", selector: { entity: { domain: CLIMATE_ENTITY_DOMAINS } } },
-    { name: "name", selector: { text: {} } },
-    { name: "icon", selector: { icon: { placeholder: icon } } },
-    ...APPEARANCE_FORM_SCHEMA,
-    {
-        type: "grid",
-        name: "",
-        schema: [
-            {
-                name: "hvac_modes",
-                selector: {
-                    select: {
-                        options: HVAC_MODES.map((mode) => ({
-                            value: mode,
-                            label: localize(`component.climate.state._.${mode}`),
-                        })),
-                        mode: "dropdown",
-                        multiple: true,
+const computeSchema = memoizeOne(
+    (localize: LocalizeFunc, haVersion: string, icon?: string): HaFormSchema[] => [
+        { name: "entity", selector: { entity: { domain: CLIMATE_ENTITY_DOMAINS } } },
+        { name: "name", selector: { text: {} } },
+        { name: "icon", selector: { icon: { placeholder: icon } } },
+        ...APPEARANCE_FORM_SCHEMA,
+        {
+            type: "grid",
+            name: "",
+            schema: [
+                {
+                    name: "hvac_modes",
+                    selector: {
+                        select: {
+                            options: HVAC_MODES.map((mode) => ({
+                                value: mode,
+                                label: localize(
+                                    atLeastHaVersion(haVersion, 2023, 4)
+                                        ? `component.climate.entity_component._.state.${mode}`
+                                        : `component.climate.state._.${mode}`
+                                ),
+                            })),
+                            mode: "dropdown",
+                            multiple: true,
+                        },
                     },
                 },
-            },
-            { name: "show_temperature_control", selector: { boolean: {} } },
-            { name: "collapsible_controls", selector: { boolean: {} } },
-        ],
-    },
-    ...computeActionsFormSchema(),
-]);
+                { name: "show_temperature_control", selector: { boolean: {} } },
+                { name: "collapsible_controls", selector: { boolean: {} } },
+            ],
+        },
+        ...computeActionsFormSchema(),
+    ]
+);
 
 @customElement(CLIMATE_CARD_EDITOR_NAME)
 export class ClimateCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
@@ -79,7 +85,7 @@ export class ClimateCardEditor extends MushroomBaseElement implements LovelaceCa
         const entityState = this._config.entity ? this.hass.states[this._config.entity] : undefined;
         const entityIcon = entityState ? stateIcon(entityState) : undefined;
         const icon = this._config.icon || entityIcon;
-        const schema = computeSchema(this.hass!.localize, icon);
+        const schema = computeSchema(this.hass!.localize, this.hass!.connection.haVersion, icon);
 
         return html`
             <ha-form

diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
@@ -149,7 +149,8 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (entity.attributes.current_temperature !== null) {
             const temperature = formatNumber(

diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
@@ -165,7 +165,8 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (this.position) {
             stateDisplay += ` - ${this.position}${blankBeforePercent(this.hass.locale)}%`;

diff --git a/src/cards/fan-card/fan-card.ts b/src/cards/fan-card/fan-card.ts
@@ -124,7 +124,8 @@ export class FanCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (this.percentage != null) {
             stateDisplay = `${this.percentage}${blankBeforePercent(this.hass.locale)}%`;

diff --git a/src/cards/humidifier-card/humidifier-card.ts b/src/cards/humidifier-card/humidifier-card.ts
@@ -106,7 +106,8 @@ export class HumidifierCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (this.humidity) {
             stateDisplay = `${this.humidity}${blankBeforePercent(this.hass.locale)}%`;

diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts
@@ -180,7 +180,8 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (this.brightness != null) {
             stateDisplay = `${this.brightness}${blankBeforePercent(this.hass.locale)}%`;

diff --git a/src/cards/media-player-card/utils.ts b/src/cards/media-player-card/utils.ts
@@ -51,7 +51,13 @@ export function computeMediaStateDisplay(
     entity: MediaPlayerEntity,
     hass: HomeAssistant
 ): string {
-    let state = computeStateDisplay(hass.localize, entity, hass.locale, hass.entities);
+    let state = computeStateDisplay(
+        hass.localize,
+        entity,
+        hass.locale,
+        hass.entities,
+        hass.connection.haVersion
+    );
     if (![UNAVAILABLE, UNKNOWN, OFF].includes(entity.state) && config.use_media_info) {
         return computeMediaDescription(entity) || state;
     }

diff --git a/src/cards/number-card/number-card.ts b/src/cards/number-card/number-card.ts
@@ -105,7 +105,8 @@ export class NumberCard extends MushroomBaseCard implements LovelaceCard {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion,
         );
         if (this.value !== undefined) {
             const numberValue = formatNumber(

diff --git a/src/ha/common/entity/compute-state-display.ts b/src/ha/common/entity/compute-state-display.ts
@@ -3,6 +3,7 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import { updateIsInstallingFromAttributes, UPDATE_SUPPORT_PROGRESS } from "../../data/update";
 import { EntityRegistryDisplayEntry, HomeAssistant } from "../../types";
+import { atLeastHaVersion } from "../../util";
 import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
@@ -22,12 +23,14 @@ export const computeStateDisplay = (
     stateObj: HassEntity,
     locale: FrontendLocaleData,
     entities: HomeAssistant["entities"],
+    haVersion: string,
     state?: string
 ): string =>
     computeStateDisplayFromEntityAttributes(
         localize,
         locale,
         entities,
+        haVersion,
         stateObj.entity_id,
         stateObj.attributes,
         state !== undefined ? state : stateObj.state
@@ -37,6 +40,7 @@ export const computeStateDisplayFromEntityAttributes = (
     localize: LocalizeFunc,
     locale: FrontendLocaleData,
     entities: HomeAssistant["entities"],
+    haVersion: string,
     entityId: string,
     attributes: any,
     state: string
@@ -200,9 +204,17 @@ export const computeStateDisplayFromEntityAttributes = (
             )) ||
         // Return device class translation
         (attributes.device_class &&
-            localize(`component.${domain}.state.${attributes.device_class}.${state}`)) ||
+            localize(
+                atLeastHaVersion(haVersion, 2023, 4)
+                    ? `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
+                    : `component.${domain}.state.${attributes.device_class}.${state}`
+            )) ||
         // Return default translation
-        localize(`component.${domain}.state._.${state}`) ||
+        localize(
+            atLeastHaVersion(haVersion, 2023, 4)
+                ? `component.${domain}.entity_component._.state.${state}`
+                : `component.${domain}.state._.${state}`
+        ) ||
         // We don't know! Return the raw state.
         state
     );

diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
@@ -59,7 +59,8 @@ export class MushroomBaseCard extends MushroomBaseElement {
             this.hass.localize,
             entity,
             this.hass.locale,
-            this.hass.entities
+            this.hass.entities,
+            this.hass.connection.haVersion
         );
         const displayState = state ?? defaultState;