mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Convert ha-relative-time to TypeScript/LitElement (#7709)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
f69951a523
commit
10916fa82a
@ -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);
|
|
72
src/components/ha-relative-time.ts
Normal file
72
src/components/ha-relative-time.ts
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import {
|
||||||
|
customElement,
|
||||||
|
UpdatingElement,
|
||||||
|
property,
|
||||||
|
PropertyValues,
|
||||||
|
} from "lit-element";
|
||||||
|
|
||||||
|
import relativeTime from "../common/datetime/relative_time";
|
||||||
|
|
||||||
|
import type { HomeAssistant } from "../types";
|
||||||
|
|
||||||
|
@customElement("ha-relative-time")
|
||||||
|
class HaRelativeTime extends UpdatingElement {
|
||||||
|
@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 update(changedProps: PropertyValues) {
|
||||||
|
super.update(changedProps);
|
||||||
|
this._updateRelative();
|
||||||
|
}
|
||||||
|
|
||||||
|
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(): void {
|
||||||
|
if (!this.datetime) {
|
||||||
|
this.innerHTML = this.hass.localize("ui.components.relative_time.never");
|
||||||
|
} else {
|
||||||
|
this.innerHTML = relativeTime(
|
||||||
|
new Date(this.datetime),
|
||||||
|
this.hass.localize
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ha-relative-time": HaRelativeTime;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user