From 3c0ba1d7eb27d49a2eae8003b15c7baec7ddbd01 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Mon, 21 Oct 2019 13:04:22 -0500 Subject: [PATCH] Convert more-info-sun to Lit (#4075) * Convert more-info-sun to Lit * address comments --- .../more-info/controls/more-info-sun.js | 83 ------------------ .../more-info/controls/more-info-sun.ts | 84 +++++++++++++++++++ 2 files changed, 84 insertions(+), 83 deletions(-) delete mode 100644 src/dialogs/more-info/controls/more-info-sun.js create mode 100644 src/dialogs/more-info/controls/more-info-sun.ts diff --git a/src/dialogs/more-info/controls/more-info-sun.js b/src/dialogs/more-info/controls/more-info-sun.js deleted file mode 100644 index d806826f23..0000000000 --- a/src/dialogs/more-info/controls/more-info-sun.js +++ /dev/null @@ -1,83 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../../components/ha-relative-time"; - -import LocalizeMixin from "../../../mixins/localize-mixin"; -import formatTime from "../../../common/datetime/format_time"; - -class MoreInfoSun extends LocalizeMixin(PolymerElement) { - static get template() { - return html` - - - -
-
- [[localize('ui.dialogs.more_info_control.sun.elevation')]] -
-
[[stateObj.attributes.elevation]]
-
- `; - } - - static get properties() { - return { - hass: Object, - stateObj: Object, - risingDate: { - type: Object, - computed: "computeRising(stateObj)", - }, - - settingDate: { - type: Object, - computed: "computeSetting(stateObj)", - }, - }; - } - - computeRising(stateObj) { - return new Date(stateObj.attributes.next_rising); - } - - computeSetting(stateObj) { - return new Date(stateObj.attributes.next_setting); - } - - computeOrder(risingDate, settingDate) { - return risingDate > settingDate ? ["set", "ris"] : ["ris", "set"]; - } - - itemCaption(type) { - if (type === "ris") { - return this.localize("ui.dialogs.more_info_control.sun.rising"); - } - return this.localize("ui.dialogs.more_info_control.sun.setting"); - } - - itemDate(type) { - return type === "ris" ? this.risingDate : this.settingDate; - } - - itemValue(type) { - return formatTime(this.itemDate(type), this.hass.language); - } -} - -customElements.define("more-info-sun", MoreInfoSun); diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts new file mode 100644 index 0000000000..088e686379 --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -0,0 +1,84 @@ +import { + property, + LitElement, + TemplateResult, + html, + customElement, + CSSResult, + css, +} from "lit-element"; +import { HassEntity } from "home-assistant-js-websocket"; + +import "../../../components/ha-relative-time"; + +import formatTime from "../../../common/datetime/format_time"; +import { HomeAssistant } from "../../../types"; + +@customElement("more-info-sun") +class MoreInfoSun extends LitElement { + @property() public hass!: HomeAssistant; + @property() public stateObj?: HassEntity; + + protected render(): TemplateResult | void { + if (!this.hass || !this.stateObj) { + return html``; + } + + const risingDate = new Date(this.stateObj.attributes.next_rising); + const settingDate = new Date(this.stateObj.attributes.next_setting); + const order = risingDate > settingDate ? ["set", "ris"] : ["ris", "set"]; + + return html` + ${order.map((item) => { + return html` +
+
+ ${item === "ris" + ? this.hass.localize( + "ui.dialogs.more_info_control.sun.rising" + ) + : this.hass.localize( + "ui.dialogs.more_info_control.sun.setting" + )} + +
+
+ ${formatTime( + item === "ris" ? risingDate : settingDate, + this.hass.language + )} +
+
+ `; + })} +
+
+ ${this.hass.localize("ui.dialogs.more_info_control.sun.elevation")} +
+
${this.stateObj.attributes.elevation}
+
+ `; + } + + static get styles(): CSSResult { + return css` + .row { + margin: 0 8px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "more-info-sun": MoreInfoSun; + } +}