From f520b1c7edd505a922a3d57c7c4dff0030045176 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 17 Nov 2020 01:33:51 -0600 Subject: [PATCH 1/4] Convert ha-relative-time to TypeScript/LitElement --- src/components/ha-relative-time.js | 66 ------------------------- src/components/ha-relative-time.ts | 78 ++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 66 deletions(-) delete mode 100644 src/components/ha-relative-time.js create mode 100644 src/components/ha-relative-time.ts diff --git a/src/components/ha-relative-time.js b/src/components/ha-relative-time.js deleted file mode 100644 index 58d787ebb5fd..000000000000 --- a/src/components/ha-relative-time.js +++ /dev/null @@ -1,66 +0,0 @@ -import { dom } from "@polymer/polymer/lib/legacy/polymer.dom"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import relativeTime from "../common/datetime/relative_time"; -import LocalizeMixin from "../mixins/localize-mixin"; - -/* - * @appliesMixin LocalizeMixin - */ -class HaRelativeTime extends LocalizeMixin(PolymerElement) { - static get properties() { - return { - hass: Object, - datetime: { - type: String, - observer: "datetimeChanged", - }, - - datetimeObj: { - type: Object, - observer: "datetimeObjChanged", - }, - - parsedDateTime: Object, - }; - } - - constructor() { - super(); - this.updateRelative = this.updateRelative.bind(this); - } - - connectedCallback() { - super.connectedCallback(); - // update every 60 seconds - this.updateInterval = setInterval(this.updateRelative, 60000); - } - - disconnectedCallback() { - super.disconnectedCallback(); - clearInterval(this.updateInterval); - } - - datetimeChanged(newVal) { - this.parsedDateTime = newVal ? new Date(newVal) : null; - - this.updateRelative(); - } - - datetimeObjChanged(newVal) { - this.parsedDateTime = newVal; - - this.updateRelative(); - } - - updateRelative() { - const root = dom(this); - if (!this.parsedDateTime) { - root.innerHTML = this.localize("ui.components.relative_time.never"); - } else { - root.innerHTML = relativeTime(this.parsedDateTime, this.localize); - } - } -} - -customElements.define("ha-relative-time", HaRelativeTime); diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts new file mode 100644 index 000000000000..74de52f599ae --- /dev/null +++ b/src/components/ha-relative-time.ts @@ -0,0 +1,78 @@ +import { + customElement, + html, + LitElement, + property, + PropertyValues, + TemplateResult, +} from "lit-element"; +import relativeTime from "../common/datetime/relative_time"; +import { HomeAssistant } from "../types"; + +@customElement("ha-relative-time") +class HaRelativeTime extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public datetime?: string; + + private _interval?: number; + + public disconnectedCallback(): void { + super.disconnectedCallback(); + this._clearInterval(); + } + + public connectedCallback(): void { + super.connectedCallback(); + if (this.datetime) { + this._startInterval(); + } + } + + protected firstUpdated(changedProps: PropertyValues) { + super.firstUpdated(changedProps); + this._updateRelative(); + } + + protected updated(changedProps: PropertyValues) { + super.updated(changedProps); + this._updateRelative(); + } + + protected render(): TemplateResult { + return html`
`; + } + + private _clearInterval(): void { + if (this._interval) { + window.clearInterval(this._interval); + this._interval = undefined; + } + } + + private _startInterval(): void { + this._clearInterval(); + + // update every 60 seconds + this._interval = window.setInterval(() => this._updateRelative(), 60000); + } + + private _updateRelative() { + if (!this.datetime) { + this.shadowRoot!.querySelector( + ".datetime" + )!.innerHTML = this.hass.localize("ui.components.relative_time.never"); + } else { + this.shadowRoot!.querySelector(".datetime")!.innerHTML = relativeTime( + new Date(this.datetime), + this.hass.localize + ); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-relative-time": HaRelativeTime; + } +} From 9d04d72f9685712070a5d3066e355fb6e7a942fb Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 17 Nov 2020 01:35:23 -0600 Subject: [PATCH 2/4] type --- src/components/ha-relative-time.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts index 74de52f599ae..298a781e8d92 100644 --- a/src/components/ha-relative-time.ts +++ b/src/components/ha-relative-time.ts @@ -6,8 +6,10 @@ import { PropertyValues, TemplateResult, } from "lit-element"; + import relativeTime from "../common/datetime/relative_time"; -import { HomeAssistant } from "../types"; + +import type { HomeAssistant } from "../types"; @customElement("ha-relative-time") class HaRelativeTime extends LitElement { From d9baf72ed1fe9ab7f6bf0899da1f0243d0404ab3 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 17 Nov 2020 19:43:05 -0600 Subject: [PATCH 3/4] address review comments --- src/components/ha-relative-time.ts | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts index 298a781e8d92..76c4601c38ed 100644 --- a/src/components/ha-relative-time.ts +++ b/src/components/ha-relative-time.ts @@ -1,10 +1,8 @@ import { customElement, - html, - LitElement, + UpdatingElement, property, PropertyValues, - TemplateResult, } from "lit-element"; import relativeTime from "../common/datetime/relative_time"; @@ -12,7 +10,7 @@ import relativeTime from "../common/datetime/relative_time"; import type { HomeAssistant } from "../types"; @customElement("ha-relative-time") -class HaRelativeTime extends LitElement { +class HaRelativeTime extends UpdatingElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public datetime?: string; @@ -41,10 +39,6 @@ class HaRelativeTime extends LitElement { this._updateRelative(); } - protected render(): TemplateResult { - return html`
`; - } - private _clearInterval(): void { if (this._interval) { window.clearInterval(this._interval); @@ -59,13 +53,11 @@ class HaRelativeTime extends LitElement { this._interval = window.setInterval(() => this._updateRelative(), 60000); } - private _updateRelative() { + private _updateRelative(): void { if (!this.datetime) { - this.shadowRoot!.querySelector( - ".datetime" - )!.innerHTML = this.hass.localize("ui.components.relative_time.never"); + this.innerHTML = this.hass.localize("ui.components.relative_time.never"); } else { - this.shadowRoot!.querySelector(".datetime")!.innerHTML = relativeTime( + this.innerHTML = relativeTime( new Date(this.datetime), this.hass.localize ); From 9c593945f6beb597df4c6f6a4877e12177d72ca9 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 19 Nov 2020 17:34:39 -0600 Subject: [PATCH 4/4] Update src/components/ha-relative-time.ts Co-authored-by: Bram Kragten --- src/components/ha-relative-time.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts index 76c4601c38ed..1bd6e39afcf4 100644 --- a/src/components/ha-relative-time.ts +++ b/src/components/ha-relative-time.ts @@ -34,8 +34,8 @@ class HaRelativeTime extends UpdatingElement { this._updateRelative(); } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); + protected update(changedProps: PropertyValues) { + super.update(changedProps); this._updateRelative(); }