diff --git a/src/common/const.ts b/src/common/const.ts index 061adf875d..243bb61ec1 100644 --- a/src/common/const.ts +++ b/src/common/const.ts @@ -116,3 +116,6 @@ export const UNIT_F = "°F"; /** Entity ID of the default view. */ export const DEFAULT_VIEW_ENTITY_ID = "group.default_view"; + +/** String to visually separate labels on UI */ +export const STRINGS_SEPARATOR_DOT = " · "; diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index e294047a57..6799a0ce9b 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -20,6 +20,7 @@ import type { LocalizeFunc } from "../../common/translations/localize"; import { debounce } from "../../common/util/debounce"; import { groupBy } from "../../common/util/group-by"; import { nextRender } from "../../common/util/render-status"; +import { STRINGS_SEPARATOR_DOT } from "../../common/const"; import { haStyleScrollbar } from "../../resources/styles"; import { loadVirtualizer } from "../../resources/virtualizer"; import type { HomeAssistant } from "../../types"; @@ -636,7 +637,7 @@ export class HaDataTable extends LitElement { .map( ([key2, column2], i) => html`${i !== 0 - ? " · " + ? STRINGS_SEPARATOR_DOT : nothing}${column2.template ? column2.template(row) : row[key2]}` diff --git a/src/panels/config/repairs/ha-config-repairs.ts b/src/panels/config/repairs/ha-config-repairs.ts index 9ee879c507..0dbe0ac424 100644 --- a/src/panels/config/repairs/ha-config-repairs.ts +++ b/src/panels/config/repairs/ha-config-repairs.ts @@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { relativeTime } from "../../../common/datetime/relative_time"; import { capitalizeFirstLetter } from "../../../common/string/capitalize-first-letter"; +import { STRINGS_SEPARATOR_DOT } from "../../../common/const"; import "../../../components/ha-md-list"; import "../../../components/ha-md-list-item"; import { domainToName } from "../../../data/integration"; @@ -99,7 +100,7 @@ class HaConfigRepairs extends LitElement { ${(issue.severity === "critical" || issue.severity === "error") && issue.created - ? " · " + ? STRINGS_SEPARATOR_DOT : ""} ${createdBy ? html`${createdBy}` diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index 693c0ff33e..37dcab3d6d 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -13,7 +13,7 @@ import { ifDefined } from "lit/directives/if-defined"; import { styleMap } from "lit/directives/style-map"; import memoizeOne from "memoize-one"; import { computeCssColor } from "../../../common/color/compute-color"; -import { BINARY_STATE_ON } from "../../../common/const"; +import { BINARY_STATE_ON, STRINGS_SEPARATOR_DOT } from "../../../common/const"; import { computeAreaName } from "../../../common/entity/compute_area_name"; import { generateEntityFilter } from "../../../common/entity/entity_filter"; import type { ActionHandlerEvent } from "../../../data/lovelace/action_handler"; @@ -522,7 +522,7 @@ export class HuiAreaCard extends LitElement implements LovelaceCard { return `${formattedValue}${formattedUnit}`; }) .filter(Boolean) - .join(" · "); + .join(STRINGS_SEPARATOR_DOT); return sensorStates; } diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index e8953379e9..d6d05476ca 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -94,6 +94,7 @@ export interface EntitiesCardEntityConfig extends EntityConfig { | "last-changed" | "last-triggered" | "last-updated" + | "area" | "position" | "state" | "tilt-position" diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index 98db07fe54..c99b847640 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -8,6 +8,8 @@ import { uid } from "../../../common/util/uid"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { toggleAttribute } from "../../../common/dom/toggle_attribute"; import { computeDomain } from "../../../common/entity/compute_domain"; +import { computeAreaName } from "../../../common/entity/compute_area_name"; +import { getEntityContext } from "../../../common/entity/context/get_entity_context"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import "../../../components/entity/state-badge"; import "../../../components/ha-relative-time"; @@ -199,7 +201,9 @@ export class HuiGenericEntityRow extends LitElement { ? html`${this.hass.formatEntityState( stateObj )}` - : nothing)} + : this.config.secondary_info === "area" + ? (this._getArea(stateObj) ?? nothing) + : nothing)} ` : nothing} @@ -235,6 +239,17 @@ export class HuiGenericEntityRow extends LitElement { handleAction(this, this.hass!, this.config!, ev.detail.action!); } + private _getArea(stateObj) { + const context = getEntityContext( + stateObj, + this.hass!.entities, + this.hass!.devices, + this.hass!.areas, + this.hass!.floors + ); + return context.area ? computeAreaName(context.area) : undefined; + } + static styles = css` :host { display: flex; diff --git a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts index 79b9d95999..3d658a775b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts @@ -18,6 +18,7 @@ const SECONDARY_INFO_VALUES = { "last-changed": {}, "last-updated": {}, "last-triggered": { domains: ["automation", "script"] }, + area: {}, position: { domains: ["cover"] }, state: {}, "tilt-position": { domains: ["cover"] }, diff --git a/src/state-display/state-display.ts b/src/state-display/state-display.ts index e74ba77528..37a4be3c21 100644 --- a/src/state-display/state-display.ts +++ b/src/state-display/state-display.ts @@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators"; import { join } from "lit/directives/join"; import { ensureArray } from "../common/array/ensure-array"; import { computeStateDomain } from "../common/entity/compute_state_domain"; +import { STRINGS_SEPARATOR_DOT } from "../common/const"; import "../components/ha-relative-time"; import { isUnavailableState } from "../data/entity/entity"; import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../data/sensor"; @@ -194,7 +195,7 @@ class StateDisplay extends LitElement { return html`${this.hass!.formatEntityState(stateObj)}`; } - return join(values, " · "); + return join(values, STRINGS_SEPARATOR_DOT); } } diff --git a/src/translations/en.json b/src/translations/en.json index 8f41cade4b..8f33dbaca2 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -8634,7 +8634,8 @@ "tilt-position": "Tilt position", "brightness": "Brightness", "last-updated": "Last updated", - "state": "State" + "state": "State", + "area": "Area" }, "entity_row": { "divider": "Divider",