diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 3df6243a6d..6e39c9d20c 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -35,6 +35,8 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { navigate } from "../../../common/navigate"; +import { slugify } from "../../../common/string/slugify"; +import "../../../components/ha-tooltip"; import type { LocalizeFunc } from "../../../common/translations/localize"; import { hasRejectedItems, @@ -327,14 +329,19 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { const date = new Date(automation.last_triggered); const now = new Date(); const dayDifference = differenceInDays(now, date); + const formattedTime = formatShortDateTimeWithConditionalYear( + date, + this.hass.locale, + this.hass.config + ); + const elementId = "last-triggered-" + slugify(automation.entity_id); return html` ${dayDifference > 3 - ? formatShortDateTimeWithConditionalYear( - date, - this.hass.locale, - this.hass.config - ) - : relativeTime(date, locale)} + ? formattedTime + : html` + ${formattedTime} + ${relativeTime(date, locale)} + `} `; }, }, diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 87b90b184f..454caec630 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -24,7 +24,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { computeCssColor } from "../../../common/color/compute-color"; -import { formatShortDateTime } from "../../../common/datetime/format_date_time"; +import { formatShortDateTimeWithConditionalYear } from "../../../common/datetime/format_date_time"; import { relativeTime } from "../../../common/datetime/relative_time"; import { storage } from "../../../common/decorators/storage"; import type { HASSDomEvent } from "../../../common/dom/fire_event"; @@ -301,10 +301,21 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { const date = new Date(scene.state); const now = new Date(); const dayDifference = differenceInDays(now, date); + const formattedTime = formatShortDateTimeWithConditionalYear( + date, + this.hass.locale, + this.hass.config + ); + const elementId = "last-activated-" + slugify(scene.entity_id); return html` ${dayDifference > 3 - ? formatShortDateTime(date, this.hass.locale, this.hass.config) - : relativeTime(date, this.hass.locale)} + ? formattedTime + : html` + ${formattedTime} + ${relativeTime(date, this.hass.locale)} + `} `; }, }, diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 9a7701c643..e371da6329 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -33,6 +33,8 @@ import type { HASSDomEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { navigate } from "../../../common/navigate"; +import { slugify } from "../../../common/string/slugify"; +import "../../../components/ha-tooltip"; import type { LocalizeFunc } from "../../../common/translations/localize"; import { hasRejectedItems, @@ -302,19 +304,27 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { sortable: true, title: localize("ui.card.automation.last_triggered"), template: (script) => { + if (!script.last_triggered) { + return this.hass.localize("ui.components.relative_time.never"); + } const date = new Date(script.last_triggered); const now = new Date(); const dayDifference = differenceInDays(now, date); + const formattedTime = formatShortDateTimeWithConditionalYear( + date, + this.hass.locale, + this.hass.config + ); + const elementId = "last-triggered-" + slugify(script.entity_id); return html` - ${script.last_triggered - ? dayDifference > 3 - ? formatShortDateTimeWithConditionalYear( - date, - this.hass.locale, - this.hass.config - ) - : relativeTime(date, this.hass.locale) - : this.hass.localize("ui.components.relative_time.never")} + ${dayDifference > 3 + ? formattedTime + : html` + ${formattedTime} + ${relativeTime(date, this.hass.locale)} + `} `; }, },