diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 97ef655d18..73a7eaa762 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -11,7 +11,9 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; -import { formatDateTime } from "../../../common/datetime/format_date_time"; +import { differenceInDays } from "date-fns/esm"; +import { formatShortDateTime } from "../../../common/datetime/format_date_time"; +import { relativeTime } from "../../../common/datetime/relative_time"; import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { navigate } from "../../../common/navigate"; @@ -99,18 +101,22 @@ class HaScriptPicker extends LitElement { direction: "asc", grows: true, template: narrow - ? (name, script: any) => html` - ${name} -
- ${this.hass.localize("ui.card.automation.last_triggered")}: - ${script.attributes.last_triggered - ? formatDateTime( - new Date(script.attributes.last_triggered), - this.hass.locale - ) - : this.hass.localize("ui.components.relative_time.never")} -
- ` + ? (name, script: any) => { + const date = new Date(script.attributes.last_triggered); + const now = new Date(); + const dayDifference = differenceInDays(now, date); + return html` + ${name} +
+ ${this.hass.localize("ui.card.automation.last_triggered")}: + ${script.attributes.last_triggered + ? dayDifference > 3 + ? formatShortDateTime(date, this.hass.locale) + : relativeTime(date, this.hass.locale) + : this.hass.localize("ui.components.relative_time.never")} +
+ `; + } : undefined, }, }; @@ -119,11 +125,18 @@ class HaScriptPicker extends LitElement { sortable: true, width: "40%", title: this.hass.localize("ui.card.automation.last_triggered"), - template: (last_triggered) => html` - ${last_triggered - ? formatDateTime(new Date(last_triggered), this.hass.locale) - : this.hass.localize("ui.components.relative_time.never")} - `, + template: (last_triggered) => { + const date = new Date(last_triggered); + const now = new Date(); + const dayDifference = differenceInDays(now, date); + return html` + ${last_triggered + ? dayDifference > 3 + ? formatShortDateTime(date, this.hass.locale) + : relativeTime(date, this.hass.locale) + : this.hass.localize("ui.components.relative_time.never")} + `; + }, }; }