mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-02 05:57:54 +00:00
Convert more-info-sun to Lit (#4075)
* Convert more-info-sun to Lit * address comments
This commit is contained in:
parent
be678b02c5
commit
3c0ba1d7eb
@ -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`
|
|
||||||
<style include="iron-flex iron-flex-alignment"></style>
|
|
||||||
|
|
||||||
<template
|
|
||||||
is="dom-repeat"
|
|
||||||
items="[[computeOrder(risingDate, settingDate)]]"
|
|
||||||
>
|
|
||||||
<div class="data-entry layout justified horizontal">
|
|
||||||
<div class="key">
|
|
||||||
<span>[[itemCaption(item)]]</span>
|
|
||||||
<ha-relative-time
|
|
||||||
hass="[[hass]]"
|
|
||||||
datetime-obj="[[itemDate(item)]]"
|
|
||||||
></ha-relative-time>
|
|
||||||
</div>
|
|
||||||
<div class="value">[[itemValue(item)]]</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="data-entry layout justified horizontal">
|
|
||||||
<div class="key">
|
|
||||||
[[localize('ui.dialogs.more_info_control.sun.elevation')]]
|
|
||||||
</div>
|
|
||||||
<div class="value">[[stateObj.attributes.elevation]]</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
84
src/dialogs/more-info/controls/more-info-sun.ts
Normal file
84
src/dialogs/more-info/controls/more-info-sun.ts
Normal file
@ -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`
|
||||||
|
<div class="row">
|
||||||
|
<div class="key">
|
||||||
|
<span
|
||||||
|
>${item === "ris"
|
||||||
|
? this.hass.localize(
|
||||||
|
"ui.dialogs.more_info_control.sun.rising"
|
||||||
|
)
|
||||||
|
: this.hass.localize(
|
||||||
|
"ui.dialogs.more_info_control.sun.setting"
|
||||||
|
)}</span
|
||||||
|
>
|
||||||
|
<ha-relative-time
|
||||||
|
.hass=${this.hass}
|
||||||
|
.datetimeObj=${item === "ris" ? risingDate : settingDate}
|
||||||
|
></ha-relative-time>
|
||||||
|
</div>
|
||||||
|
<div class="value">
|
||||||
|
${formatTime(
|
||||||
|
item === "ris" ? risingDate : settingDate,
|
||||||
|
this.hass.language
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
<div class="row">
|
||||||
|
<div class="key">
|
||||||
|
${this.hass.localize("ui.dialogs.more_info_control.sun.elevation")}
|
||||||
|
</div>
|
||||||
|
<div class="value">${this.stateObj.attributes.elevation}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user