jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use relative time display for timestamp sensor, buttons and scene in tile card (#14385)

Browse Source 
Use relative time display for timestamp sensor, buttons and scene
This commit is contained in:
Paul Bottein 2022-11-16 17:47:25 +01:00 committed by GitHub
parent 70868da305
commit 048b345c75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/tile/ha-tile-info.ts
View File

@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
export class HaTileInfo extends LitElement { export class HaTileInfo extends LitElement {
@property() public primary?: string; @property() public primary?: string;
@property() public secondary?: string; @property() public secondary?: string | TemplateResult<1>;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`

25
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -18,15 +18,20 @@ import "../../../components/tile/ha-tile-icon";
import "../../../components/tile/ha-tile-image"; import "../../../components/tile/ha-tile-image";
import "../../../components/tile/ha-tile-info"; import "../../../components/tile/ha-tile-info";
import { cameraUrlWithWidthHeight } from "../../../data/camera"; import { cameraUrlWithWidthHeight } from "../../../data/camera";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { ActionHandlerEvent } from "../../../data/lovelace"; import { ActionHandlerEvent } from "../../../data/lovelace";
import { SENSOR_DEVICE_CLASS_TIMESTAMP } from "../../../data/sensor";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
import { findEntities } from "../common/find-entities"; import { findEntities } from "../common/find-entities";
import { handleAction } from "../common/handle-action"; import { handleAction } from "../common/handle-action";
import "../components/hui-timestamp-display";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
import { computeTileBadge } from "./tile/badges/tile-badge"; import { computeTileBadge } from "./tile/badges/tile-badge";
import { ThermostatCardConfig, TileCardConfig } from "./types"; import { ThermostatCardConfig, TileCardConfig } from "./types";
const TIMESTAMP_STATE_DOMAINS = ["button", "input_button", "scene"];
@customElement("hui-tile-card") @customElement("hui-tile-card")
export class HuiTileCard extends LitElement implements LovelaceCard { export class HuiTileCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> { public static async getConfigElement(): Promise<LovelaceCardEditor> {
@ -164,15 +169,25 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
`; `;
} }
const domain = computeDomain(entity.entity_id);
const icon = this._config.icon || entity.attributes.icon; const icon = this._config.icon || entity.attributes.icon;
const iconPath = stateIconPath(entity); const iconPath = stateIconPath(entity);
const name = this._config.name || entity.attributes.friendly_name; const name = this._config.name || entity.attributes.friendly_name;
const stateDisplay = computeStateDisplay( const stateDisplay =
this.hass.localize, (entity.attributes.device_class === SENSOR_DEVICE_CLASS_TIMESTAMP ||
entity, TIMESTAMP_STATE_DOMAINS.includes(domain)) &&
this.hass.locale !UNAVAILABLE_STATES.includes(entity.state)
); ? html`
<hui-timestamp-display
.hass=${this.hass}
.ts=${new Date(entity.state)}
.format=${this._config.format}
capitalize
></hui-timestamp-display>
`
: computeStateDisplay(this.hass!.localize, entity, this.hass.locale);
const color = this._computeStateColor(entity, this._config.color); const color = this._computeStateColor(entity, this._config.color);